/* ─────────────────────────────────────────────
   Optiora · Brand Design Tokens
   Shared colour system for all pages
───────────────────────────────────────────── */

:root {
    /* Brand orange — primary actions, selected states, progress */
    --brand-orange:        #e8600a;
    --brand-orange-dark:   #c2410c;
    --brand-orange-hover:  #d4520b;
    --brand-orange-light:  #fb923c;
    --brand-orange-soft:   rgba(232, 96, 10, 0.10);
    --brand-orange-border: rgba(232, 96, 10, 0.22);
    --brand-orange-glow:   rgba(232, 96, 10, 0.18);

    /* Brand yellow — highlights, badges, active hints */
    --brand-yellow:        #f0c040;
    --brand-yellow-dark:   #d4a017;
    --brand-yellow-soft:   rgba(240, 192, 64, 0.14);
    --brand-yellow-border: rgba(212, 160, 23, 0.30);

    /* Warm surfaces */
    --surface-warm:        #fffbf5;
    --surface-warm-alt:    #fef7ee;
    --surface-cream:       #fdfaf6;

    /* Warm borders */
    --border-warm:         #f5e6d3;
    --border-warm-strong:  #efd5b8;

    /* Text hierarchy */
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-tertiary:  #64748b;
    --text-muted:     #94a3b8;

    /* Elevation */
    --shadow-xs:      0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-sm:      0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    --shadow-md:      0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.03);
    --shadow-lg:      0 12px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.03);
    --shadow-xl:      0 20px 60px rgba(15, 23, 42, 0.10), 0 8px 20px rgba(15, 23, 42, 0.04);
    --shadow-orange:  0 4px 16px rgba(232, 96, 10, 0.14), 0 1px 4px rgba(232, 96, 10, 0.08);
    --shadow-warm:    0 4px 20px rgba(212, 160, 23, 0.10);

    /* Gradient presets */
    --gradient-orange:      linear-gradient(135deg, #fb923c 0%, #e8600a 50%, #c2410c 100%);
    --gradient-orange-soft: linear-gradient(135deg, rgba(232, 96, 10, 0.08) 0%, rgba(194, 65, 12, 0.04) 100%);
    --gradient-warm-card:   linear-gradient(180deg, #ffffff 0%, #fffcf8 100%);

    /* Radius tokens */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-pill: 999px;

    /* Timing */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   0.15s;
    --duration-normal: 0.22s;
    --duration-slow:   0.35s;
}