/* ============================================================
   MRW MOBILITY V2 — DESIGN TOKENS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&family=Saira+Condensed:wght@700;800&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  /* Core */
  --ink:         #1A1714;
  --ink-soft:    #2A2520;
  --paper:       #F8F6F2;
  --sand:        #EDE9E3;
  --sand-dk:     #D8D2C8;

  /* Neutral scale */
  --gray-800: #2E2B28;
  --gray-700: #47433F;
  --gray-600: #6A655F;
  --gray-500: #8E8882;
  --gray-400: #B0AAA3;
  --gray-300: #CCC7BF;
  --gray-200: #E0DDD7;
  --gray-100: #EDE9E3;
  --gray-50:  #F8F6F2;

  /* Turquoise — trust / action */
  --accent:      #13B3AC;
  --accent-dk:   #0B6E69;
  --accent-lt:   #34D0C8;
  --accent-tint: #ECFBFA;
  --on-accent:   #06302E;

  /* Amber — warmth / human moments */
  --warm:        #C4832A;
  --warm-dk:     #8B5A18;
  --warm-lt:     #DFA043;
  --warm-tint:   #FBF3E8;
  --on-warm:     #3D2205;

  /* Semantic */
  --success: #1B9C55; --success-tint: #E6F4EC;
  --warning: #E08A12; --warning-tint: #FBF0DC;
  --danger:  #DD3A2E; --danger-tint:  #FBE7E5;

  /* Semantic surface/text */
  --bg:       var(--paper);
  --surface:  #FFFFFF;
  --fg1:      var(--ink);
  --fg2:      var(--gray-600);
  --fg3:      var(--gray-500);
  --border:   var(--gray-200);
  --border-strong: var(--gray-300);
  --link:     var(--accent-dk);

  /* Fonts */
  --font-d: 'Saira', system-ui, sans-serif;
  --font-c: 'Saira Condensed', sans-serif;
  --font-b: 'Archivo', system-ui, sans-serif;
  --font-m: 'Spline Sans Mono', ui-monospace, monospace;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --track-tight: -0.02em;
  --track-caps:  0.12em;

  /* Spacing */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-8:  32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* Radii */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(26,23,20,.07), 0 2px 8px rgba(26,23,20,.06);
  --shadow-md: 0 4px 14px rgba(26,23,20,.09), 0 2px 4px rgba(26,23,20,.05);
  --shadow-lg: 0 12px 32px rgba(26,23,20,.13), 0 4px 10px rgba(26,23,20,.06);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(19,179,172,.35);

  /* Motion */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-cin:  cubic-bezier(.16,1,.3,1);   /* cinematic: fast-out, long settle */
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
  --dur-reveal:900ms;                      /* scroll reveal duration */

  /* Layout */
  --max-w: 1200px;
  --nav-h: 68px;
}