/* Generated from fe/src/theme/theme.css by sync-ds.mjs. */
/* =============================================================================
   Padho.ai — Design System  ·  Phase 1 (locked 2026-06-28)
   -----------------------------------------------------------------------------
   Tailwind v4, CSS-first. This file is the single source of truth for the
   design system. It does three things:

     1. @theme        — static design tokens (radius, fonts) → Tailwind utilities
     2. @theme inline — semantic tokens mapped to *live* CSS vars, so flipping
                        [data-theme] / [data-mode] on <html> re-themes the whole
                        app instantly, with no rebuild.
     3. theme blocks  — the 7 themes × {light,dark} that set those live vars.

   Visual reference (do not edit there, edit HERE): fe/prototypes/theme-studio.html
   Usage + token tables: ./README.md
   ============================================================================ */

/* -----------------------------------------------------------------------------
   1. STATIC TOKENS  (do not change per theme)
   --------------------------------------------------------------------------- */

/* Dark mode keys off [data-mode="dark"] (set by ThemeProvider), NOT the OS
   preference — so the theme picker fully controls light/dark everywhere. */


:root {
  /* Radius — OUR scale. The app now uses `rounded-sm` as the single control
     radius everywhere (cards / buttons / inputs / etc.), so --radius-sm is the
     one global knob; rounded-full stays for pills/circles. The md..3xl values
     below are dormant (no code references them) but kept for the token scale. */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-2xl: 16px;
  --radius-3xl: 16px;
  --radius-full: 9999px;

  /* Type — pruned to the critical set: body / display / mono / Devanagari */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Display = Inter (same family as body, heavier weight) — single-family consistency.
     (Space Grotesk was the brand-guide option but read as two clashing fonts in-app.) */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-deva: "Noto Sans Devanagari", "Inter", system-ui, sans-serif;
  /* The owner's real handwriting (scanned) — Feny's board. Regenerate via ~/Desktop/feny-hand. */
  --font-hand: "Feny Hand", "Handlee", cursive;

  /* Type scale — semantic text styles (size + line-height + weight baked in).
     Headings ALSO take `font-display`; body uses `font-sans` (the default). */
  --text-display: 2rem;       --text-display--line-height: 1.1;  --text-display--font-weight: 500; --text-display--letter-spacing: -0.02em;
  --text-h1: 1.75rem;         --text-h1--line-height: 1.15;      --text-h1--font-weight: 400;      --text-h1--letter-spacing: -0.015em;
  --text-h2: 1.5rem;          --text-h2--line-height: 1.2;       --text-h2--font-weight: 400;      --text-h2--letter-spacing: -0.01em;
  --text-h3: 1.125rem;        --text-h3--line-height: 1.3;       --text-h3--font-weight: 400;
  --text-title: 1rem;         --text-title--line-height: 1.4;    --text-title--font-weight: 400;
  --text-body: 0.9375rem;     --text-body--line-height: 1.6;     --text-body--font-weight: 400;
  --text-body-sm: 0.8125rem;  --text-body-sm--line-height: 1.5;  --text-body-sm--font-weight: 400;
  --text-label: 0.8125rem;    --text-label--line-height: 1.4;    --text-label--font-weight: 500;
  --text-caption: 0.71875rem; --text-caption--line-height: 1.4;  --text-caption--font-weight: 600; --text-caption--letter-spacing: 0.06em;

  /* Motion */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
}

/* -----------------------------------------------------------------------------
   1b. STATIC SCALES — plain design tokens (NOT Tailwind utilities).
   These document the scale and are the single source the design-system card
   generator (fe/design-system/build.mjs) copies into standalone previews. In
   the app you use Tailwind's own utilities for these (p-4, duration-150, z-50…);
   these vars exist so the standalone DS cards resolve the exact same values.
   --------------------------------------------------------------------------- */
:root {
  /* Spacing scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Motion durations (pair with --ease-standard) */
  --dur: .16s; --dur-fast: .12s; --dur-slow: .24s;

  /* Z-index layers */
  --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400;

  /* Breakpoints (reference values) */
  --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;
}

/* -----------------------------------------------------------------------------
   2. SEMANTIC TOKENS  →  live CSS vars (theme-reactive)
   `inline` makes Tailwind emit var(--x) directly so the cascade can swap them.
   --------------------------------------------------------------------------- */
:root {
  /* Surfaces & text */
  --color-bg:             var(--bg);
  --color-surface:        var(--surface);
  --color-surface-2:      var(--surface-2);
  --color-surface-3:      var(--surface-3);
  --color-border:         var(--border);
  --color-border-strong:  var(--border-strong);
  --color-text:           var(--text);
  --color-text-muted:     var(--text-muted);
  --color-text-subtle:    var(--text-subtle);

  /* Primary */
  --color-primary:          var(--primary);
  --color-primary-hover:    var(--primary-hover);
  --color-primary-soft:     var(--primary-soft);
  --color-primary-contrast: var(--primary-contrast);

  /* Status */
  --color-success:      var(--success);
  --color-success-soft: var(--success-soft);
  --color-warning:      var(--warning);
  --color-warning-soft: var(--warning-soft);
  --color-danger:       var(--danger);
  --color-danger-soft:  var(--danger-soft);
  --color-info:         var(--info);
  --color-info-soft:    var(--info-soft);

  /* Utility */
  --color-ring:    var(--ring);
  --color-overlay: var(--overlay);

  /* Data-viz: continuous chart accents (theme-tinted) */
  --color-chart-1:    var(--chart-1);
  --color-chart-2:    var(--chart-2);
  --color-chart-3:    var(--chart-3);
  --color-chart-grid: var(--chart-grid);

  /* Data-viz: categorical palette (constant across themes, light/dark only) */
  --color-cat-1: var(--cat-1);
  --color-cat-2: var(--cat-2);
  --color-cat-3: var(--cat-3);
  --color-cat-4: var(--cat-4);
  --color-cat-5: var(--cat-5);
  --color-cat-6: var(--cat-6);
  --color-cat-7: var(--cat-7);
  --color-cat-8: var(--cat-8);

  /* Knowledge-graph node types (constant across themes, light/dark only) */
  --color-node-concept:    var(--node-concept);
  --color-node-chapter:    var(--node-chapter);
  --color-node-lo:         var(--node-lo);
  --color-node-competency: var(--node-competency);
  --color-node-meta:       var(--node-meta);

  /* Elevation (varies by mode, not by theme) */
  --shadow-sm:  var(--elevation-sm);
  --shadow-md:  var(--elevation-md);
  --shadow-lg:  var(--elevation-lg);
  --shadow-xl:  var(--elevation-xl);
  --shadow-2xl: var(--elevation-xl);
}

/* -----------------------------------------------------------------------------
   3a. MODE-VARYING CONSTANTS  (same for every theme; depend only on light/dark)
   --------------------------------------------------------------------------- */
:root {
  --overlay: rgba(15, 23, 42, .45);
  --info: #0B72E7;  --info-soft: #E1EFFD;

  /* Bench glassware liquids: alpha tints over the page bg. Dark mode lifts
     the hue toward a light body and thickens the alpha so faint pink still
     reads pink (consumed via src/bench/effects/liquidTint.ts). */
  --bench-liquid-body: #FFFFFF;
  --bench-liquid-lift: 0%;
  --bench-liquid-thicken: 1;

  --cat-1: #2563EB; --cat-2: #E8551E; --cat-3: #10B981; --cat-4: #7C5CDF;
  --cat-5: #06A9D4; --cat-6: #EC4899; --cat-7: #F59E0B; --cat-8: #64748B;

  --node-concept: #2563EB; --node-chapter: #E8551E; --node-lo: #10B981;
  --node-competency: #7C5CDF; --node-meta: #94A3B8;

  --elevation-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --elevation-md: 0 4px 14px -3px rgba(15,23,42,.10);
  --elevation-lg: 0 18px 40px -10px rgba(15,23,42,.16);
  --elevation-xl: 0 28px 60px -14px rgba(15,23,42,.22);
}
[data-mode="dark"] {
  --overlay: rgba(0, 0, 0, .62);
  --info: #3D9BF5;  --info-soft: #11294A;

  --bench-liquid-lift: 30%;
  --bench-liquid-thicken: 2.2;

  --cat-1: #5B8DEF; --cat-2: #F4733F; --cat-3: #34D399; --cat-4: #A78BFA;
  --cat-5: #38BDF8; --cat-6: #F472B6; --cat-7: #FBBF24; --cat-8: #94A3B8;

  --node-concept: #5B8DEF; --node-chapter: #F4733F; --node-lo: #34D399;
  --node-competency: #A78BFA; --node-meta: #94A3B8;

  --elevation-sm: 0 1px 2px rgba(0,0,0,.4);
  --elevation-md: 0 6px 18px -4px rgba(0,0,0,.5);
  --elevation-lg: 0 22px 48px -12px rgba(0,0,0,.6);
  --elevation-xl: 0 32px 64px -16px rgba(0,0,0,.7);
}

/* -----------------------------------------------------------------------------
   3b. THEMES  ·  7 × {light, dark}
   :root carries SLATE-light as the pre-JS default.
   Per-theme-dark blocks have higher specificity and win regardless of order.
   --------------------------------------------------------------------------- */

/* ---- SLATE (default) — calm, academic ---- */
:root,
[data-theme="slate"] {
  --bg:#F4F7FB; --surface:#FFFFFF; --surface-2:#EEF2F8; --surface-3:#E4EAF3;
  --border:#E2E8F0; --border-strong:#CBD5E1;
  --text:#0F172A; --text-muted:#4E5D74; --text-subtle:#5E6A7F;
  --primary:#2B4ACB; --primary-hover:#1E3CA8; --primary-soft:#E8EDFB; --primary-contrast:#FFFFFF;
  --success:#16A34A; --success-soft:#DCFCE7;
  --warning:#C2700A; --warning-soft:#FEF1D6;
  --danger:#DC2626; --danger-soft:#FEE2E2;
  --ring:rgba(43,74,203,.30);
  --chart-1:#2B4ACB; --chart-2:#7B92E6; --chart-3:#C3D0F2; --chart-grid:#EAEFF7;
}
[data-theme="slate"][data-mode="dark"] {
  --bg:#0A1120; --surface:#121B2E; --surface-2:#1A2640; --surface-3:#223152;
  --border:#26334D; --border-strong:#384867;
  --text:#E9EEF8; --text-muted:#9DABC4; --text-subtle:#8D9AB1;
  --primary:#718CF2; --primary-hover:#88A0F6; --primary-soft:#1D2A4E; --primary-contrast:#0A1120;
  --success:#34D17F; --success-soft:#143524;
  --warning:#F0B45A; --warning-soft:#3A2C10;
  --danger:#F2766C; --danger-soft:#3A1C1A;
  --ring:rgba(110,137,242,.40);
  --chart-1:#6E89F2; --chart-2:#3F548C; --chart-3:#283A60; --chart-grid:#1E2B47;
}

/* ---- SAGE — warm, grounded ---- */
[data-theme="sage"] {
  --bg:#FAFAF7; --surface:#FFFFFF; --surface-2:#F3F2EC; --surface-3:#EAE8DF;
  --border:#E7E5DE; --border-strong:#D6D3C9;
  --text:#1C1917; --text-muted:#5F5A55; --text-subtle:#6C6764;
  --primary:#0E7A59; --primary-hover:#0A6147; --primary-soft:#DCF2E9; --primary-contrast:#FFFFFF;
  --success:#15803D; --success-soft:#DCF5E4;
  --warning:#B45309; --warning-soft:#FBEAD3;
  --danger:#B4322B; --danger-soft:#F8E0DD;
  --ring:rgba(14,124,90,.28);
  --chart-1:#0E7C5A; --chart-2:#5FB89A; --chart-3:#BFE3D6; --chart-grid:#EEEDE6;
}
[data-theme="sage"][data-mode="dark"] {
  --bg:#13110E; --surface:#1D1A16; --surface-2:#28241E; --surface-3:#332E26;
  --border:#332E26; --border-strong:#473F34;
  --text:#F2EFE8; --text-muted:#ABA59A; --text-subtle:#9A958E;
  --primary:#3FBF93; --primary-hover:#5BCFA6; --primary-soft:#11352A; --primary-contrast:#0F1310;
  --success:#3FBF7E; --success-soft:#123524;
  --warning:#E2A85A; --warning-soft:#352712;
  --danger:#E5786E; --danger-soft:#351C1A;
  --ring:rgba(63,191,147,.38);
  --chart-1:#3FBF93; --chart-2:#2A6E55; --chart-3:#1C4536; --chart-grid:#241F19;
}

/* ---- AZURE — bright, optimistic ---- */
[data-theme="azure"] {
  --bg:#F5F8FC; --surface:#FFFFFF; --surface-2:#EEF4FB; --surface-3:#E2ECF7;
  --border:#E1E9F2; --border-strong:#C9D6E6;
  --text:#0E1726; --text-muted:#4E5E77; --text-subtle:#5E6B7F;
  --primary:#0B69D4; --primary-hover:#095EC0; --primary-soft:#E1EFFD; --primary-contrast:#FFFFFF;
  --success:#15803D; --success-soft:#DCF5E4;
  --warning:#C2700A; --warning-soft:#FEF1D6;
  --danger:#DC2626; --danger-soft:#FEE2E2;
  --ring:rgba(11,114,231,.28);
  --chart-1:#0B72E7; --chart-2:#06BCF1; --chart-3:#9FD3F8; --chart-grid:#E7EFF8;
}
[data-theme="azure"][data-mode="dark"] {
  --bg:#08111F; --surface:#101B2D; --surface-2:#17263E; --surface-3:#1F3251;
  --border:#22344F; --border-strong:#324968;
  --text:#E7EFFA; --text-muted:#98ABC7; --text-subtle:#889BB3;
  --primary:#3D9BF5; --primary-hover:#5FAFF7; --primary-soft:#11294A; --primary-contrast:#08111F;
  --success:#34D17F; --success-soft:#123524;
  --warning:#F0B45A; --warning-soft:#3A2C10;
  --danger:#F2766C; --danger-soft:#3A1C1A;
  --ring:rgba(61,155,245,.40);
  --chart-1:#3D9BF5; --chart-2:#06BCF1; --chart-3:#1F4E78; --chart-grid:#1A2B45;
}

/* ---- TEAL — calm, fresh ---- */
[data-theme="teal"] {
  --bg:#F3F8F8; --surface:#FFFFFF; --surface-2:#E9F2F3; --surface-3:#DBEAEC;
  --border:#DFEAEB; --border-strong:#C5D8DA;
  --text:#0E2024; --text-muted:#485E63; --text-subtle:#566C70;
  --primary:#0E7483; --primary-hover:#0B6373; --primary-soft:#D7EFF2; --primary-contrast:#FFFFFF;
  --success:#15803D; --success-soft:#DCF5E4;
  --warning:#B07A12; --warning-soft:#FAEFD2;
  --danger:#C2281F; --danger-soft:#FBE4E2;
  --ring:rgba(14,124,140,.28);
  --chart-1:#0E7C8C; --chart-2:#5FB6C2; --chart-3:#BFE2E8; --chart-grid:#E7F1F2;
}
[data-theme="teal"][data-mode="dark"] {
  --bg:#06181B; --surface:#0E2226; --surface-2:#163036; --surface-3:#1E3F47;
  --border:#1F3A41; --border-strong:#2E5159;
  --text:#E4F2F4; --text-muted:#9CBBC1; --text-subtle:#8EA8AE;
  --primary:#2DB5C9; --primary-hover:#4FC6D6; --primary-soft:#0E3138; --primary-contrast:#06181B;
  --success:#3FBF7E; --success-soft:#123524;
  --warning:#E2A85A; --warning-soft:#352712;
  --danger:#E5786E; --danger-soft:#351C1A;
  --ring:rgba(45,181,201,.40);
  --chart-1:#2DB5C9; --chart-2:#1E6675; --chart-3:#143F49; --chart-grid:#163036;
}

/* ---- INDIGO — refined (your indigo, made pleasant) ---- */
[data-theme="indigo"] {
  --bg:#F7F7FB; --surface:#FFFFFF; --surface-2:#F0F0F6; --surface-3:#E7E6F1;
  --border:#E6E5EE; --border-strong:#D6D4E2;
  --text:#1A1830; --text-muted:#5B5873; --text-subtle:#68657C;
  --primary:#5848C9; --primary-hover:#46389F; --primary-soft:#ECE9FB; --primary-contrast:#FFFFFF;
  --success:#16915A; --success-soft:#DBF3E7;
  --warning:#B0720A; --warning-soft:#F8EDD4;
  --danger:#CC3344; --danger-soft:#FBE4E7;
  --ring:rgba(88,72,201,.28);
  --chart-1:#5848C9; --chart-2:#9387E0; --chart-3:#CFC8F2; --chart-grid:#EEECF7;
}
[data-theme="indigo"][data-mode="dark"] {
  --bg:#0C0A18; --surface:#151227; --surface-2:#1E1A36; --surface-3:#282347;
  --border:#2A2545; --border-strong:#3D3661;
  --text:#ECEAF7; --text-muted:#A6A1C0; --text-subtle:#8F8BA9;
  --primary:#8678EC; --primary-hover:#9C90F0; --primary-soft:#221C42; --primary-contrast:#0C0A18;
  --success:#3FBF7E; --success-soft:#123524;
  --warning:#E2A85A; --warning-soft:#352712;
  --danger:#E5707E; --danger-soft:#351A20;
  --ring:rgba(133,118,236,.40);
  --chart-1:#8576EC; --chart-2:#4F4490; --chart-3:#322B5C; --chart-grid:#211C3C;
}

/* ---- KASHI — brand orange ---- */
[data-theme="kashi"] {
  --bg:#FBF7F3; --surface:#FFFFFF; --surface-2:#F7F0EA; --surface-3:#F0E4DA;
  --border:#ECE2D9; --border-strong:#DCCFC3;
  --text:#241A13; --text-muted:#65584D; --text-subtle:#72655B;
  --primary:#B8320A; --primary-hover:#982706; --primary-soft:#FEE6D6; --primary-contrast:#FFFFFF;
  --success:#15803D; --success-soft:#DCF5E4;
  --warning:#B07A12; --warning-soft:#FAEFD2;
  --danger:#C81E3A; --danger-soft:#FBE2E7;
  --ring:rgba(232,71,15,.28);
  --chart-1:#E8470F; --chart-2:#F59A6F; --chart-3:#FBD4BF; --chart-grid:#F3EAE2;
}
[data-theme="kashi"][data-mode="dark"] {
  --bg:#15100B; --surface:#1F1812; --surface-2:#2A211A; --surface-3:#362A20;
  --border:#352A20; --border-strong:#4A392B;
  --text:#F5EDE5; --text-muted:#BBA99B; --text-subtle:#9F9084;
  --primary:#F4733F; --primary-hover:#F78A5E; --primary-soft:#3A2014; --primary-contrast:#15100B;
  --success:#3FBF7E; --success-soft:#123524;
  --warning:#E2A85A; --warning-soft:#352712;
  --danger:#ED6B7D; --danger-soft:#351A20;
  --ring:rgba(244,115,63,.40);
  --chart-1:#F4733F; --chart-2:#8A4424; --chart-3:#54311E; --chart-grid:#2A211A;
}

/* ---- MONO — ink & restraint (color only in data/status) ---- */
[data-theme="mono"] {
  --bg:#F7F7F8; --surface:#FFFFFF; --surface-2:#F0F0F1; --surface-3:#E6E6E8;
  --border:#E5E5E7; --border-strong:#D2D2D6;
  --text:#18181B; --text-muted:#595960; --text-subtle:#67676D;
  --primary:#18181B; --primary-hover:#000000; --primary-soft:#ECECEE; --primary-contrast:#FFFFFF;
  --success:#16A34A; --success-soft:#DCFCE7;
  --warning:#B45309; --warning-soft:#FCEFD6;
  --danger:#DC2626; --danger-soft:#FEE2E2;
  --ring:rgba(24,24,27,.22);
  --chart-1:#3F3F46; --chart-2:#A1A1AA; --chart-3:#E4E4E7; --chart-grid:#EFEFF1;
}
[data-theme="mono"][data-mode="dark"] {
  --bg:#0B0B0C; --surface:#161617; --surface-2:#1F1F21; --surface-3:#2A2A2D;
  --border:#292929; --border-strong:#3A3A3D;
  --text:#F4F4F5; --text-muted:#A1A1AA; --text-subtle:#909097;
  --primary:#F4F4F5; --primary-hover:#FFFFFF; --primary-soft:#27272A; --primary-contrast:#0B0B0C;
  --success:#34D17F; --success-soft:#123524;
  --warning:#F0B45A; --warning-soft:#3A2C10;
  --danger:#F2766C; --danger-soft:#3A1C1A;
  --ring:rgba(244,244,245,.30);
  --chart-1:#D4D4D8; --chart-2:#71717A; --chart-3:#3F3F46; --chart-grid:#1F1F21;
}

/* -----------------------------------------------------------------------------
   3c. NOTEBOOK PAPER — light paper in light mode; dark paper with light ink in
   dark mode (the [data-mode="dark"] override wins by specificity). Visuals keep
   their own light backgrounds and read as light "cards" on dark via --nb-card.
   --------------------------------------------------------------------------- */
:root,
[data-theme] {
  --nb-paper:       color-mix(in srgb, var(--primary) 3%,  #ffffff);
  --nb-paper-2:     color-mix(in srgb, var(--primary) 6%,  #ffffff);
  --nb-grid:        color-mix(in srgb, var(--primary) 12%, transparent);
  --nb-grid-strong: color-mix(in srgb, var(--primary) 20%, transparent);
  --nb-ink:         #1f2430;
  --nb-edge:        color-mix(in srgb, var(--primary) 14%, var(--border));
  --nb-shade:       #1f2430;
  --nb-card:        transparent;
  --nb-card-edge:   transparent;
  --nb-card-shadow: none;
  --nb-card-shadow-hover: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
}

[data-theme][data-mode="dark"] {
  --nb-paper:       color-mix(in srgb, var(--primary) 5%,  #16181d);
  --nb-paper-2:     color-mix(in srgb, var(--primary) 8%,  #1d2027);
  --nb-grid:        color-mix(in srgb, var(--primary) 14%, transparent);
  --nb-grid-strong: color-mix(in srgb, var(--primary) 24%, transparent);
  --nb-ink:         #e7e9ef;
  --nb-edge:        color-mix(in srgb, var(--primary) 18%, var(--border));
  --nb-shade:       #05070b;
  --nb-card:        #ffffff;
  --nb-card-edge:   rgba(0,0,0,.10);
  --nb-card-shadow: 0 1px 3px rgba(0,0,0,.45), 0 8px 20px -6px rgba(0,0,0,.40);
  --nb-card-shadow-hover: 0 14px 30px -6px rgba(0,0,0,.55);
}

/* On phones in dark mode, dimmed OLED panels wash out the subtle dark-on-dark
   border, so card/chip outlines vanish (they read fine on desktop monitors).
   Promote --border to the stronger value on small screens in dark mode only —
   desktop and light mode are untouched. Same specificity as the theme blocks,
   placed after them, so it wins by source order. */
@media (max-width: 767px) {
  [data-theme][data-mode="dark"] {
    --border: var(--border-strong);
  }
}

/* -----------------------------------------------------------------------------
   4. BRAND REFERENCE  (official Padho palette — for logo/marketing, NOT theming)
   Migrated out of the now-deleted tailwind.config.js so the brand hexes survive.
   NOTE: source kashi-70/80 were near-duplicate (#971F13 / #971F15); 70 adjusted
   to #B82A0F for a smooth ramp — confirm in Figma.
   --------------------------------------------------------------------------- */
:root {
  --brand-kashi-50:#F45929; --brand-kashi-60:#E43612; --brand-kashi-70:#B82A0F;
  --brand-coorg-60:#204FF0; --brand-nubra-50:#2899FF; --brand-kochi-50:#06BCF1;
  --brand-pondy-60:#6751DA; --brand-hanle-50:#64748B; --brand-spiti-60:#525252;
}

/* -----------------------------------------------------------------------------
   5. BASE  (low-priority defaults; existing page classes still override in P1)
   --------------------------------------------------------------------------- */