/* ═══════════════════════════════════════════════════════════════════════
   HOLISTIC SMART BRAND DESIGN SYSTEM — DESIGN TOKENS (tokens.css)
   Official variables for colours, typography, spacing, shadows, radius
═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1. BRAND COLOUR PALETTE (3 Blues & 2 Greens) ── */
  /* The 3 Core Blues */
  --navy:          #003375;
  --navy-dark:     #071B3E;
  --navy-mid:      #0D2B6E;
  --navy-tint:     #EEF4FB;

  --cerulean:      #069EEA;
  --cerulean-dark: #057EBB;
  --cerulean-light:#DAF0FC;
  --cerulean-tint: #F0F8FD;

  --sky:           #11A7FF;
  --sky-dark:      #0088DB;
  --sky-light:     #E6F5FF;
  --sky-tint:      #F0F9FF;

  /* The 2 Core Greens */
  --lime:          #99CC00;
  --lime-light:    #F4FBDF;
  --lime-tint:     #F9FDF2;

  --lime-dark:     #78B023;
  --green-deep:    #78B023;
  --green-dark:    #5B8719;
  --green-light:   #EBF3DE;
  --green-tint:    #F6FAF0;

  /* Precision Engineering Accent */
  --teal:          #28585D;
  --teal-dark:     #1C3E42;
  --teal-light:    #E8F1F2;

  /* Alert, System Status & Accents */
  --gold:         #F59E0B;
  --gold-light:   #FEF3C7;
  --gold-dark:    #D97706;
  --red:          #E8344A;
  --red-light:    #FEE2E6;

  /* Neutral Canvas & Surface System */
  --bg:           #FFFFFF;
  --bg-soft:      #F6F9FD;
  --bg-subtle:    #EDF3FA;
  --bg-card:      #FFFFFF;
  --line:         #DDE6F0;
  --line-strong:  #C4D6EA;
  --line-subtle:  #EDF3FA;

  /* Text & Ink Tokens */
  --ink:          #0D1B33;
  --ink-secondary:#223354;
  --body:         #3A4D6B;
  --muted:        #7A90B3;
  --body-inverse: #D6E4F5;

  /* ── 2. TYPOGRAPHY SYSTEM ── */
  --ff-display:   'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-body:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-mono:      'Space Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Font Sizes */
  --fs-hero:      clamp(38px, 5.5vw, 54px);
  --fs-h1:        clamp(30px, 4vw, 42px);
  --fs-h2:        clamp(22px, 3vw, 30px);
  --fs-h3:        20px;
  --fs-h4:        17px;
  --fs-lead:      clamp(16.5px, 2vw, 18.5px);
  --fs-body:      15px;
  --fs-sm:        13.5px;
  --fs-xs:        12px;
  --fs-mono:      13px;

  /* Line Heights */
  --lh-tight:     1.15;
  --lh-snug:      1.35;
  --lh-base:      1.6;
  --lh-relaxed:   1.75;

  /* Letter Spacings */
  --ls-tight:     -0.025em;
  --ls-heading:   -0.015em;
  --ls-normal:    0em;
  --ls-caps:      0.08em;
  --ls-eyebrow:   0.14em;

  /* ── 3. SPACING SCALE (4px Base Grid) ── */
  --sp-1:         4px;
  --sp-2:         8px;
  --sp-3:         12px;
  --sp-4:         16px;
  --sp-5:         20px;
  --sp-6:         24px;
  --sp-7:         32px;
  --sp-8:         40px;
  --sp-9:         48px;
  --sp-10:        56px;
  --sp-11:        64px;
  --sp-12:        80px;
  --sp-13:        104px;

  /* ── 4. SHAPE & CORNER RADIUS ── */
  --rad-xs:       4px;
  --rad-sm:       6px;
  --rad-base:     8px;
  --rad-md:       12px;
  --rad-lg:       16px;
  --rad-xl:       20px;
  --rad-pill:     9999px;

  /* ── 5. ELEVATION & NAVY-TINTED SHADOWS ── */
  --shadow-sm:    0 2px 8px rgba(0, 51, 117, 0.04);
  --shadow:       0 8px 24px rgba(0, 51, 117, 0.06);
  --shadow-lg:    0 16px 40px rgba(0, 51, 117, 0.10);
  --shadow-hover: 0 14px 34px rgba(0, 51, 117, 0.12);

  /* ── 6. LAYOUT & CONTAINERS ── */
  --maxw:         1200px;
  --maxw-wide:    1380px;
  --maxw-narrow:  840px;
  --gutter:       24px;
  --rail-w:       240px;

  /* ── 7. MOTION & TRANSITIONS ── */
  --t-fast:       120ms;
  --t-base:       180ms;
  --t-slow:       260ms;
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
}