/* ==========================================================================
   Lenovo × Sattva × mGrant — Design Tokens
   Single source of truth for all color, type, spacing, radius, shadow, motion.
   Path: sattva_lenovo/public/css/design_tokens.css
   Rule: no hex value lives anywhere else in the codebase. Enforcement:
         scripts/validate_fixtures.py (+ pre-commit hook).

   Lenovo palette verified 2026-06-18 via official Lenovo logo pixels +
   live lenovo.com CSS. Primary #E7252D (Lenovo link/CTA red). Approved by
   Nihaan 2026-06-18. Brand source: lenovo.com/in/en/about/sustainability/.
   The token NAMES below keep the legacy `--sattva_lenovo-*` keys (referenced
   across login.css) — only the VALUES are re-pointed to Lenovo. Reads as
   semantic roles: `-blue` = primary red, `-orange` = accent red, `-navy`/
   `-surface-dark` = charcoal hero base.
   ========================================================================== */

:root {
  /* -- Lenovo brand (verified 2026-06-18 — logo pixels + live lenovo.com CSS) ---------- */
  --sattva_lenovo-blue:          #E7252D; /* Primary — CTA, links, brand anchor (Lenovo red) */
  --sattva_lenovo-blue-hover:    #C41D24; /* Darker hover for interactive red */
  --sattva_lenovo-blue-muted:    #E00025; /* Accent red (live lenovo.com CSS) — reserved */
  --sattva_lenovo-orange:        #E7252D; /* Eyebrow / secondary accent — Lenovo is red+white only, accent == primary */
  --sattva_lenovo-orange-hover:  #C41D24;
  --sattva_lenovo-navy:          #131313; /* Hero base — Lenovo near-black (replaces Akamai navy) */
  --sattva_lenovo-black:         #000000; /* Foundation */
  --sattva_lenovo-surface-dark:  #131313; /* Hero / dark-surface base — Lenovo charcoal */
  --sattva_lenovo-gray-dark:     #54565B; /* Supporting gray */
  --sattva_lenovo-gray-light:    #A8A8AA; /* Supporting gray */

  /* -- Neutrals ------------------------------------------------------------- */
  --white:                #FFFFFF;
  --surface-0:            #FFFFFF;
  --surface-1:            #FAFAFA;
  --surface-2:            #F4F6F8;
  --border:               #E5E7EB;
  --border-strong:        #D1D5DB;

  --text-primary:         #131313; /* Body text on light — Lenovo ink */
  --text-secondary:       #4B5563;
  --text-muted:           #6B7280;
  --text-disabled:        #9CA3AF;
  --text-on-dark:         #FFFFFF;
  --text-on-dark-muted:   rgba(255,255,255,0.72);
  --text-on-dark-faint:   rgba(255,255,255,0.48);

  /* -- Login surface tokens (hex-free composition for login.css) ----------- */
  --field-bg:             #FAFAFA;  /* Lenovo input fill (neutral, replaces Akamai blue-tint) */
  --field-border:         #E0E0E0;  /* Input border */
  --field-text:           #131313;  /* Input text — ink */
  --field-icon:           #9A9A9A;  /* Inline input icon / muted */
  --field-placeholder:    #B6B6B6;  /* Placeholder text */
  --divider-line:         #ECECEC;  /* OR-divider hairline */
  --auth-title:           #131313;  /* Right-panel H1 — ink */
  --auth-subtitle:        #5A5A5A;  /* Right-panel subtitle */
  --sso-hover-bg:         #FFF6F6;  /* SSO / LDAP hover wash (faint red tint) */
  /* O365 SSO glyph quadrant colours (Microsoft brand — fixed, vendor-owned) */
  --o365-red:             #F25022;
  --o365-green:           #7FBA00;
  --o365-blue:            #00A4EF;
  --o365-yellow:          #FFB900;

  /* -- Login composite colours (rgba — keep login.css hex-free) ------------ */
  /* Hero overlay gradient stops over the charcoal hero (#131313 / faint red foot) */
  --hero-ov-top:          rgba(12,12,14,0.28);
  --hero-ov-upper:        rgba(12,12,14,0.12);
  --hero-ov-mid:          rgba(12,12,14,0.55);
  --hero-ov-foot:         rgba(10,8,9,0.95);
  --hero-progress-track:  rgba(255,255,255,0.22);
  --hero-progress-fill:   rgba(255,255,255,0.75);
  --hero-rule:            rgba(255,255,255,0.25);
  --focus-ring:           rgba(231,37,45,0.10);  /* #E7252D @ 10% — input focus */
  --autofill-fill:        #FAFAFA;               /* matches --field-bg (webkit autofill inset) */

  /* -- Home focus-area placeholders (Cisco home GRAD array, Lenovo palette) -- */
  /* Six tile/slide fills used when a Focus Area has no photo, cycled by index */
  --home-ph-1:            linear-gradient(135deg, #131313, #E7252D);
  --home-ph-2:            linear-gradient(135deg, #54565B, #131313);
  --home-ph-3:            linear-gradient(135deg, #C41D24, #E00025);
  --home-ph-4:            linear-gradient(135deg, #131313, #54565B);
  --home-ph-5:            linear-gradient(135deg, #E7252D, #C41D24);
  --home-ph-6:            linear-gradient(135deg, #A8A8AA, #54565B);
  /* Home card lifts, Cisco home values verbatim (tile hover, KPI hover, filter panel) */
  --home-shadow-tile:     0 8px 22px rgba(0,0,0,0.10);
  --home-shadow-card:     0 6px 18px rgba(0,0,0,0.08);
  --home-shadow-panel:    0 8px 24px rgba(0,0,0,0.12);

  /* -- Semantic feedback — form validation, inline status messages --------- */
  --color-success:        #1F7A4E; /* Success green — reset-link sent, save OK */
  --color-danger:         #B42318; /* Danger red — form errors, network failures */

  /* -- Entity CSR page (entity_csr.css) — status pills, selection, overlays - */
  --color-warning:        #B7791F; /* Pending / lapsing hints */
  --color-warning-soft:   #F8F0DF; /* Pending pill fill */
  --color-success-soft:   #E9F2EC; /* Locked (submitted) pill fill */
  --color-danger-soft:    #FDF6F6; /* Blocked-allocation cell wash */
  --surface-selected:     #FDECEC; /* Selected row — faint Lenovo red */
  --shadow-ink-soft:      rgba(16,24,32,0.16); /* Row-menu / popover shadow */
  --overlay-scrim:        rgba(16,24,32,0.40); /* Modal backdrop */

  /* -- Typography ---------------------------------------------------------- */
  --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs:                12px;
  --fs-sm:                14px;
  --fs-base:              15px;
  --fs-md:                16px;
  --fs-lg:                18px;
  --fs-xl:                22px;
  --fs-2xl:               28px;
  --fs-3xl:               40px;
  --fs-4xl:               56px;
  --fs-hero:              72px;

  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;

  --lh-tight:             1.15;
  --lh-snug:              1.35;
  --lh-normal:            1.55;

  --tracking-tight:       -0.02em;
  --tracking-wide:        0.08em;

  /* -- Spacing scale ------------------------------------------------------- */
  --space-0:              0;
  --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;
  --space-24:             96px;

  /* -- Controls (Impact Dashboard): one height for every button, input and
     icon button, so the hit target and the 18px glyph match everywhere. -- */
  --control-h:            36px;
  --icon-glyph:           18px; /* Every control glyph: buttons, icon buttons, rail */
  --icon-glyph-sm:        16px; /* Info "i" beside a card title */
  --icon-glyph-xs:        12px; /* Remove "x" inside a filter chip */
  --icon-hit-sm:          20px; /* Hit circle for the info and chip-remove glyphs */
  /* Stat card icon: one box and one glyph on every KPI tile. */
  --stat-icon-box:        32px;
  --stat-icon-radius:     var(--radius-md);
  --stat-icon-glyph:      18px;

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

  /* -- Shadow -------------------------------------------------------------- */
  --shadow-xs:            0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:            0 2px 4px rgba(0,0,0,0.06);
  --shadow:               0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:            0 16px 40px rgba(0,0,0,0.12);
  --shadow-focus:         0 0 0 3px rgba(231,37,45,0.20); /* #E7252D @ 20% — Lenovo focus ring */

  /* -- Motion -------------------------------------------------------------- */
  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:          cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:             150ms;
  --dur-base:             220ms;
  --dur-slow:             400ms;

  /* -- Layout -------------------------------------------------------------- */
  --form-width:           420px;
  --form-padding-x:       56px;

  /* -- UN Sustainable Development Goals, official colours (un.org/sdgs) ---- */
  --sdg-1: rgb(229, 36, 59);  --sdg-2: rgb(221, 166, 58);  --sdg-3: rgb(76, 159, 56);
  --sdg-4: rgb(197, 25, 45);  --sdg-5: rgb(255, 58, 33);   --sdg-6: rgb(38, 189, 226);
  --sdg-7: rgb(252, 195, 11); --sdg-8: rgb(162, 25, 66);   --sdg-9: rgb(253, 105, 37);
  --sdg-10: rgb(221, 19, 103); --sdg-11: rgb(253, 157, 36); --sdg-12: rgb(191, 139, 46);
  --sdg-13: rgb(63, 126, 68); --sdg-14: rgb(10, 151, 217);  --sdg-15: rgb(86, 192, 43);
  --sdg-16: rgb(0, 104, 157); --sdg-17: rgb(25, 72, 106);

  /* -- Grant dashboard data colours (2026-10-08) ------------------------- */
  /* Multi-series charts take --series-1..5 in order. Light and dark steps
     alternate so every adjacent pair is at least 3:1 apart and every colour is
     at least 3:1 on white (white: 3.38, 15.21, 4.77, 17.29, 4.92; adjacent:
     4.50, 3.19, 3.62, 3.51). Lenovo red is brand-only; red text and red fills
     that carry text use --brand-red-text (#C41D24, 5.9:1). The map keeps its
     sequential blue ramp (--ramp-r*) and SDG visuals keep the official --sdg-*. */
  --brand-red-text:       #C41D24;
  --series-1:             #7C8DA6; /* slate */
  --series-2:             #1B2638; /* navy */
  --series-3:             #16807A; /* teal */
  --series-4:             #B5446E; /* rose */
  --series-5:             #A16207; /* ochre */
  --series-mid:           #455A78; /* single-series bars and progress fills, 7.03:1 */
  --series-committed:     var(--series-1);
  --series-disbursed:     var(--series-2);
  --series-utilised:      var(--series-3);
  --progress-fill:        var(--series-mid);
  --progress-track:       #E6E7E9; /* Progress bars: light-grey track */
  --table-head-bg:        #F4F5F7; /* Table header background */
  /* Grant status pills (text 4.5:1 or better on its fill). */
  --pill-active-bg:       var(--color-success-soft);
  --pill-active-fg:       var(--color-success);
  --pill-completed-bg:    #E6ECF4;
  --pill-completed-fg:    #34475F;
  --pill-closed-bg:       #F1F2F4;
  --pill-closed-fg:       #54565B;
  --pill-other-bg:        #FDF3E1;
  --pill-other-fg:        #7A4A05;
  --stat-icon-bg:         #F1F2F4; /* Stat card icon box */
  --stat-icon-fg:         #54565B;
  /* Focus-area categories: five calm colours plus grey for every other area. */
  --cat-1:                #7B4A86; /* plum: red stays brand-only (R7) */
  --cat-2:                #54565B; /* charcoal */
  --cat-3:                #4F6D8F; /* slate blue */
  --cat-4:                #2E8580; /* teal */
  --cat-5:                #B39463; /* sand */
  --cat-other:            #A3A5AA; /* grey: every focus area outside the top five */
  /* Neutral sequential ramp for counts (grant-size matrix, year stacks). */
  --ramp-n1:              #E6E9EE;
  --ramp-n2:              #C3CCD8;
  --ramp-n3:              #8EA0B6;
  --ramp-n4:              #5D7493;
  --ramp-n5:              #34475F;
  /* Blue sequential ramp for the India state map, lightest to darkest. Each
     step is 1.73:1 from the next, and the lightest is 1.35:1 from --map-empty
     plus a hue change, so every bucket reads apart from its neighbour. */
  --ramp-r1:              #CFE0F3;
  --ramp-r2:              #8DB6E0;
  --ramp-r3:              #4A8BC9;
  --ramp-r4:              #1F5FA3;
  --ramp-r5:              #0F3560;
  --map-empty:            #EEF0F2; /* State with nothing committed */
  --map-line:             #FFFFFF; /* State borders */
  --series-growth-up:     #1F7A4E; /* YoY growth up */
  --series-growth-down:   #B42318; /* YoY growth down */
}

/* ==========================================================================
   Reset + base (minimal — keeps tokens file lean; composition lives per-page)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--sattva_lenovo-blue); text-decoration: none; }
a:hover { color: var(--sattva_lenovo-blue-hover); }