/* ==========================================================
   Q Lab Academy — Design Tokens
   Source: reference/QLab-Academy-Brand-Visual-Guide-v3.html (filename, untouched)
   Do not hand-pick values elsewhere. If a token is missing,
   add it here first, then reference it.
   ========================================================== */

:root {
  /* ── Teal — Trust & Technical ── */
  --teal-50:  #EDFAF8;
  --teal-100: #D0F4F0;
  --teal-200: #A3E8E1;
  --teal-300: #6DD5CC;
  --teal-400: #38BEB3;
  --teal-500: #0D9489;
  --teal-600: #0A7A71;
  --teal-700: #08615A;
  --teal-800: #064D47;
  --teal-900: #043A35;
  --teal-950: #022420;

  /* ── Purple — Mid-arc Bridge ── */
  --purple-100: #E9E2F3;
  --purple-300: #B99CD6;
  --purple-500: #7B4FA0;
  --purple-700: #5A357A;
  --purple-900: #3A1F52;

  /* ── Magenta — Energy & Commerce ── */
  --magenta-50:  #FDF2F9;
  --magenta-100: #FAE0F0;
  --magenta-200: #F5BDE0;
  --magenta-300: #ED8CC8;
  --magenta-400: #E055AA;
  --magenta-500: #C4237E;
  --magenta-600: #A61B6A;
  --magenta-700: #881556;
  --magenta-800: #6B1144;
  --magenta-900: #530D34;
  --magenta-950: #370822;

  /* ── Neutrals — Warm-cool balanced ── */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFC;
  --neutral-50:  #F4F6F8;
  --neutral-100: #E8ECF0;
  --neutral-200: #D1D8E0;
  --neutral-300: #A8B4C0;
  --neutral-400: #7D8C9A;
  --neutral-500: #5A6B78;
  --neutral-600: #3F4F5C;
  --neutral-700: #2C3A46;
  --neutral-800: #1E2A34;
  --neutral-900: #141D24;
  --neutral-950: #0B1117;

  /* ── Dark surfaces ── */
  --slate-base:    #1A2328;
  --slate-warm:    #2E3440;
  --charcoal-plum: #1E1430;

  /* ── Functional accents ── */
  --amber:       #E89B24;
  --amber-light: #FEF6E6;
  --coral:       #E8725A;
  --coral-light: #FEF0ED;
  --lime:        #4CA843;
  --lime-light:  #EEFAED;
  --sky:         #3B9FD9;
  --sky-light:   #EBF5FC;

  /* ── Gradients — the signature gesture ── */
  --arc-forward: linear-gradient(135deg, #0D9489 0%, #7B4FA0 52%, #C4237E 100%);
  --arc-soft:    linear-gradient(135deg, rgba(13,148,137,0.09) 0%, rgba(123,79,160,0.08) 52%, rgba(196,35,126,0.09) 100%);
  --arc-reverse: linear-gradient(135deg, #C4237E 0%, #7B4FA0 52%, #0D9489 100%);
  --arc-dark:    linear-gradient(135deg, #043A35 0%, #3A1F52 52%, #530D34 100%);

  /* ── Typography families ── */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ── Type scale — modular 1.25 ── */
  --fs-display-xl: 4.5rem;    /* 72 */
  --fs-display-lg: 3.5rem;    /* 56 */
  --fs-h1:         2.625rem;  /* 42 */
  --fs-h2:         2rem;      /* 32 */
  --fs-h3:         1.375rem;  /* 22 */
  --fs-body-lg:    1.125rem;  /* 18 */
  --fs-body:       1rem;      /* 16 */
  --fs-caption:    0.875rem;  /* 14 */
  --fs-mono-xs:    0.75rem;   /* 12 */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.65;

  /* ── Spacing — 8px baseline, 9 stops ── */
  --s-xs:  4px;
  --s-sm:  8px;
  --s-md:  16px;
  --s-lg:  24px;
  --s-xl:  32px;
  --s-2xl: 48px;
  --s-3xl: 64px;
  --s-4xl: 96px;
  --s-5xl: 128px;

  /* ── Radii ── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 9999px;

  /* ── Motion ── */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-epic: 600ms;
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(14,20,27,0.05), 0 1px 2px rgba(14,20,27,0.04);
  --shadow-md: 0 6px 18px rgba(14,20,27,0.07), 0 2px 6px rgba(14,20,27,0.04);
  --shadow-lg: 0 18px 48px rgba(14,20,27,0.10), 0 6px 14px rgba(14,20,27,0.05);
  --shadow-glow-teal:    0 0 32px rgba(13,148,137,0.30);
  --shadow-glow-purple:  0 0 32px rgba(123,79,160,0.35);
  --shadow-glow-magenta: 0 0 32px rgba(196,35,126,0.30);

  /* ── Layout ── */
  --max-w: 1280px;
  --gutter-desktop: 80px;
  --gutter-tablet:  40px;
  --gutter-mobile:  16px;
  --section-pad-y-desktop: 96px;
  --section-pad-y-mobile:  64px;
}