/* ============================================================
   Bodaswift — Colors & Type Tokens
   East-African motorbike-courier delivery. Fast, bold, trustworthy.
   ============================================================ */

/* -------------------- Webfonts -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =====================================================
     COLOR — Brand
     ===================================================== */

  /* Primary — "Boda Orange". The motion, the helmet, the headlight.
     Used for primary CTAs, brand moments, motion accents. */
  --boda-50:  #FFF3EC;
  --boda-100: #FFE0CE;
  --boda-200: #FFBE95;
  --boda-300: #FF9A5C;
  --boda-400: #FF7A33;
  --boda-500: #FF5A1F;   /* core brand */
  --boda-600: #E84512;
  --boda-700: #B8320A;
  --boda-800: #882505;
  --boda-900: #561600;

  /* Ink — premium neutrals. Bodaswift uses near-black, not pure black. */
  --ink-50:   #F4F4F5;
  --ink-100:  #E5E6E8;
  --ink-200:  #C9CBD0;
  --ink-300:  #9CA0A8;
  --ink-400:  #6B707A;
  --ink-500:  #474C55;
  --ink-600:  #2E323A;
  --ink-700:  #1C2026;
  --ink-800:  #14171C;
  --ink-900:  #0B0E11;   /* deepest, near-black */

  /* Paper — warm off-white. Backgrounds, surfaces. Never pure white. */
  --paper:    #FBF8F2;
  --paper-2:  #F3EFE6;   /* secondary surface */
  --paper-3:  #E8E3D5;   /* divider/inset */

  /* Spark — electric lime. "Live" signal, in-progress, success-on-dark. */
  --spark-300: #E7FF8F;
  --spark-400: #D4FF4F;   /* core accent */
  --spark-500: #B8E81A;
  --spark-600: #92BC10;

  /* Semantic */
  --success-500: #1F7A4A;   /* Acacia green */
  --success-100: #DCEEDF;
  --warning-500: #E8A500;   /* Sun amber */
  --warning-100: #FCEFC7;
  --danger-500:  #C4291A;   /* Khanga red */
  --danger-100:  #F8D6CF;
  --info-500:    #1B5BB8;
  --info-100:    #D5E2F4;

  /* =====================================================
     COLOR — Semantic mapping (use these in components)
     ===================================================== */
  --bg:           var(--paper);
  --bg-elevated: #FFFFFF;
  --bg-sunken:   var(--paper-2);
  --bg-inverse:  var(--ink-900);

  --fg:          var(--ink-900);
  --fg-muted:    var(--ink-500);
  --fg-subtle:   var(--ink-400);
  --fg-on-brand: #FFFFFF;
  --fg-on-dark:  var(--paper);

  --border:        rgba(11, 14, 17, 0.10);
  --border-strong: rgba(11, 14, 17, 0.18);
  --border-on-dark: rgba(251, 248, 242, 0.12);

  --brand:         var(--boda-500);
  --brand-hover:   var(--boda-600);
  --brand-press:   var(--boda-700);
  --brand-soft:    var(--boda-50);

  --focus-ring: 0 0 0 3px rgba(255, 90, 31, 0.32);

  /* =====================================================
     TYPE — Families
     ===================================================== */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* =====================================================
     TYPE — Scale (mobile-first; bump on .deck or .marketing)
     ===================================================== */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;

  /* =====================================================
     SPACING — 4px base
     ===================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* =====================================================
     RADII
     ===================================================== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;     /* default for inputs, buttons */
  --radius-lg:  16px;
  --radius-xl:  20px;     /* default for cards */
  --radius-2xl: 28px;     /* hero surfaces, sheets */
  --radius-pill: 9999px;

  /* =====================================================
     SHADOWS — soft, low-contrast. One "speed" elevation for FABs.
     ===================================================== */
  --shadow-xs: 0 1px 2px rgba(11, 14, 17, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 14, 17, 0.08), 0 1px 2px rgba(11, 14, 17, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(11, 14, 17, 0.10), 0 2px 4px rgba(11, 14, 17, 0.05);
  --shadow-lg: 0 18px 40px -12px rgba(11, 14, 17, 0.18), 0 4px 8px rgba(11, 14, 17, 0.06);
  --shadow-xl: 0 30px 60px -16px rgba(11, 14, 17, 0.28), 0 8px 18px rgba(11, 14, 17, 0.08);
  --shadow-speed: 0 14px 24px -10px rgba(255, 90, 31, 0.50);  /* brand-tinted lift */

  /* =====================================================
     MOTION
     ===================================================== */
  --ease-snap:  cubic-bezier(0.22, 1, 0.36, 1);    /* primary */
  --ease-glide: cubic-bezier(0.4, 0, 0.2, 1);      /* secondary */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES — drop these classes on elements
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-1, h1.display, .h-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 700;
  font-variation-settings: "opsz" 96;
}

.display-2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 700;
  font-variation-settings: "opsz" 72;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  font-variation-settings: "opsz" 48;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  font-variation-settings: "opsz" 32;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lead, p.lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: 1.45;
  font-weight: 400;
  color: var(--fg);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.55;
  font-weight: 400;
}

.body-sm, .caption {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.45;
  font-weight: 400;
  color: var(--fg-muted);
}

.micro {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: 1.35;
  font-weight: 500;
  color: var(--fg-muted);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

.numeric, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Utility — Bodaswift signature italic display ("speed-stamp") */
.speed-stamp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 96;
}