/* ==========================================================================
   PRIMITIVES.CSS — Design System
   Raw values only. Zero semantic meaning here.

   RULES (hard):
   ✗ Never reference these directly from components or layouts
   ✗ Never add a hex color anywhere else in the codebase
   ✓ Only tokens.css may consume primitives
   ✓ To change a brand color: update here ONLY — tokens.css updates automatically
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {

  /* ==========================================================================
     1. BRAND — Secondary (navy) + Primary (action · orange)
     Source: Concept 10 - Mix
     ========================================================================== */

  --secondary-50:   #E8EEF2;
  --secondary-100:  #C5D4DE;
  --secondary-200:  #9DB8C8;
  --secondary-300:  #6F98AF;
  --secondary-400:  #4A7E9A;
  --secondary-500:  #1F5C7A;
  --secondary-600:  #033748;
  --secondary-700:  #062535;
  --secondary-800:  #041C2C;
  --secondary-900:  #020E16;

  --primary-50:  #FEF0EB;
  --primary-100: #FCCFBE;
  --primary-200: #F9A98E;
  --primary-300: #F7845E;
  --primary-400: #F56538;
  --primary-500: #F4511E;
  --primary-600: #D63D0F;
  --primary-700: #B03009;
  --primary-800: #8A2406;
  --primary-900: #641803;

  /* ==========================================================================
     2. NEUTRAL — Cool-tinted. Never pure white. Tint toward brand hue.
     ========================================================================== */

  --gray-0:    #FFFFFF;
  --gray-50:   #FBFBFC;
  --gray-100:  #F4F5F7;
  --gray-200:  #ECEEF0;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-500:  #5B6770;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-800:  #263238;
  --gray-900:  #0A1620;

  /* ==========================================================================
     3. STATUS PALETTE
     ========================================================================== */

  /* Success — Green */
  --green-50:  #E6F6EF;
  --green-100: #C2E9D8;
  --green-200: #85D4B1;
  --green-300: #47BE8A;
  --green-400: #22A06B;
  --green-500: #1A8055;
  --green-600: #126040;
  --green-700: #0A402A;
  --green-800: #052015;
  --green-900: #021008;

  /* Error — Red */
  --red-50:   #FDECEA;
  --red-100:  #F9C5C2;
  --red-200:  #F39B96;
  --red-300:  #EC6E68;
  --red-400:  #E54D46;
  --red-500:  #D03A2E;
  --red-600:  #A82D23;
  --red-700:  #802119;
  --red-800:  #581510;
  --red-900:  #300A08;

  /* Warning — Amber */
  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;

  /* Info — Blue */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;

  /* ==========================================================================
     4. EDITORIAL ACCENT
     ========================================================================== */

  --manila: #D9C58A;

  /* ==========================================================================
     5. ALPHA SCALES
     black-* → overlays / borders on light surfaces (light mode)
     white-* → overlays / borders on dark surfaces  (dark mode)
     primary-a* → tinted hover/active states on primary (orange) elements
     secondary-a* → scrim / hero overlays on dark sections
     ========================================================================== */

  --black-0:    rgba(0,0,0,0.00);
  --black-5:    rgba(0,0,0,0.05);
  --black-10:   rgba(0,0,0,0.10);
  --black-15:   rgba(0,0,0,0.15);
  --black-20:   rgba(0,0,0,0.20);
  --black-30:   rgba(0,0,0,0.30);
  --black-40:   rgba(0,0,0,0.40);
  --black-50:   rgba(0,0,0,0.50);
  --black-60:   rgba(0,0,0,0.60);
  --black-70:   rgba(0,0,0,0.70);
  --black-80:   rgba(0,0,0,0.80);
  --black-90:   rgba(0,0,0,0.90);
  --black-100:  rgba(0,0,0,1.00);

  --white-0:    rgba(255,255,255,0.00);
  --white-5:    rgba(255,255,255,0.05);
  --white-10:   rgba(255,255,255,0.10);
  --white-15:   rgba(255,255,255,0.15);
  --white-20:   rgba(255,255,255,0.20);
  --white-30:   rgba(255,255,255,0.30);
  --white-40:   rgba(255,255,255,0.40);
  --white-50:   rgba(255,255,255,0.50);
  --white-60:   rgba(255,255,255,0.60);
  --white-70:   rgba(255,255,255,0.70);
  --white-80:   rgba(255,255,255,0.80);
  --white-90:   rgba(255,255,255,0.90);
  --white-100:  rgba(255,255,255,1.00);

  --primary-a10: rgba(244,81,30,0.10);
  --primary-a15: rgba(244,81,30,0.15);
  --primary-a20: rgba(244,81,30,0.20);
  --primary-a30: rgba(244,81,30,0.30);

  --secondary-a10:   rgba(4,28,44,0.10);
  --secondary-a20:   rgba(4,28,44,0.20);
  --secondary-a40:   rgba(4,28,44,0.40);
  --secondary-a60:   rgba(4,28,44,0.60);
  --secondary-a80:   rgba(4,28,44,0.80);

  /* ==========================================================================
     6. SPACING — multiples of 4px
     ========================================================================== */

  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   10px;
  --space-6:   12px;
  --space-7:   14px;
  --space-8:   16px;
  --space-10:  20px;
  --space-12:  24px;
  --space-16:  32px;
  --space-20:  40px;
  --space-24:  48px;
  --space-32:  64px;
  --space-40:  80px;
  --space-48:  96px;
  --space-64:  128px;
  --space-80:  160px;
  --space-96:  192px;

  /* ==========================================================================
     7. BORDER RADIUS
     ========================================================================== */

  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ==========================================================================
     8. TYPOGRAPHY — FAMILIES
     ========================================================================== */

  --font-display: 'Outfit', 'Geist', system-ui, sans-serif;
  --font-body:    'Geist', 'Cerebri Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ==========================================================================
     9. TYPOGRAPHY — SIZE SCALE
     ========================================================================== */

  --text-2xs:  10px;
  --text-xs:   13px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  28px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  48px;
  --text-6xl:  56px;
  --text-7xl:  64px;
  --text-8xl:  76px;

  /* ==========================================================================
     10. TYPOGRAPHY — WEIGHTS
     ========================================================================== */

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

  /* ==========================================================================
     11. LINE HEIGHT
     ========================================================================== */

  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   2;

  /* ==========================================================================
     12. LETTER SPACING
     ========================================================================== */

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.015em;
  --tracking-normal:   0em;
  --tracking-wide:     0.01em;
  --tracking-wider:    0.02em;
  --tracking-widest:   0.06em;

  /* ==========================================================================
     13. SHADOWS — raw values only
     ========================================================================== */

  --shadow-raw-xs:  0 1px 2px rgba(4,28,44,0.06);
  --shadow-raw-sm:  0 1px 1px rgba(0,0,0,0.04), 0 4px 8px -2px rgba(4,28,44,0.12);
  --shadow-raw-md:  0 1px 1px rgba(0,0,0,0.04), 0 14px 28px -10px rgba(4,28,44,0.22);
  --shadow-raw-lg:  0 4px 6px rgba(0,0,0,0.05), 0 24px 48px -12px rgba(4,28,44,0.28);
  --shadow-raw-xl:  0 8px 12px rgba(0,0,0,0.06), 0 40px 64px -16px rgba(4,28,44,0.32);

  /* ==========================================================================
     14. MOTION — raw values only
     ========================================================================== */

  --dur-instant: 0ms;
  --dur-fast:    100ms;
  --dur-base:    200ms;
  --dur-slow:    350ms;
  --dur-xslow:   500ms;
  --dur-lazy:    800ms;

  --ease-linear:   linear;
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in:       cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.32, 0.72, 0, 1);

  /* ==========================================================================
     15. BREAKPOINTS — reference only (cannot be used in var())
     Use raw values directly inside @media queries.
     480px  → large phones
     768px  → tablets
     1024px → laptops / desktop
     1280px → wide desktop
     1536px → ultrawide
     ========================================================================== */

}