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

:root {
  /* -- Akamai brand (verified from akamai.com sources, 2026-04-17) ---------- */
  --akamai-blue:          #0099CC; /* Primary — CTA, links, brand anchor */
  --akamai-blue-hover:    #007AA8; /* Darker hover for interactive blue */
  --akamai-blue-muted:    #189AD6; /* Logo-pixel-sampled variant (reserved) */
  --akamai-orange:        #FF9933; /* Accent — hover, focus ring, highlight */
  --akamai-orange-hover:  #E6801F;
  --akamai-navy:          #002856; /* Deep navy for text on light, secondary surface */
  --akamai-black:         #000000; /* Foundation (per Akamai brand guide) */
  --akamai-surface-dark:  #0A2B50; /* Softened navy — hero / dark-surface base. Derived from --akamai-navy, slightly lifted for eye comfort. */
  --akamai-gray-dark:     #54565B; /* Supporting gray */
  --akamai-gray-light:    #A8A8AA; /* Supporting gray */

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

  --text-primary:         #111827; /* Body text on light */
  --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);

  /* -- 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(0,153,204,0.20);

  /* -- 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(--akamai-blue); text-decoration: none; }
a:hover { color: var(--akamai-blue-hover); }