/* ==========================================================================
   ISKCON DNIPRO — DESIGN TOKENS (single source of truth)
   --------------------------------------------------------------------------
   Two layers:
     1. Palette (--palette-*) — raw brand colors, never change across themes.
     2. Semantic roles (--color-*, --shadow-*, --radius-*, --t-*) — what every
        component references. Themes redefine ONLY these.

   Four themes, each anchored on the Krishna ↔ Radharani duality:
     default       "Світанок"  — Radha gold on cream parchment (warm light)
     [data-theme="pearl"]  "Перлина"  — storm-cloud ink on cool pearl (cool light)
     [data-theme="dark"]   "Ніч"      — warm tamāla dark + lamp-gold     (warm dark)
     [data-theme="storm"]  "Гроза"    — Krishna's monsoon body + lightning gold (cool dark)

   Loaded FIRST in base.html, before base.css and components.css.
   ========================================================================== */


/* ==========================================================================
   LAYER 1 — Palette (raw brand colors)
   ========================================================================== */

:root {
    /* Parchment / cream family */
    --palette-cream:          #FDF8EE;
    --palette-cream-deep:     #F5E8C7;
    --palette-ivory:          #FBF3E0;
    --palette-paper:          #FFFCF3;  /* card / elevated surface */
    --palette-off-white:      #FFFBF0;  /* text-on-accent */

    /* Gold / marigold */
    --palette-gold:           #D4A03A;
    --palette-gold-light:     #E8C36B;
    --palette-gold-dark:      #B8860B;
    --palette-gold-on-dark:   #E5B84A;  /* warmer variant used on dark bg */
    --palette-gold-on-dark-lt:#F0CA6B;

    /* Saffron */
    --palette-saffron:        #C87533;

    /* Maroon / kumkum */
    --palette-maroon:         #7E1F2A;
    --palette-maroon-dark:    #5A1420;
    --palette-maroon-soft:    #E89DA5;  /* for dark bg use */

    /* Tulsi (green accent) */
    --palette-tulsi:          #5B7C4E;

    /* Warm ink (text on light) */
    --palette-ink:            #2B1810;
    --palette-ink-soft:       #6B5840;
    --palette-ink-faint:      #A1896A;

    /* Hairlines */
    --palette-line:           #E8D9B8;

    /* Warm dark backgrounds (nav / hero / footer / dark-theme surfaces) */
    --palette-dark-950:       #0A0807;
    --palette-dark-900:       #14100B;
    --palette-dark-850:       #1A1510;
    --palette-dark-800:       #1B1510;
    --palette-dark-750:       #201E1B;
    --palette-dark-700:       #2B1F16;
    --palette-dark-650:       #3A2B1F;

    /* Cream shades for text on warm dark */
    --palette-cream-on-dark:     #F5ECD7;
    --palette-cream-on-dark-lt:  #FAF1DC;
    --palette-cream-on-dark-soft:#FAEFCB;

    /* Krishna — fresh monsoon storm cloud (śyāma / tamāla).
       Cool blue-gray with a violet hint. Used as primary surface in storm-dark
       and as primary text-ink in pearl-light. */
    --palette-storm-50:       #E8EBF0;  /* moonlight on cloud */
    --palette-storm-100:      #C7CCD6;
    --palette-storm-300:      #6E7689;
    --palette-storm-500:      #3A4254;  /* mid storm */
    --palette-storm-700:      #1F2733;  /* deep storm — pearl text-ink */
    --palette-storm-800:      #161D28;  /* storm-dark surface raised */
    --palette-storm-900:      #0F141C;  /* storm-dark page bg */
    --palette-storm-950:      #090D14;  /* storm-dark soft / sunken */

    /* Pearl — cool alabaster, banks of the Yamuna at noon */
    --palette-pearl:          #F2F0EA;
    --palette-pearl-soft:     #ECEAE2;
    --palette-pearl-paper:    #FAF9F4;
    --palette-pearl-raised:   #FFFFFF;
    --palette-pearl-sunken:   #E2DFD3;

    /* Burnished gold — slightly cooler tapta-kāñchana for cool-tinted themes */
    --palette-gold-burnished:    #C49530;
    --palette-gold-burnished-dk: #9C7522;
    --palette-gold-burnished-lt: #DCB35A;

    /* Lightning gold — bright luminous gold for storm-dark accents */
    --palette-gold-lightning:    #ECC462;
    --palette-gold-lightning-lt: #F5D78F;
}


/* ==========================================================================
   LAYER 2 — Semantic roles (LIGHT THEME — default)
   Every component uses these, not palette directly.
   ========================================================================== */

:root {
    /* --- Surfaces (page / section / card) --- */
    --color-bg:               var(--palette-cream);        /* page body */
    --color-bg-soft:          var(--palette-cream);        /* softer page bg */
    --color-surface:          var(--palette-paper);        /* card, panel */
    --color-surface-raised:   var(--palette-paper);        /* elevated card */
    --color-surface-sunken:   var(--palette-cream-deep);   /* alternating section */

    /* --- Text --- */
    --color-text:             var(--palette-ink);          /* body */
    --color-text-strong:      var(--palette-ink);          /* headings */
    --color-text-muted:       var(--palette-ink-soft);     /* meta, subtitle */
    --color-text-faint:       var(--palette-ink-faint);    /* labels, captions */

    /* --- Borders --- */
    --color-border:           var(--palette-line);         /* hairline */
    --color-border-strong:    var(--palette-ink);          /* emphasis edge */
    --color-border-soft:      rgba(184, 134, 11, 0.18);    /* translucent gold */

    /* --- Accent (gold) --- */
    --color-accent:           var(--palette-gold);
    --color-accent-strong:    var(--palette-gold-dark);
    --color-accent-light:     var(--palette-gold-light);
    --color-accent-soft:      rgba(184, 134, 11, 0.09);
    --color-accent-ghost:     rgba(212, 160, 58, 0.04);
    --color-on-accent:        var(--palette-off-white);    /* text on solid accent */

    /* --- Brand red (maroon) --- */
    --color-brand:            var(--palette-maroon);
    --color-brand-dark:       var(--palette-maroon-dark);
    --color-brand-soft:       rgba(126, 31, 42, 0.08);

    /* --- States --- */
    --color-success:          var(--palette-tulsi);
    --color-danger:           var(--palette-maroon);

    /* --- Inverse (always-dark zones: nav, page-hero, footer, player) --- */
    --color-inverse-bg:          var(--palette-dark-900);
    --color-inverse-bg-soft:     var(--palette-dark-850);
    --color-inverse-surface:     var(--palette-dark-800);
    --color-inverse-surface-raised: var(--palette-dark-700);
    --color-inverse-border:      rgba(212, 160, 58, 0.15);
    --color-inverse-border-soft: rgba(212, 160, 58, 0.08);
    --color-inverse-text:        var(--palette-cream-on-dark-lt);
    --color-inverse-text-muted:  rgba(245, 236, 215, 0.72);
    --color-inverse-text-faint:  rgba(245, 236, 215, 0.48);
    --color-inverse-accent:      var(--palette-gold-on-dark);
    --color-inverse-accent-light:var(--palette-gold-on-dark-lt);

    /* --- Nav / dropdown / mobile menu (always warm dark, both themes) --- */
    --color-nav-bg:             rgba(20, 18, 16, 0.95);
    --color-nav-bg-scrolled:    rgba(20, 18, 16, 0.98);
    --color-nav-border:          rgba(212, 160, 58, 0.12);
    --color-dropdown-bg:        #14100B;
    --color-dropdown-hover-bg:  rgba(212, 160, 58, 0.12);
    --color-mobile-menu-bg:     rgba(20, 18, 16, 0.98);
    --color-mobile-menu-hover:  rgba(212, 160, 58, 0.1);

    /* --- Section bloom highlights (subtle light-wash for alternating sections) --- */
    --bloom-top:              rgba(255, 255, 255, 0.6);
    --bloom-corner:           rgba(255, 255, 255, 0.4);

    /* --- Paper-texture overlay (warm paper grain rendered via SVG) --- */
    --texture-paper-opacity:   0.26;
    --texture-paper-blend:     multiply;
    --texture-paper-size:      260px 260px;
    --texture-paper-svg:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.11  0 0 0 0 0.06  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

    /* --- Text emboss (debossed letterpress — text pressed INTO the surface) ---
       Direction: highlight on BOTTOM edge (light hits the indent's lower lip),
       very faint shadow on TOP edge. No drop shadow — keeps it refined.    */
    --text-emboss:             0 1px 0 rgba(255, 252, 243, 0.65);
    --text-emboss-strong:      0 1px 0 rgba(255, 252, 243, 0.75), 0 -1px 0 rgba(43, 24, 16, 0.08);
    /* Hero-scale — same idea, slightly more offset for huge type */
    --text-emboss-hero:        0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(43, 24, 16, 0.15);

    /* --- Focus ring --- */
    --color-focus-ring:       rgba(212, 160, 58, 0.18);

    /* --- Selection --- */
    --color-selection-bg:     rgba(212, 160, 58, 0.3);
    --color-selection-fg:     var(--palette-ink);

    /* --- Shadows --- */
    --shadow-xs:              0 1px 2px rgba(43, 24, 16, 0.06);
    --shadow-sm:              0 2px 8px rgba(43, 24, 16, 0.08);
    --shadow-md:              0 4px 16px rgba(43, 24, 16, 0.10);
    --shadow-lg:              0 8px 32px rgba(43, 24, 16, 0.12);
    --shadow-xl:              0 20px 60px rgba(43, 24, 16, 0.16);
    --shadow-soft:            0 8px 24px rgba(75, 45, 15, 0.06);
    --shadow-lift:            0 18px 50px rgba(75, 45, 15, 0.12);
    --shadow-card:            0 4px 20px rgba(43, 24, 16, 0.08);
    --shadow-card-hover:      0 12px 40px rgba(43, 24, 16, 0.14);
    --shadow-accent-glow:     0 0 60px rgba(212, 160, 58, 0.25);
    --shadow-accent-btn:      0 8px 22px rgba(184, 134, 11, 0.28);

    /* --- Radii --- */
    --radius-xs:              2px;
    --radius-sm:              4px;
    --radius-md:              6px;
    --radius-lg:              8px;
    --radius-xl:              12px;
    --radius-2xl:             16px;
    --radius-pill:            9999px;

    /* --- Transitions --- */
    --t-fast:                 0.15s ease;
    --t-base:                 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow:                 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --t-bounce:               0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Layout --- */
    --content-max:            1200px;
    --content-padding-x:      24px;
}


/* ==========================================================================
   DARK THEME — redefine ONLY semantic roles
   Palette (layer 1) stays identical; only the mapping changes.
   ========================================================================== */

[data-theme="dark"] {
    /* Surfaces — warm dark, not pitch black. Preserves the "inside a temple at
       night" vibe. Raise bg by one palette step vs a conventional dark theme. */
    --color-bg:               var(--palette-dark-850);  /* #1A1510 */
    --color-bg-soft:          var(--palette-dark-900);  /* #14100B */
    --color-surface:          var(--palette-dark-700);  /* #2B1F16 */
    --color-surface-raised:   var(--palette-dark-650);  /* #3A2B1F */
    --color-surface-sunken:   var(--palette-dark-800);  /* #1B1510 */

    /* Text */
    --color-text:             var(--palette-cream-on-dark);
    --color-text-strong:      var(--palette-cream-on-dark-lt);
    --color-text-muted:       rgba(245, 236, 215, 0.72);
    --color-text-faint:       rgba(245, 236, 215, 0.5);

    /* Borders */
    --color-border:           rgba(212, 160, 58, 0.2);
    --color-border-strong:    var(--palette-gold-on-dark-lt);
    --color-border-soft:      rgba(212, 160, 58, 0.12);

    /* Accent — warmer on dark bg */
    --color-accent:           var(--palette-gold-on-dark);
    --color-accent-strong:    var(--palette-gold);
    --color-accent-light:     var(--palette-gold-on-dark-lt);
    --color-accent-soft:      rgba(229, 184, 74, 0.1);
    --color-accent-ghost:     rgba(229, 184, 74, 0.06);
    --color-on-accent:        var(--palette-dark-900);

    /* Brand red — soft rose on dark bg */
    --color-brand:            var(--palette-maroon-soft);
    --color-brand-dark:       var(--palette-maroon);
    --color-brand-soft:       rgba(232, 157, 165, 0.08);

    /* States */
    --color-success:          #7A9B6A;
    --color-danger:           var(--palette-maroon-soft);

    /* Inverse zones stay mostly the same (they were already dark), but
       we slightly warm them up and raise contrast vs. page bg. */
    --color-inverse-bg:          #1A1816;
    --color-inverse-bg-soft:     #1F1D1B;
    --color-inverse-surface:     var(--palette-dark-700);
    --color-inverse-surface-raised: var(--palette-dark-650);
    --color-inverse-border:      rgba(229, 184, 74, 0.15);
    --color-inverse-border-soft: rgba(229, 184, 74, 0.08);
    /* inverse-text-* and inverse-accent-* stay identical (already tuned) */

    /* Nav stays warm-dark but subtly warmer on dark-theme page bg */
    --color-nav-bg:             rgba(26, 22, 18, 0.95);
    --color-nav-bg-scrolled:    rgba(26, 22, 18, 0.98);

    /* Section bloom — warm gold wash instead of white on dark bg */
    --bloom-top:              rgba(229, 184, 74, 0.10);
    --bloom-corner:           rgba(229, 184, 74, 0.08);

    /* Paper texture — lighter screen-blend on dark bg */
    --texture-paper-opacity:   0.16;
    --texture-paper-blend:     screen;
    --texture-paper-size:      260px 260px;
    --texture-paper-svg:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.82  0 0 0 0 0.65  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

    /* Debossed letterpress for warm-dark surface.
       Bottom: faint cream highlight (lamp catches the indent's lower edge).
       Top: deeper inner shadow.                                             */
    --text-emboss:             0 1px 0 rgba(245, 236, 215, 0.08), 0 -1px 0 rgba(0, 0, 0, 0.4);
    --text-emboss-strong:      0 1px 0 rgba(245, 236, 215, 0.10), 0 -1px 0 rgba(0, 0, 0, 0.5);
    --text-emboss-hero:        0 1px 0 rgba(245, 236, 215, 0.12), 0 -1px 0 rgba(0, 0, 0, 0.5);

    /* Focus / selection */
    --color-focus-ring:       rgba(229, 184, 74, 0.22);
    --color-selection-bg:     rgba(229, 184, 74, 0.35);
    --color-selection-fg:     var(--palette-cream-on-dark-lt);

    /* Shadows — deeper on dark bg */
    --shadow-xs:              0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm:              0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md:              0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg:              0 8px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl:              0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-soft:            0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lift:            0 18px 50px rgba(0, 0, 0, 0.5);
    --shadow-card:            0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-card-hover:      0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-accent-glow:     0 0 60px rgba(229, 184, 74, 0.2);
    --shadow-accent-btn:      0 8px 22px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   PEARL — second LIGHT theme. "Перлина Ямуни."
   Cool alabaster surface; storm-cloud blue-gray serves as the text-ink
   (Krishna's body color literally being the script). Burnished gold accent
   is slightly cooler than the marigold of the default theme to harmonize
   with the cooler base.
   ========================================================================== */

[data-theme="pearl"] {
    /* Surfaces — pearl alabaster with a faint cool cast */
    --color-bg:               var(--palette-pearl);          /* #F2F0EA */
    --color-bg-soft:          var(--palette-pearl-soft);     /* #ECEAE2 */
    --color-surface:          var(--palette-pearl-paper);    /* #FAF9F4 */
    --color-surface-raised:   var(--palette-pearl-raised);   /* #FFFFFF */
    --color-surface-sunken:   var(--palette-pearl-sunken);   /* #E2DFD3 */

    /* Text — Krishna's storm-cloud as ink */
    --color-text:             var(--palette-storm-700);      /* #1F2733 */
    --color-text-strong:      #131923;
    --color-text-muted:       #4D5666;
    --color-text-faint:       #7B8392;

    /* Borders — slate hairlines, not golden */
    --color-border:           #D9D6CB;
    --color-border-strong:    var(--palette-storm-700);
    --color-border-soft:      rgba(31, 39, 51, 0.12);

    /* Accent — burnished tapta-kāñchana (cooler-leaning gold) */
    --color-accent:           var(--palette-gold-burnished);     /* #C49530 */
    --color-accent-strong:    var(--palette-gold-burnished-dk);  /* #9C7522 */
    --color-accent-light:     var(--palette-gold-burnished-lt);  /* #DCB35A */
    --color-accent-soft:      rgba(196, 149, 48, 0.10);
    --color-accent-ghost:     rgba(196, 149, 48, 0.04);
    --color-on-accent:        #FFFCF3;

    /* Brand — deep Krishna-violet maroon (kumkum with indigo undertone) */
    --color-brand:            #5A2A55;
    --color-brand-dark:       #3A1B3A;
    --color-brand-soft:       rgba(90, 42, 85, 0.08);

    --color-success:          #4F7A52;
    --color-danger:           #9A2A35;
    --color-focus-ring:       rgba(196, 149, 48, 0.24);

    --color-selection-bg:     rgba(196, 149, 48, 0.28);
    --color-selection-fg:     #131923;

    /* Section bloom — cool sky-pearl wash */
    --bloom-top:              rgba(255, 255, 255, 0.65);
    --bloom-corner:           rgba(220, 230, 240, 0.45);

    /* Paper texture — cooler tint, lighter density */
    --texture-paper-opacity:   0.18;
    --texture-paper-blend:     multiply;
    --texture-paper-svg:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.16  0 0 0 0 0.22  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

    /* Debossed letterpress on cool pearl */
    --text-emboss:             0 1px 0 rgba(255, 255, 255, 0.6);
    --text-emboss-strong:      0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(31, 39, 51, 0.08);
    --text-emboss-hero:        0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(31, 39, 51, 0.15);

    /* Shadows — cool slate */
    --shadow-xs:              0 1px 2px rgba(20, 28, 40, 0.05);
    --shadow-sm:              0 2px 8px rgba(20, 28, 40, 0.06);
    --shadow-md:              0 4px 16px rgba(20, 28, 40, 0.08);
    --shadow-lg:              0 8px 32px rgba(20, 28, 40, 0.10);
    --shadow-xl:              0 20px 60px rgba(20, 28, 40, 0.14);
    --shadow-soft:            0 8px 24px rgba(20, 28, 40, 0.07);
    --shadow-lift:            0 18px 50px rgba(20, 28, 40, 0.12);
    --shadow-card:            0 4px 20px rgba(20, 28, 40, 0.08);
    --shadow-card-hover:      0 12px 40px rgba(20, 28, 40, 0.13);
    --shadow-accent-glow:     0 0 60px rgba(196, 149, 48, 0.22);
    --shadow-accent-btn:      0 8px 22px rgba(156, 117, 34, 0.24);
}


/* ==========================================================================
   STORM — second DARK theme. "Грозова хмара Крішни."
   Krishna's body color literally as the page surface: deep monsoon-cloud
   blue-gray. Lightning-gold accent. The single most direct expression of
   the Krishna ↔ Radha duality: Śyāma surface, tapta-kāñchana flash.
   ========================================================================== */

[data-theme="storm"] {
    /* Surfaces — deep śyāma monsoon cloud */
    --color-bg:               var(--palette-storm-900);      /* #0F141C */
    --color-bg-soft:          var(--palette-storm-950);      /* #090D14 */
    --color-surface:          var(--palette-storm-800);      /* #161D28 */
    --color-surface-raised:   #1E2733;
    --color-surface-sunken:   var(--palette-storm-950);

    /* Text — moon-cream silver (cool to harmonize with cool surface) */
    --color-text:             #DCDFE6;
    --color-text-strong:      #F0F2F6;
    --color-text-muted:       rgba(220, 223, 230, 0.74);
    --color-text-faint:       rgba(220, 223, 230, 0.5);

    /* Borders — cool slate hairlines with a gold-tinged emphasis */
    --color-border:           rgba(180, 200, 220, 0.14);
    --color-border-strong:    var(--palette-gold-lightning-lt);
    --color-border-soft:      rgba(180, 200, 220, 0.08);

    /* Accent — luminous lightning gold */
    --color-accent:           var(--palette-gold-lightning);     /* #ECC462 */
    --color-accent-strong:    var(--palette-gold);
    --color-accent-light:     var(--palette-gold-lightning-lt);  /* #F5D78F */
    --color-accent-soft:      rgba(236, 196, 98, 0.10);
    --color-accent-ghost:     rgba(236, 196, 98, 0.05);
    --color-on-accent:        var(--palette-storm-900);

    /* Brand — soft Vrindavan-rose, distant glow */
    --color-brand:            var(--palette-maroon-soft);
    --color-brand-dark:       var(--palette-maroon);
    --color-brand-soft:       rgba(232, 157, 165, 0.08);

    --color-success:          #7AB58A;
    --color-danger:           #F0A8AE;

    /* Inverse zones — even deeper storm so they read as "more dark" than page */
    --color-inverse-bg:          #0B1015;
    --color-inverse-bg-soft:     var(--palette-storm-950);
    --color-inverse-surface:     var(--palette-storm-800);
    --color-inverse-surface-raised: #1E2733;
    --color-inverse-border:      rgba(236, 196, 98, 0.15);
    --color-inverse-border-soft: rgba(236, 196, 98, 0.08);
    --color-inverse-text:        #F0F2F6;
    --color-inverse-text-muted:  rgba(240, 242, 246, 0.72);
    --color-inverse-text-faint:  rgba(240, 242, 246, 0.48);
    --color-inverse-accent:      var(--palette-gold-lightning);
    --color-inverse-accent-light:var(--palette-gold-lightning-lt);

    /* Nav — cool storm-blue dark */
    --color-nav-bg:             rgba(11, 16, 21, 0.95);
    --color-nav-bg-scrolled:    rgba(11, 16, 21, 0.98);
    --color-nav-border:         rgba(236, 196, 98, 0.12);
    --color-dropdown-bg:        var(--palette-storm-950);
    --color-dropdown-hover-bg:  rgba(236, 196, 98, 0.12);
    --color-mobile-menu-bg:     rgba(11, 16, 21, 0.98);
    --color-mobile-menu-hover:  rgba(236, 196, 98, 0.10);

    /* Bloom — soft lightning glow + cool moonlight corner */
    --bloom-top:              rgba(236, 196, 98, 0.10);
    --bloom-corner:           rgba(180, 200, 230, 0.08);

    /* Texture — cool screen-blend for storm */
    --texture-paper-opacity:   0.12;
    --texture-paper-blend:     screen;
    --texture-paper-size:      260px 260px;
    --texture-paper-svg:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.88  0 0 0 0 0.95  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

    /* Debossed letterpress in storm cloud — moonlight along the indent edge */
    --text-emboss:             0 1px 0 rgba(240, 242, 246, 0.08), 0 -1px 0 rgba(0, 0, 0, 0.45);
    --text-emboss-strong:      0 1px 0 rgba(240, 242, 246, 0.10), 0 -1px 0 rgba(0, 0, 0, 0.55);
    --text-emboss-hero:        0 1px 0 rgba(240, 242, 246, 0.14), 0 -1px 0 rgba(0, 0, 0, 0.55);

    --color-focus-ring:       rgba(236, 196, 98, 0.24);
    --color-selection-bg:     rgba(236, 196, 98, 0.32);
    --color-selection-fg:     #F0F2F6;

    /* Shadows — deep storm */
    --shadow-xs:              0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-sm:              0 2px 8px rgba(0, 0, 0, 0.55);
    --shadow-md:              0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-lg:              0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl:              0 20px 60px rgba(0, 0, 0, 0.65);
    --shadow-soft:            0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lift:            0 18px 50px rgba(0, 0, 0, 0.55);
    --shadow-card:            0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-card-hover:      0 12px 40px rgba(0, 0, 0, 0.55);
    --shadow-accent-glow:     0 0 60px rgba(236, 196, 98, 0.22);
    --shadow-accent-btn:      0 8px 22px rgba(0, 0, 0, 0.45);
}


/* ==========================================================================
   LEGACY ALIASES — so existing --h-* / --primary / --gray-* / --white / --dark
   continue to work without touching component rules.
   All migrations replace these with --color-* tokens directly.
   ========================================================================== */

:root {
    /* --- vedic.css legacy (--h-*) --- */
    --h-cream:          var(--palette-cream);
    --h-cream-deep:     var(--palette-cream-deep);
    --h-ivory:          var(--palette-ivory);
    --h-marigold:       var(--palette-gold);
    --h-marigold-lt:    var(--palette-gold-light);
    --h-marigold-dk:    var(--palette-gold-dark);
    --h-saffron:        var(--palette-saffron);
    --h-maroon:         var(--palette-maroon);
    --h-maroon-dk:      var(--palette-maroon-dark);
    --h-tulsi:          var(--palette-tulsi);
    --h-ink:            var(--palette-ink);
    --h-ink-soft:       var(--palette-ink-soft);
    --h-ink-faint:      var(--palette-ink-faint);
    --h-line:           var(--palette-line);
    --h-line-soft:      var(--color-border-soft);
    --h-shadow-soft:    var(--shadow-soft);
    --h-shadow-lift:    var(--shadow-lift);
    --h-shadow-card:    0 24px 60px rgba(43, 24, 16, 0.1);  /* framed-photo dramatic drop */

    /* --- base.css legacy --- */
    --primary:          var(--color-accent);
    --primary-light:    var(--color-accent-light);
    --primary-dark:     var(--color-accent-strong);
    --primary-gradient: linear-gradient(135deg, var(--palette-gold-light) 0%, var(--palette-gold) 50%, var(--palette-gold-dark) 100%);
    --accent:           var(--color-accent);
    --accent-light:     var(--color-accent-soft);

    /* These used to flip between themes (white→dark / dark→light).
       Now they alias the semantic tokens that already flip. */
    --dark:             var(--color-text-strong);
    --dark-soft:        var(--color-text);
    --white:            var(--color-bg);
    --gray-900:         var(--color-text-strong);
    --gray-800:         var(--color-text);
    --gray-700:         var(--color-text);
    --gray-600:         var(--color-text-muted);
    --gray-500:         var(--color-text-faint);
    --gray-400:         var(--color-text-faint);
    --gray-300:         var(--color-inverse-text-muted);  /* used mostly on dark nav */
    --gray-200:         var(--color-surface-sunken);
    --gray-100:         var(--color-surface-sunken);

    --bg-warm:          var(--color-bg);
    --bg-cream:         var(--color-surface-sunken);

    /* Transitions — legacy names */
    --transition-fast:   var(--t-fast);
    --transition-base:   var(--t-base);
    --transition-slow:   var(--t-slow);
    --transition-bounce: var(--t-bounce);

    /* Shadow — legacy names */
    --shadow-glow:      var(--shadow-accent-glow);
    --radius-full:      var(--radius-pill);
}


/* ==========================================================================
   SELECTION + SCROLLBAR — token-driven, no per-theme override needed.
   ========================================================================== */

::selection {
    background: var(--color-selection-bg);
    color: var(--color-selection-fg);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-sunken);
}

::-webkit-scrollbar-thumb {
    background: var(--color-text-faint);
    border-radius: 5px;
    border: 2px solid var(--color-surface-sunken);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}