/* ==========================================================================
   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) */

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

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

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

/* ==========================================================================
   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); }