/* ============================================================
   TILLFORGE — DESIGN TOKENS
   A Till Africa Company. Single source of truth.
   ============================================================ */

:root {
  /* --- Brand Palette --- */
  --clr-red:         #E94560;
  --clr-red-faint:   rgba(233, 69, 96, 0.08);
  --clr-red-dim:     rgba(233, 69, 96, 0.18);
  --clr-red-glow:    rgba(233, 69, 96, 0.35);
  --clr-red-bright:  #FF5577;

  /* Backgrounds — near-black layered system */
  --clr-bg:          #06060A;
  --clr-surface:     #0D0D14;
  --clr-surface-2:   #13131E;
  --clr-surface-3:   #1A1A28;
  --clr-navy:        #1A1A28;        /* compat alias */
  --clr-navy-mid:    #13131E;        /* compat alias */
  --clr-navy-deep:   #0D0D14;        /* compat alias */
  --clr-black:       #06060A;        /* compat alias */

  /* Text */
  --clr-white:       #F5F5F7;
  --clr-white-dim:   rgba(245, 245, 247, 0.65);
  --clr-slate:       #4A4A60;
  --clr-slate-light: #7070A0;

  /* Accents (kept for backward-compat pages; prefer red for TillForge) */
  --clr-cyan:        #E94560;        /* remapped → brand red */
  --clr-cyan-faint:  rgba(233, 69, 96, 0.08);
  --clr-cyan-dim:    rgba(233, 69, 96, 0.18);
  --clr-cyan-glow:   rgba(233, 69, 96, 0.35);
  --clr-amber:       #F4A261;
  --clr-amber-faint: rgba(244, 162, 97, 0.12);

  /* --- Typography --- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Fluid type: clamp(mobile, fluid, desktop) */
  --type-h1:   clamp(2.4rem, 6vw + 0.5rem, 4rem);
  --type-h2:   clamp(1.7rem, 3vw + 0.5rem, 2.5rem);
  --type-h3:   clamp(1.15rem, 1.5vw + 0.4rem, 1.4rem);
  --type-lead: clamp(1rem, 1.2vw + 0.3rem, 1.125rem);
  --type-sm:   0.875rem;
  --type-xs:   0.75rem;

  --leading-tight: 1.1;
  --leading-snug:  1.35;
  --leading-body:  1.7;

  /* --- Spacing scale (4px base) --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* --- Layout --- */
  --max-w:       1240px;
  --max-w-prose: 720px;
  --nav-h:       72px;
  --section-gap: clamp(5rem, 9vw, 9rem);
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);

  /* --- Borders & Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --border-subtle: 1px solid rgba(255, 255, 255, 0.05);
  --border-dim:    1px solid rgba(255, 255, 255, 0.1);
  --border-red:    1px solid rgba(233, 69, 96, 0.3);
  --border-cyan:   1px solid rgba(233, 69, 96, 0.3); /* compat */
  --border-amber:  1px solid rgba(244, 162, 97, 0.3);

  /* --- Shadows --- */
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.7);
  --shadow-red:   0 0 40px rgba(233, 69, 96, 0.2);
  --shadow-cyan:  0 0 40px rgba(233, 69, 96, 0.15); /* compat */
  --shadow-card:  0 2px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.03);

  /* --- Transitions --- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-lazy: 600ms;

  /* --- Z-index layers --- */
  --z-base:  0;
  --z-raise: 10;
  --z-float: 50;
  --z-nav:   100;
  --z-modal: 200;
  --z-toast: 300;
}