/* ============================================================================
   THSTI Design Tokens
   Source: "THSTI Brand & Dashboard Spec" v1.0 (compiled from thsti.res.in
   production CSS). Brand values are verbatim from the spec; values marked
   (derived) are documented extensions for dashboard use.
   ------------------------------------------------------------------------
   Nothing below this file should hard-code a hex value.
   ========================================================================= */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --thsti-maroon:        #A8252B;  /* primary: buttons, links, emphasis */
  --thsti-maroon-dark:   #7C1B20;  /* pressed / sequential-scale end */
  --thsti-maroon-border: #A7262B;  /* hairline variant seen on site */
  --thsti-navy:          #40407E;  /* secondary: bars, hover swap, info */
  --thsti-navy-dark:     #2C2C5C;
  --thsti-orange:        #F58920;  /* accent: gradient start, warning */
  --thsti-orange-mid:    #F04D09;
  --thsti-orange-deep:   #E04421;  /* gradient end */
  --thsti-gradient: linear-gradient(90deg, #F58920 31%, #F04D09 72%, #E04421 91%);

  /* --- Tints (derived) — chart fills & soft backgrounds ------------------ */
  --thsti-maroon-300:    #D98F93;
  --thsti-maroon-100:    #F6E4E5;
  --thsti-navy-300:      #9A9AC4;
  --thsti-navy-100:      #E8E8F2;
  --thsti-orange-100:    #FEF1E1;

  /* --- Neutrals — as shipped on the site -------------------------------- */
  --thsti-text:          #222222;  /* headings */
  --thsti-body:          #333333;  /* body copy */
  --thsti-text-2nd:      #777777;  /* secondary text, axis labels */
  --thsti-muted:         #888888;
  --thsti-disabled:      #CCCCCC;
  --thsti-border:        #E1E1E1;
  --thsti-rule:          #E8E8E8;
  --thsti-divider:       #EEEEEE;
  --thsti-panel:         #F7F7F7;  /* page ground */
  --thsti-zebra:         #FAFAFA;  /* striped row */
  --thsti-surface:       #FFFFFF;  /* card surface */

  /* --- Status (success derived; others from site) ------------------------ */
  --thsti-success:       #2E7D46;
  --thsti-success-bg:    #E6F1E9;
  --thsti-warning:       #F58920;
  --thsti-warning-bg:    #FEF1E1;
  --thsti-error:         #D32F2F;
  --thsti-error-bg:      #FBE9E9;
  --thsti-info:          #40407E;
  --thsti-info-bg:       #E8E8F2;

  /* --- Shell ground (derived) -------------------------------------------
     A 264px full-height field of #A8252B is too loud to sit beside all day:
     it is 64% saturated at 40% lightness — chroma tuned for a button, not
     for an area that size. It also leaves the accents nowhere to go, since
     everything on the panel is already the accent colour.
     So the ground keeps the brand HUE (357deg) and sheds chroma and
     lightness — a deep oxblood, derived from the maroon exactly the way
     --thsti-maroon-dark is. Full-strength maroon then goes back to what the
     spec assigns it: the accent. The active row is the brand red, not the
     panel. Dial the ground here; nothing else has to move. */
  --shell-bg:          #3E181B;               /* hsl(356, 44%, 17%) */
  --shell-active:      var(--thsti-maroon);   /* the one bright red on the panel */
  --shell-rule-active: var(--thsti-orange);

  /* --- Type ------------------------------------------------------------- */
  --thsti-font-heading: 'Montserrat', 'Segoe UI', system-ui, sans-serif;   /* 600/700 */
  --thsti-font-body:    'Lato', 'Segoe UI', system-ui, sans-serif;         /* 400/700 */
  --thsti-font-hindi:   'Mangal', 'Nirmala UI', sans-serif;
  --thsti-font-mono:    ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;

  /* Type scale — the five roles named in the spec, plus UI sizes */
  --fs-page-title: 32px;   /* Montserrat 700 */
  --fs-section:    20px;   /* Montserrat 600 */
  --fs-kpi:        34px;   /* Montserrat 700 */
  --fs-kpi-lg:     40px;
  --fs-body:       15px;   /* Lato 400 / 1.6 */
  --fs-sm:         14px;
  --fs-xs:         13px;
  --fs-label:      12px;   /* Lato 700 uppercase, 0.08em */
  --lh-body:       1.6;
  --lh-tight:      1.2;
  --ls-label:      0.08em;
  --ls-heading:    0.04em;

  /* --- Space 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;

  /* --- Radii — the site is square: 0–4px, never more -------------------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;         /* chips / status pills only */

  /* --- Elevation -------------------------------------------------------- */
  --sh-1: 0 1px 3px rgba(0, 0, 0, 0.07);
  --sh-2: 0 2px 8px rgba(0, 0, 0, 0.08);
  --sh-3: 0 8px 24px rgba(0, 0, 0, 0.14);

  /* --- Layout ----------------------------------------------------------- */
  --sidebar-w:           264px;
  --sidebar-rail-w:      72px;
  --topbar-h:            64px;
  --content-max:         1680px;
  --gutter:              var(--sp-6);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 280ms;

  /* --- Z-index ---------------------------------------------------------- */
  --z-sidebar:  40;
  --z-topbar:   30;
  --z-scrim:    35;
  --z-dropdown: 60;
  --z-modal:    80;
  --z-toast:    90;

  /* --- Chart palette (derived, validated) -------------------------------
     Categorical order is FIXED and never cycled. Capped at 5 series; a 6th
     folds into "Other" or becomes small multiples.
     Slot 2 is the brand navy lifted to #4F4F9C so the whole set clears the
     perceptual-lightness band; #40407E stays the UI navy.
     Validated: lightness band PASS · chroma floor PASS · CVD ΔE 12.7 (protan)
     PASS · normal-vision ΔE 17.1 PASS · orange is under 3:1 vs white, so any
     orange series is always direct-labelled or legended, never colour-alone. */
  --chart-1: #A8252B;
  --chart-2: #4F4F9C;
  --chart-3: #F58920;
  --chart-4: #7A7ABF;
  --chart-5: #C9666C;

  /* Sequential ramp — one hue, light to dark (magnitude only) */
  --seq-1: #F6E4E5;
  --seq-2: #E3B4B7;
  --seq-3: #CF7E83;
  --seq-4: #A8252B;
  --seq-5: #7C1B20;

  /* Chart furniture */
  --chart-grid:  #EEEEEE;
  --chart-axis:  #E1E1E1;
  --chart-ink:   #777777;
}