/* ==========================================================================
   Vedanta × Sattva × mGrant — Design Tokens
   Single source of truth for all brand colour values.
   Path: vedanta/public/css/design_tokens.css
   Rule: no hex literal lives anywhere else in this app EXCEPT the auth
         route's login.css (documented exception — route-local rgba composites).
         Enforcement: scripts/validate_fixtures.py (+ pre-commit hook).
   ========================================================================== */

:root {
  /* -- Vedanta brand (source of truth: logo SVG fills, 2026-06-07) --------- */
  --ved-green:            #71B32F;   /* logo leaf — primary anchor (CTA, links, focus rings) */
  --ved-green-hover:      #5E9827;   /* darker hover for interactive green */
  --ved-blue:             #005298;   /* logo wordmark / Mother-Earth circle */
  --ved-blue-lift:        #0A3A66;   /* hero base, lifted from --ved-blue for eye comfort */
  --ved-gold:             #FDD700;   /* accent — eyebrow text, micro-accents; <=5% surface */

  /* -- Neutrals ------------------------------------------------------------- */
  --ved-ink:              #292727;   /* dominant body text — near-black */
  --ved-grey:             #535252;   /* secondary text, captions */
  --ved-muted:            #AAB2A8;   /* tertiary text — dividers, "Powered by", captions */
  --ved-icon:             #9AA39A;   /* input-field icon glyphs */
  --ved-placeholder:      #A6ADA4;   /* input placeholder text */
  --ved-line:             #E4E9E2;   /* borders, dividers */
  --ved-line-strong:      #C9D2C6;   /* hover / emphasis border */
  --ved-form-tint:        #F4F9F2;   /* faint green input background */
  --ved-surface-hover:    #FAFBF9;   /* subtle hover fill (SSO buttons) */
  --ved-seam-mid:         #3F8A63;   /* Living-Seam gradient midpoint (green→blue blend) */
  --white:                #FFFFFF;

  /* -- Semantic states (Vedanta-toned — matches Akamai token grade) --------- */
  --ved-success:          #2E7D46;   /* reset-link sent, save OK */
  --ved-success-tint:     #EAF5EE;   /* success background wash */
  --ved-danger:           #C0392B;   /* form errors, auth failure */
  --ved-danger-tint:      #FBECEA;   /* danger background wash */

  /* -- Typography ----------------------------------------------------------- */
  --font-body:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:'M PLUS 1', var(--font-body);

  /* -- Type scale ----------------------------------------------------------- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   24px;
  --fs-2xl:  28px;
  --fs-3xl:  40px;

  /* -- Weight scale --------------------------------------------------------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* -- Spacing scale -------------------------------------------------------- */
  --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-14: 56px;
  --space-16: 64px;

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

  /* -- Motion --------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;
  --dur-xslow:   800ms;

  /* -- Layout --------------------------------------------------------------- */
  --form-max-width: 360px;
  --form-padding-x: 56px;
}

/* ==========================================================================
   Reset + base — minimal; composition lives per-page
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ved-ink);
  background: var(--ved-blue-lift);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--ved-blue); text-decoration: none; }
a:hover { color: var(--ved-green); }