/* =============================================================
   AI Accelerator Design System — CSS Custom Properties
   v1.0.0 — 2026-04-18
   Single source of truth for colour, typography, spacing, motion.
   Canonical mirror of website/css/style.css :root block.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
  /* ---------- Core palette ---------- */
  --color-primary:         #1B2F3C;   /* Gable Green */
  --color-surface-dark:    #152532;
  --color-white:           #FFFFFF;
  --color-off-white:       #F8F9FA;

  /* Accents (DARK-BACKGROUND-ONLY unless noted) */
  --color-accent-1:        #00FFBC;   /* Bright Turquoise — dark bg only */
  --color-accent-2:        #00B1FF;   /* Dodger Blue */
  --color-deep-cerulean:   #0084B2;   /* Hero-blue, CTA */
  --color-malibu:          #5CD5FF;
  --color-cornflower:      #6161FF;
  --color-meadow:          #17CE95;   /* Mountain Meadow */
  --color-green-pea:       #226B4D;
  --color-moonraker:       #C5B6F1;
  --color-sea-pink:        #EFACA8;
  --color-bittersweet:     #FF5F5F;

  /* Accessible overrides — use these on light backgrounds */
  --color-accent-1-accessible: #007A5E;  /* replaces #00FFBC on white */
  --color-accent-2-accessible: #0071A1;  /* replaces #00B1FF on white */

  /* Text colours (semantic) */
  --color-text-primary:    var(--color-primary);
  --color-text-on-dark:    var(--color-white);
  --color-text-secondary:  #575756;   /* Chicago */
  --color-text-muted:      #8A9AA5;

  /* Lines / borders */
  --color-alto:            #DADADA;
  --color-border:          #E2E8F0;
  --color-border-subtle:   #F1F5F9;

  /* ---------- Gradients ---------- */
  --gradient-hero:              linear-gradient(135deg, #111F28 0%, #1B2F3C 60%, #0A4A6B 100%);
  --gradient-accent:            linear-gradient(135deg, #00FFBC 0%, #00B1FF 100%);
  --gradient-accent-accessible: linear-gradient(135deg, #007A5E 0%, #0071A1 100%);
  --gradient-subtle:            linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%);
  --gradient-dark:              linear-gradient(180deg, #1B2F3C 0%, #152532 100%);
  --gradient-glow:              radial-gradient(circle at 50% 50%, rgba(0,255,188,0.15) 0%, transparent 70%);

  /* ---------- Typography ---------- */
  --font:             'Poppins', 'Inter', Arial, sans-serif;
  --font-code:        Consolas, 'Courier New', monospace;

  --fw-light:         300;
  --fw-regular:       400;
  --fw-semibold:      600;
  --fw-bold:          700;

  --fs-display-xl:    clamp(40px, 5vw, 80px);
  --fs-display-lg:    clamp(36px, 4vw, 64px);
  --fs-display-md:    clamp(28px, 3vw, 48px);
  --fs-heading-lg:    clamp(26px, 2.5vw, 36px);
  --fs-heading-md:    clamp(22px, 2vw, 28px);
  --fs-heading-sm:    22px;
  --fs-body-lg:       20px;
  --fs-body:          17px;
  --fs-body-sm:       15px;
  --fs-caption:       13px;
  --fs-overline:      13px;

  --lh-tight:         1.0;
  --lh-snug:          1.1;
  --lh-normal:        1.5;
  --lh-relaxed:       1.7;
  --lh-loose:         1.75;

  --ls-tight:        -0.03em;
  --ls-snug:         -0.02em;
  --ls-normal:        0;
  --ls-caps:          0.12em;
  --ls-caps-wide:     0.15em;

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

  /* ---------- Layout ---------- */
  --max-width:             1280px;
  --max-width-narrow:      720px;
  --section-pad:           80px;
  --section-pad-mobile:    48px;
  --container-pad:         48px;
  --container-pad-mobile:  24px;

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

  /* ---------- Shadow ---------- */
  --shadow-sm:        0 1px 3px rgba(27,47,60,0.08);
  --shadow-md:        0 4px 12px rgba(27,47,60,0.12);
  --shadow-lg:        0 12px 40px rgba(27,47,60,0.16);
  --shadow-glow:      0 0 40px rgba(0,255,188,0.2);
  --shadow-blue-glow: 0 0 40px rgba(0,177,255,0.2);

  /* ---------- Motion ---------- */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-entrance:800ms;

  /* ---------- Breakpoints (reference — use in media queries) ---------- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}