/* ============================================================
   ADD BLITZ — DESIGN TOKENS
   Layer 0: All CSS Custom Properties (Single Source of Truth)
   ============================================================ */

:root {

  /* ─────────────────────────────────────
     COLOR: BACKGROUNDS
  ───────────────────────────────────── */
  --bg-primary:       #F7F5EF;
  --bg-secondary:     #ECE7DC;
  --bg-dark:          #111315;
  --bg-deep:          #181A1D;
  --bg-dark-card:     #1C1F23;
  --bg-dark-elevated: #242830;
  --bg-dark-border:   #2E3238;

  /* ─────────────────────────────────────
     COLOR: TEXT
  ───────────────────────────────────── */
  --text-primary:        #101010;
  --text-secondary:      #4A4641;
  --text-muted:          #7A736A;
  --text-dark-primary:   #F5F2EA;
  --text-dark-secondary: #B8B2A7;
  --text-dark-muted:     #6B6660;

  /* ─────────────────────────────────────
     COLOR: PRIMARY ACCENT — BLITZ AMBER
  ───────────────────────────────────── */
  --amber:         #FF7A1A;
  --amber-hover:   #E86C0D;
  --amber-active:  #D45F05;
  --amber-muted:   #FFB07A;
  --amber-subtle:  rgba(255, 122, 26, 0.10);
  --amber-glow:    0 8px 40px rgba(255, 122, 26, 0.32);
  --amber-glow-sm: 0 4px 20px rgba(255, 122, 26, 0.22);

  /* ─────────────────────────────────────
     COLOR: SECONDARY ACCENT — ELECTRIC BLUE
     (Use only for: AI, CRM, data, technical labels)
  ───────────────────────────────────── */
  --blue:        #1677FF;
  --blue-hover:  #0D65E8;
  --blue-muted:  #5BA3FF;
  --blue-subtle: rgba(22, 119, 255, 0.10);
  --blue-glow:   0 8px 32px rgba(22, 119, 255, 0.28);

  /* ─────────────────────────────────────
     COLOR: ATMOSPHERIC — STORM BLUE GREY
     (Use for: backgrounds, dividers, atmospheric UI)
  ───────────────────────────────────── */
  --storm:        #6F8FA6;
  --storm-subtle: rgba(111, 143, 166, 0.12);
  --storm-border: rgba(111, 143, 166, 0.20);

  /* ─────────────────────────────────────
     COLOR: BORDERS & DIVIDERS
  ───────────────────────────────────── */
  --border:           #D8D2C5;
  --border-light:     #E8E3DA;
  --border-dark:      rgba(255, 255, 255, 0.07);
  --border-dark-strong: rgba(255, 255, 255, 0.12);

  /* ─────────────────────────────────────
     COLOR: FUNCTIONAL
  ───────────────────────────────────── */
  --success:  #22C55E;
  --warning:  #F59E0B;
  --error:    #EF4444;
  --info:     var(--blue);

  /* ─────────────────────────────────────
     TYPOGRAPHY: FONT FAMILIES
  ───────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Inter Tight', -apple-system, sans-serif;
  --font-body:    'Inter', 'Manrope', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ─────────────────────────────────────
     TYPOGRAPHY: SCALE
  ───────────────────────────────────── */
  --text-xs:  0.625rem;   /* 10px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3.25rem;    /* 52px */
  --text-5xl:  4.25rem;    /* 68px */
  --text-6xl:  5.5rem;     /* 88px */
  --text-7xl:  7rem;       /* 112px */
  --text-8xl:  9rem;       /* 144px */

  /* ─────────────────────────────────────
     TYPOGRAPHY: WEIGHTS
  ───────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ─────────────────────────────────────
     TYPOGRAPHY: LINE HEIGHTS
  ───────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.9;

  /* ─────────────────────────────────────
     TYPOGRAPHY: LETTER SPACING
  ───────────────────────────────────── */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;

  /* ─────────────────────────────────────
     SPACING SCALE
  ───────────────────────────────────── */
  --sp-1:   0.25rem;    /*  4px */
  --sp-2:   0.5rem;     /*  8px */
  --sp-3:   0.75rem;    /* 12px */
  --sp-4:   1rem;       /* 16px */
  --sp-5:   1.25rem;    /* 20px */
  --sp-6:   1.5rem;     /* 24px */
  --sp-8:   2rem;       /* 32px */
  --sp-10:  2.5rem;     /* 40px */
  --sp-12:  3rem;       /* 48px */
  --sp-16:  4rem;       /* 64px */
  --sp-20:  5rem;       /* 80px */
  --sp-24:  6rem;       /* 96px */
  --sp-28:  7rem;       /* 112px */
  --sp-32:  8rem;       /* 128px */
  --sp-40:  10rem;      /* 160px */
  --sp-48:  12rem;      /* 192px */
  --sp-56:  14rem;      /* 224px */
  --sp-64:  16rem;      /* 256px */

  /* ─────────────────────────────────────
     SECTION RHYTHM
  ───────────────────────────────────── */
  --section-sm:  var(--sp-16);   /*  64px */
  --section-md:  var(--sp-24);   /*  96px */
  --section-lg:  var(--sp-32);   /* 128px */
  --section-xl:  var(--sp-40);   /* 160px */
  --section-xl: var(--sp-56);   /* 224px */

  /* ─────────────────────────────────────
     LAYOUT
  ───────────────────────────────────── */
  --container-padding-x: clamp(1.25rem, 5vw, 3rem);
  --container-max:  1440px;
  --container-wide: 1280px;
  --container-text: 720px;
  --container-narrow: 560px;
  --nav-height: 72px;

  /* ─────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* ─────────────────────────────────────
     SHADOWS (LIGHT)
  ───────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.11), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 70px rgba(0,0,0,0.13), 0 8px 24px rgba(0,0,0,0.06);

  /* ─────────────────────────────────────
     EASING & DURATION
  ───────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-expo:   cubic-bezier(0.19, 1, 0.22, 1);

  --dur-fast:   150ms;
  --dur-normal: 280ms;
  --dur-slow:   500ms;
  --dur-slower: 700ms;
  --dur-cinema: 1000ms;

  /* ─────────────────────────────────────
     Z-INDEX SCALE
  ───────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-float:    50;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-cursor:   9999;
}