/* ============================================================
   AI Speedforce — Design tokens
   Single source of truth for color, type, spacing, etc.
   ============================================================ */
:root {
  /* Brand palette */
  --c-brand-50:  #eef2ff;
  --c-brand-100: #e0e7ff;
  --c-brand-200: #c7d2fe;
  --c-brand-400: #818cf8;
  --c-brand-500: #6366f1;
  --c-brand-600: #4f46e5;   /* primary */
  --c-brand-700: #4338ca;
  --c-brand-800: #3730a3;

  --c-accent-400: #22d3ee;
  --c-accent-500: #06b6d4;  /* electric cyan accent */
  --c-accent-600: #0891b2;

  --c-magenta-500: #d946ef; /* highlight for gradients */

  /* Ink & surfaces */
  --c-ink:        #0b1020;  /* headings / near-black */
  --c-body:       #384056;  /* body text */
  --c-muted:      #6b7280;  /* secondary text */
  --c-line:       #e6e8ef;  /* hairlines / borders */
  --c-surface:    #ffffff;
  --c-surface-2:  #f7f8fc;  /* subtle section tint */
  --c-surface-3:  #eef1f8;
  --c-night:      #0b1020;  /* dark section bg */
  --c-night-2:    #131a33;

  /* Semantic */
  --c-focus:   #06b6d4;
  --c-success: #16a34a;
  --c-danger:  #dc2626;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Sora", var(--font-sans);

  --fs-xs:   0.8125rem;   /* 13 */
  --fs-sm:   0.9375rem;   /* 15 */
  --fs-base: 1.0625rem;   /* 17 */
  --fs-lg:   1.1875rem;   /* 19 */
  --fs-xl:   1.375rem;    /* 22 */
  --fs-2xl:  1.75rem;     /* 28 */
  --fs-3xl:  2.25rem;     /* 36 */
  --fs-4xl:  3rem;        /* 48 */
  --fs-5xl:  3.75rem;     /* 60 */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-normal: 1.65;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Radius / shadow / layout */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11,16,32,.06), 0 1px 3px rgba(11,16,32,.10);
  --shadow:    0 8px 24px rgba(11,16,32,.10);
  --shadow-lg: 0 24px 60px rgba(11,16,32,.16);
  --shadow-brand: 0 16px 40px rgba(79,70,229,.28);

  --container: 1200px;
  --container-narrow: 820px;

  --z-header: 100;
  --z-menu:   200;
  --z-drawer: 300;

  --header-h: 72px;

  --gradient-brand: linear-gradient(100deg, var(--c-brand-600), var(--c-accent-500) 70%, var(--c-magenta-500));
}