/* ============================================================
   AUTOMATIC PLATFORM — CSS DESIGN TOKENS
   Single source of truth for all design decisions
   ============================================================ */

:root {

  /* ── Brand Colors ───────────────────────────────────────── */
  --ap-black:         #0A0A0A;
  --ap-dark:          #111418;
  --ap-navy:          #0D1B2A;
  --ap-charcoal:      #1E2328;

  /* Primary CTA — Gold */
  --ap-orange:        #F0A500;
  --ap-orange-light:  #FAC040;
  --ap-orange-dark:   #C88000;

  /* Accents */
  --ap-gold:          #F0A500;
  --ap-silver:        #9BAAB8;

  /* Feedback */
  --ap-success:       #16A34A;
  --ap-warning:       #F59E0B;
  --ap-error:         #DC2626;

  /* ── Neutral Scale ──────────────────────────────────────── */
  --n-50:   #F8F9FA;
  --n-100:  #F1F3F5;
  --n-200:  #E9ECEF;
  --n-300:  #DEE2E6;
  --n-400:  #CED4DA;
  --n-500:  #ADB5BD;
  --n-600:  #6C757D;
  --n-700:  #495057;
  --n-800:  #343A40;
  --n-900:  #212529;

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-2xs: 0.625rem;   /* 10px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base:1rem;       /* 16px */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4.5rem;     /* 72px */
  --text-8xl: 6rem;       /* 96px */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── Spacing ────────────────────────────────────────────── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-7:   1.75rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-14:  3.5rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max:     1440px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --header-total-h:    128px;

  /* ── Border & Radius ────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius:      4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────  */
  --shadow-xs:      0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:         0 4px 12px rgba(0,0,0,0.10);
  --shadow-md:      0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg:      0 16px 48px rgba(0,0,0,0.16);
  --shadow-product: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-product-hover: 0 12px 36px rgba(0,0,0,0.15);
  --shadow-dropdown:0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-cta:     0 4px 16px rgba(240,165,0,0.35);
  --shadow-cta-hover:0 8px 24px rgba(240,165,0,0.45);

  /* ── Transitions ─────────────────────────────────────────  */
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:        120ms;
  --t:             200ms;
  --t-slow:        320ms;

  /* ── Z-Index Stack ──────────────────────────────────────── */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-sticky:  200;
  --z-overlay: 400;
  --z-drawer:  500;
  --z-modal:   600;
  --z-toast:   700;
}