/* ================================================================
   ROCKET ACADEMY — Design Tokens
   Dark theme. Semantic names for future light mode compatibility.
   ================================================================ */

:root {
    /* ── SURFACES ──────────────────────────────────────────────── */
    --bg-canvas:         #07070B;    /* page background */
    --bg-surface:        #0C0C12;    /* cards */
    --bg-surface-raised: #111118;    /* cards on cards, modals */
    --bg-surface-sunken: #050508;    /* inputs, recessed areas */
    --bg-overlay:        rgba(0, 0, 0, 0.6); /* modal backdrop */
    --bg-hover:          rgba(255, 255, 255, 0.04);
    --bg-active:         rgba(255, 255, 255, 0.06);

    /* ── TEXT ──────────────────────────────────────────────────── */
    --text-primary:      #EEEEF2;    /* titles, main body */
    --text-secondary:    rgba(238, 238, 242, 0.65); /* secondary body */
    --text-tertiary:     rgba(238, 238, 242, 0.4);  /* metadata, timestamps */
    --text-placeholder:  rgba(238, 238, 242, 0.25); /* input placeholders */
    --text-disabled:     rgba(238, 238, 242, 0.15);
    --text-inverse:      #07070B;    /* text on accent backgrounds */

    /* ── BORDERS ───────────────────────────────────────────────── */
    --border-subtle:     rgba(255, 255, 255, 0.05);  /* dividers */
    --border-default:    rgba(255, 255, 255, 0.08);  /* card borders */
    --border-strong:     rgba(255, 255, 255, 0.14);  /* active inputs */
    --border-focus:      rgba(196, 65, 6, 0.4);       /* focus ring border (primary) */

    /* ── BRAND + PRIMARY (dual orange system) ─────────────────── */
    /* Brand: logo, hero, decorative — warmer, higher chroma */
    --color-brand:          #E95410;
    /* Primary: buttons, links, focus rings, UI accents — darker for WCAG AA */
    --color-primary:        #C44106;  /* ratio ~5.2:1 on white, ~4.5:1 on #F8F8F8 */
    --color-primary-hover:  #A53504;
    --color-primary-active: #922F03;
    --color-primary-soft:   rgba(196, 65, 6, 0.08);  /* soft backgrounds, badges, card hovers — dark mode */
    --color-primary-foreground: #FFFFFF;

    /* ── ACCENT (mapped from primary for backward compat) ───── */
    --accent-primary:       var(--color-primary);
    --accent-primary-hover: var(--color-primary-hover);
    --accent-primary-active: var(--color-primary-active);
    --accent-primary-fg:    var(--color-primary-foreground);
    --accent-muted:         rgba(196, 65, 6, 0.10); /* tinted backgrounds */
    --accent-muted-hover:   rgba(196, 65, 6, 0.16);
    --accent-subtle:        rgba(196, 65, 6, 0.06); /* very subtle tint */

    /* ── ACCENT ALPHA (primitives) ────────────────────────────── */
    --accent-alpha-4:   color-mix(in srgb, var(--accent-primary) 4%, transparent);
    --accent-alpha-8:   color-mix(in srgb, var(--accent-primary) 8%, transparent);
    --accent-alpha-10:  color-mix(in srgb, var(--accent-primary) 10%, transparent);
    --accent-alpha-15:  color-mix(in srgb, var(--accent-primary) 15%, transparent);
    --accent-alpha-20:  color-mix(in srgb, var(--accent-primary) 20%, transparent);
    --accent-alpha-25:  color-mix(in srgb, var(--accent-primary) 25%, transparent);
    --accent-alpha-30:  color-mix(in srgb, var(--accent-primary) 30%, transparent);
    --accent-alpha-35:  color-mix(in srgb, var(--accent-primary) 35%, transparent);
    --accent-alpha-40:  color-mix(in srgb, var(--accent-primary) 40%, transparent);
    --accent-alpha-50:  color-mix(in srgb, var(--accent-primary) 50%, transparent);
    --accent-alpha-60:  color-mix(in srgb, var(--accent-primary) 60%, transparent);

    /* Semantic accent (public API — components use THESE, not primitives) */
    --accent-glow-soft:    var(--accent-alpha-4);   /* gradients muy sutiles */
    --accent-glow-medium:  var(--accent-alpha-15);  /* hover backgrounds, borders suaves */
    --accent-glow-strong:  var(--accent-alpha-30);  /* selection, borders activos */
    --accent-glow-intense: var(--accent-alpha-40);  /* glows de elementos activos */

    --accent-border-soft:  var(--accent-alpha-10);  /* bordes interiores, insets decorativos */

    --accent-shadow-sm:    0 2px 8px var(--accent-alpha-25);
    --accent-shadow-md:    0 4px 16px var(--accent-alpha-35);
    --accent-shadow-lg:    0 6px 20px var(--accent-alpha-40);
    --accent-shadow-glow:  0 0 8px var(--accent-alpha-40);

    --accent-focus-ring:   0 0 0 3px var(--accent-alpha-15);

    /* Surface overlays — fondos blur con alpha fijo (no derivado de --bg-canvas) */
    --bg-topbar-blur:   rgba(7, 7, 11, 0.88);   /* topbar desktop con backdrop-filter */
    --bg-topbar-mobile: rgba(7, 7, 11, 0.95);   /* topbar mobile con backdrop-filter */
    --bg-bottomnav:     rgba(7, 7, 11, 0.92);   /* bottom nav mobile */
    --bg-slide-menu:    rgba(10, 10, 15, 0.98); /* slide menu mobile */

    /* ── STATES ────────────────────────────────────────────────── */
    --success:           #22C55E;
    --success-hover:     #16A34A;
    --success-active:    #15803D;
    --success-fg:        #FFFFFF;
    --success-muted:     rgba(34, 197, 94, 0.10);
    --success-border:    rgba(34, 197, 94, 0.20);

    --warning:           #FBBF24;
    --warning-fg:        #07070B;
    --warning-muted:     rgba(251, 191, 36, 0.10);
    --warning-border:    rgba(251, 191, 36, 0.20);

    --danger:            #DC2626;  /* was #EF4444 — WCAG AA pass (ratio ~4.6) */
    --danger-hover:      #B91C1C;
    --danger-active:     #991B1B;
    --danger-fg:         #FFFFFF;
    --danger-muted:      rgba(220, 38, 38, 0.10);
    --danger-border:     rgba(239, 68, 68, 0.20);

    --info:              #3B82F6;
    --info-fg:           #FFFFFF;
    --info-muted:        rgba(59, 130, 246, 0.10);
    --info-border:       rgba(59, 130, 246, 0.20);

    /* ── TYPOGRAPHY ────────────────────────────────────────────── */
    --font-body:         'Inter', system-ui, -apple-system, sans-serif;
    --font-primary:      var(--font-body); /* alias for backward compat */
    --font-mono:         'JetBrains Mono', ui-monospace, monospace;

    --text-2xs:  0.6875rem;  /* 11px */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.875rem;   /* 14px — app body */
    --text-md:   0.9375rem;  /* 15px */
    --text-lg:   1.0625rem;  /* 17px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  2rem;       /* 32px */
    --text-4xl:  2.75rem;    /* 44px */

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.5;
    --leading-relax:  1.65;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.02em;
    --tracking-wider:  0.06em;
    --tracking-widest: 0.12em;

    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --font-display:  'Space Grotesk', system-ui, sans-serif;
    --tracking-logo: -0.01em; /* Space Grotesk is tighter than Fraunces */

    /* ── SPACING (4px scale) ───────────────────────────────────── */
    --space-0:  0;
    --space-px: 1px;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Semantic spacing */
    --space-card-padding-sm:  var(--space-3);
    --space-card-padding:     var(--space-5);
    --space-card-padding-lg:  var(--space-6);
    --space-section-gap:      var(--space-12);
    --space-stack-tight:      var(--space-2);
    --space-stack:            var(--space-4);
    --space-stack-loose:      var(--space-6);
    --space-inline-tight:     var(--space-2);
    --space-inline:           var(--space-3);
    --space-inline-loose:     var(--space-4);
    --space-page-gutter:      var(--space-5);   /* mobile page padding */
    --space-page-gutter-lg:   var(--space-8);   /* desktop page padding */

    /* ── RADII ─────────────────────────────────────────────────── */
    --radius-xs:   4px;   /* badges, pills pequeñas */
    --radius-sm:   6px;   /* botones inline, chips */
    --radius-md:   8px;   /* botones, inputs */
    --radius-lg:   12px;  /* cards estándar */
    --radius-xl:   16px;  /* cards grandes, hero blocks */
    --radius-full: 9999px; /* avatars, pills */

    /* ── SHADOWS (dark mode — deeper, more dramatic) ──────────── */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.16);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.20);
    --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.28);
    --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.36);
    --shadow-glow-accent: 0 0 0 3px rgba(196, 65, 6, 0.15);
    --shadow-glow-danger: 0 0 0 3px rgba(239, 68, 68, 0.15);

    /* Semantic shadow levels (3-tier: rest, hover, modal) */
    --shadow-card-rest:  0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-modal:      0 12px 32px rgba(0, 0, 0, 0.50);

    /* ── MOTION ────────────────────────────────────────────────── */
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);     /* standard decelerate */
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);    /* symmetric */
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot bounce */
    --ease-standard: var(--ease-out);                    /* alias — default for UI */

    --dur-instant: 80ms;
    --dur-fast:    150ms;  /* was 160 — tighter */
    --dur-base:    250ms;  /* was 240 — rounder */
    --dur-slow:    400ms;  /* springs, page transitions */

    /* ── Z-INDEX ───────────────────────────────────────────────── */
    --z-base:     0;
    --z-dropdown: 1000;
    --z-sticky:   1020;
    --z-overlay:  1040;
    --z-modal:    1050;
    --z-popover:  1060;
    --z-toast:    1080;
    --z-tooltip:  1090;

    /* ── LAYOUT ────────────────────────────────────────────────── */
    --topbar-height:    64px;
    --bottomnav-height: 56px;
    --sidebar-width:    260px;
    --sidebar-collapsed:72px;
    --content-max-width:1200px;

    /* ── COMPONENT: BUTTON ────────────────────────────────────── */
    --btn-height-sm:     32px;
    --btn-height-md:     40px;
    --btn-height-lg:     48px;

    --btn-padding-x-sm:  var(--space-3);   /* 12px */
    --btn-padding-x-md:  var(--space-4);   /* 16px */
    --btn-padding-x-lg:  var(--space-5);   /* 20px */

    --btn-text-sm:       var(--text-sm);   /* 13px */
    --btn-text-md:       var(--text-base); /* 14px */
    --btn-text-lg:       var(--text-md);   /* 15px */

    --btn-radius:        var(--radius-md); /* 10px */
    --btn-icon-gap:      var(--space-2);   /* 8px */

    --btn-transition:    background var(--dur-fast) var(--ease-out),
                         border-color var(--dur-fast) var(--ease-out),
                         transform var(--dur-instant) var(--ease-out),
                         box-shadow var(--dur-fast) var(--ease-out);

    /* ── COMPONENT: INPUT ─────────────────────────────────────── */
    --input-height-sm:     32px;
    --input-height-md:     40px;
    --input-height-lg:     48px;

    --input-padding-x-sm:  var(--space-3);   /* 12px */
    --input-padding-x-md:  var(--space-3);   /* 12px */
    --input-padding-x-lg:  var(--space-4);   /* 16px */

    --input-text-sm:       var(--text-sm);   /* 13px */
    --input-text-md:       var(--text-base); /* 14px */
    --input-text-lg:       var(--text-md);   /* 15px */

    --input-radius:        var(--radius-md); /* 10px */
    --input-icon-padding:  36px;             /* padding-left/right when icon present */

    --input-transition:    border-color var(--dur-fast) var(--ease-out),
                           background var(--dur-fast) var(--ease-out),
                           box-shadow var(--dur-fast) var(--ease-out);

    /* ── COMPONENT: CARD ──────────────────────────────────────── */
    --card-padding-sm:     var(--space-4);   /* 16px */
    --card-padding-md:     var(--space-6);   /* 24px */
    --card-padding-lg:     var(--space-8);   /* 32px */
    --card-radius:         var(--radius-lg); /* 12px */
    --card-bg:             var(--bg-surface);
    --card-border:         var(--border-subtle);
    --card-border-hover:   var(--border-default);
    --card-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.2);

    --card-transition:     border-color var(--dur-fast) var(--ease-out),
                           transform var(--dur-base) var(--ease-out),
                           box-shadow var(--dur-base) var(--ease-out);

    /* ── COMPONENT: AVATAR ────────────────────────────────────── */
    --avatar-size-xs:      24px;
    --avatar-size-sm:      32px;
    --avatar-size-md:      40px;
    --avatar-size-lg:      48px;
    --avatar-size-xl:      64px;
    --avatar-size-2xl:     96px;

    --avatar-radius:       50%;
    --avatar-radius-square: var(--radius-md);

    --avatar-border:       2px solid var(--bg-canvas);
    --avatar-bg-fallback:  var(--bg-surface);

    --avatar-status-size-sm: 8px;
    --avatar-status-size-md: 10px;
    --avatar-status-size-lg: 12px;

    --avatar-status-online:  var(--success);
    --avatar-status-away:    #FBB03B;
    --avatar-status-busy:    var(--danger);
    --avatar-status-offline: var(--text-tertiary);

    --avatar-overlap:      -8px;

    /* ── COMPONENT: BADGE ─────────────────────────────────────── */
    --badge-height-sm:     18px;
    --badge-height-md:     22px;
    --badge-height-lg:     26px;
    --badge-padding-x-sm:  6px;
    --badge-padding-x-md:  8px;
    --badge-padding-x-lg:  10px;
    --badge-text-sm:       11px;
    --badge-text-md:       12px;
    --badge-text-lg:       13px;
    --badge-radius:        var(--radius-sm);
    --badge-radius-pill:   999px;

    /* ── COMPONENT: DROPDOWN ──────────────────────────────────── */
    --dropdown-bg:             var(--bg-surface-raised);
    --dropdown-border:         var(--border-subtle);
    --dropdown-radius:         var(--radius-md);
    --dropdown-shadow:         0 8px 24px rgba(0, 0, 0, 0.4);
    --dropdown-min-width:      200px;
    --dropdown-item-height:    36px;
    --dropdown-item-padding-x: var(--space-3);
    --dropdown-divider-color:  var(--border-subtle);

    /* ── COMPONENT: MODAL ─────────────────────────────────────── */
    --modal-overlay-bg:    rgba(7, 7, 11, 0.7);
    --modal-overlay-blur:  8px;
    --modal-bg:            var(--bg-surface);
    --modal-radius:        var(--radius-lg);
    --modal-shadow:        0 24px 60px -12px rgba(0, 0, 0, 0.6);
    --modal-max-width-sm:  400px;
    --modal-max-width-md:  560px;
    --modal-max-width-lg:  720px;
    --modal-max-width-xl:  960px;
    --modal-padding:       var(--space-6);

    /* ── COMPONENT: TOAST ─────────────────────────────────────── */
    --toast-bg:            var(--bg-surface-raised);
    --toast-border:        var(--border-default);
    --toast-radius:        var(--radius-md);
    --toast-shadow:        0 10px 30px rgba(0, 0, 0, 0.4);
    --toast-padding:       var(--space-4);
    --toast-gap:           var(--space-3);
    --toast-min-width:     320px;
    --toast-max-width:     420px;
}

/* ================================================================
   THEME: LIGHT MODE
   Overrides theme-dependent tokens when [data-theme="light"] is set.
   Non-theme tokens (typography, spacing, radii, motion, z-index,
   layout, component sizing) stay in :root and are shared.
   ================================================================ */

:root[data-theme="light"] {
    /* ── SURFACES ── */
    --bg-canvas:         #F8F9FA;
    --bg-surface:        #FFFFFF;
    --bg-surface-raised: #FFFFFF;
    --bg-surface-sunken: #F1F3F5;
    --bg-overlay:        rgba(0, 0, 0, 0.4);
    --bg-hover:          rgba(0, 0, 0, 0.04);
    --bg-active:         rgba(0, 0, 0, 0.06);

    /* ── TEXT ── */
    --text-primary:      #111827;
    --text-secondary:    #4B5563;
    --text-tertiary:     #9CA3AF;
    --text-placeholder:  #D1D5DB;
    --text-disabled:     #E5E7EB;
    --text-inverse:      #FFFFFF;

    /* ── BORDERS ── */
    --border-subtle:     rgba(0, 0, 0, 0.06);
    --border-default:    rgba(0, 0, 0, 0.10);
    --border-strong:     rgba(0, 0, 0, 0.16);
    --border-focus:      rgba(196, 65, 6, 0.4);

    /* ── ACCENT (light adjustments) ── */
    --accent-muted:         rgba(196, 65, 6, 0.08);
    --accent-muted-hover:   rgba(196, 65, 6, 0.12);
    --accent-subtle:        rgba(196, 65, 6, 0.04);

    /* ── PRIMARY SOFT (light mode) ── */
    --color-primary-soft:   #FFF1EA;

    /* ── STATES ── */
    --success:           #16A34A;
    --success-hover:     #15803D;
    --success-active:    #166534;
    --success-fg:        #FFFFFF;
    --success-muted:     rgba(22, 163, 74, 0.08);
    --success-border:    rgba(22, 163, 74, 0.20);

    --warning:           #D97706;
    --warning-fg:        #FFFFFF;
    --warning-muted:     rgba(217, 119, 6, 0.08);
    --warning-border:    rgba(217, 119, 6, 0.20);

    --danger:            #DC2626;
    --danger-hover:      #B91C1C;
    --danger-active:     #991B1B;
    --danger-fg:         #FFFFFF;
    --danger-muted:      rgba(220, 38, 38, 0.08);
    --danger-border:     rgba(220, 38, 38, 0.20);

    --info:              #2563EB;
    --info-fg:           #FFFFFF;
    --info-muted:        rgba(37, 99, 235, 0.08);
    --info-border:       rgba(37, 99, 235, 0.20);

    /* ── SHADOWS (lighter for light mode) ── */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.10);
    --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.14);
    --shadow-glow-accent: 0 0 0 3px rgba(196, 65, 6, 0.12);
    --shadow-glow-danger: 0 0 0 3px rgba(220, 38, 38, 0.12);

    /* Semantic shadow levels (lighter for light mode) */
    --shadow-card-rest:  0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-modal:      0 12px 32px rgba(0, 0, 0, 0.12);

    /* ── SURFACE OVERLAYS (light) ── */
    --bg-topbar-blur:   rgba(248, 249, 250, 0.88);
    --bg-topbar-mobile: rgba(248, 249, 250, 0.95);
    --bg-bottomnav:     rgba(255, 255, 255, 0.92);
    --bg-slide-menu:    rgba(255, 255, 255, 0.98);

    /* ── COMPONENT OVERRIDES ── */
    --card-bg:             var(--bg-surface);
    --card-border:         var(--border-subtle);
    --card-border-hover:   var(--border-default);
    --card-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.06);

    --dropdown-bg:         var(--bg-surface);
    --dropdown-border:     var(--border-default);
    --dropdown-shadow:     0 8px 24px rgba(0, 0, 0, 0.12);

    --modal-overlay-bg:    rgba(0, 0, 0, 0.4);
    --modal-bg:            var(--bg-surface);
    --modal-shadow:        0 24px 60px -12px rgba(0, 0, 0, 0.16);

    --toast-bg:            var(--bg-surface);
    --toast-border:        var(--border-default);
    --toast-shadow:        0 10px 30px rgba(0, 0, 0, 0.10);
}

/* ── AUTO MODE: resolve via OS preference ─────────────────────── */
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] {
        /* ── SURFACES ── */
        --bg-canvas:         #F8F9FA;
        --bg-surface:        #FFFFFF;
        --bg-surface-raised: #FFFFFF;
        --bg-surface-sunken: #F1F3F5;
        --bg-overlay:        rgba(0, 0, 0, 0.4);
        --bg-hover:          rgba(0, 0, 0, 0.04);
        --bg-active:         rgba(0, 0, 0, 0.06);

        /* ── TEXT ── */
        --text-primary:      #111827;
        --text-secondary:    #4B5563;
        --text-tertiary:     #9CA3AF;
        --text-placeholder:  #D1D5DB;
        --text-disabled:     #E5E7EB;
        --text-inverse:      #FFFFFF;

        /* ── BORDERS ── */
        --border-subtle:     rgba(0, 0, 0, 0.06);
        --border-default:    rgba(0, 0, 0, 0.10);
        --border-strong:     rgba(0, 0, 0, 0.16);
        --border-focus:      rgba(196, 65, 6, 0.4);

        /* ── ACCENT ── */
        --accent-muted:         rgba(196, 65, 6, 0.08);
        --accent-muted-hover:   rgba(196, 65, 6, 0.12);
        --accent-subtle:        rgba(196, 65, 6, 0.04);

        /* ── PRIMARY SOFT (auto light) ── */
        --color-primary-soft:   #FFF1EA;

        /* ── STATES ── */
        --success:           #16A34A;
        --success-hover:     #15803D;
        --success-active:    #166534;
        --success-fg:        #FFFFFF;
        --success-muted:     rgba(22, 163, 74, 0.08);
        --success-border:    rgba(22, 163, 74, 0.20);

        --warning:           #D97706;
        --warning-fg:        #FFFFFF;
        --warning-muted:     rgba(217, 119, 6, 0.08);
        --warning-border:    rgba(217, 119, 6, 0.20);

        --danger:            #DC2626;
        --danger-hover:      #B91C1C;
        --danger-active:     #991B1B;
        --danger-fg:         #FFFFFF;
        --danger-muted:      rgba(220, 38, 38, 0.08);
        --danger-border:     rgba(220, 38, 38, 0.20);

        --info:              #2563EB;
        --info-fg:           #FFFFFF;
        --info-muted:        rgba(37, 99, 235, 0.08);
        --info-border:       rgba(37, 99, 235, 0.20);

        /* ── SHADOWS ── */
        --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
        --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.06);
        --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
        --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.10);
        --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.14);
        --shadow-glow-accent: 0 0 0 3px rgba(196, 65, 6, 0.12);
        --shadow-glow-danger: 0 0 0 3px rgba(220, 38, 38, 0.12);

        /* Semantic shadow levels */
        --shadow-card-rest:  0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
        --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06);
        --shadow-modal:      0 12px 32px rgba(0, 0, 0, 0.12);

        /* ── SURFACE OVERLAYS ── */
        --bg-topbar-blur:   rgba(248, 249, 250, 0.88);
        --bg-topbar-mobile: rgba(248, 249, 250, 0.95);
        --bg-bottomnav:     rgba(255, 255, 255, 0.92);
        --bg-slide-menu:    rgba(255, 255, 255, 0.98);

        /* ── COMPONENT OVERRIDES ── */
        --card-bg:             var(--bg-surface);
        --card-border:         var(--border-subtle);
        --card-border-hover:   var(--border-default);
        --card-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.06);

        --dropdown-bg:         var(--bg-surface);
        --dropdown-border:     var(--border-default);
        --dropdown-shadow:     0 8px 24px rgba(0, 0, 0, 0.12);

        --modal-overlay-bg:    rgba(0, 0, 0, 0.4);
        --modal-bg:            var(--bg-surface);
        --modal-shadow:        0 24px 60px -12px rgba(0, 0, 0, 0.16);

        --toast-bg:            var(--bg-surface);
        --toast-border:        var(--border-default);
        --toast-shadow:        0 10px 30px rgba(0, 0, 0, 0.10);
    }
}

/* ── REDUCED MOTION ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-instant: 0ms;
        --dur-fast:    0ms;
        --dur-base:    0ms;
        --dur-slow:    0ms;
    }
}