/* ============================================================
   Zoomoff Design System — Color, Type, Spacing, Radii, Shadows
   Deep purple e-hailing brand. All tokens live here.
   ============================================================ */

/* -------- Fonts (Google Fonts — see README for substitution notes) -------- */
@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@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     COLOR — BRAND
     Sampled directly from the Zoomoff wordmark (#5f2187 top → #360b5c bottom).
     Deep violet, never bluish. --zo-purple-700 is the primary CTA / brand color.
     ============================================================ */
  --zo-purple-950: #130025;   /* deepest accent, sampled from logo edge */
  --zo-purple-900: #240847;   /* deep brand surface */
  --zo-purple-800: #360b5c;   /* logo BOTTOM (gradient end) */
  --zo-purple-700: #5f2187;   /* logo TOP (gradient start) — PRIMARY CTA */
  --zo-purple-600: #7a2eaa;   /* hover, energetic accent */
  --zo-purple-500: #9b56c7;
  --zo-purple-400: #b785dd;
  --zo-purple-300: #d2b0eb;
  --zo-purple-200: #e7d4f3;
  --zo-purple-100: #f4e9fa;
  --zo-purple-50:  #faf5fd;   /* tinted app background */

  /* ============================================================
     COLOR — NEUTRALS
     Slightly cool, with a hint of purple — never pure gray.
     ============================================================ */
  --zo-ink-950: #0d0a18;       /* primary foreground */
  --zo-ink-900: #16121f;
  --zo-ink-800: #211c2d;
  --zo-ink-700: #383044;
  --zo-ink-600: #524863;
  --zo-ink-500: #6f6582;       /* muted body */
  --zo-ink-400: #948aa6;
  --zo-ink-300: #b8b0c7;
  --zo-ink-200: #d6d0e0;
  --zo-ink-150: #e3dee9;
  --zo-ink-100: #ecebf1;
  --zo-ink-50:  #f6f5f9;
  --zo-white:   #ffffff;

  /* ============================================================
     COLOR — SEMANTIC
     ============================================================ */
  --zo-success-700: #10864c;
  --zo-success-500: #1faf65;
  --zo-success-100: #d4f5e3;

  --zo-warn-700:    #b15c00;
  --zo-warn-500:    #f59e0b;
  --zo-warn-100:    #fdebc9;

  --zo-danger-700:  #b91c39;
  --zo-danger-500:  #e5484d;
  --zo-danger-100:  #fde0e3;

  --zo-info-700:    #1a59c2;
  --zo-info-500:    #3a82ff;
  --zo-info-100:    #d9e6ff;

  /* ============================================================
     COLOR — ROLES (semantic application)
     Use these in components — they re-point easily for dark mode.
     ============================================================ */
  --zo-bg:           var(--zo-purple-50);     /* app background — tinted */
  --zo-bg-elev:     var(--zo-white);          /* card / sheet surface */
  --zo-bg-inverse:  var(--zo-purple-900);     /* dark branded surfaces */
  --zo-bg-muted:    var(--zo-ink-50);         /* subdued zones */

  --zo-fg:          var(--zo-ink-950);        /* primary text */
  --zo-fg-muted:    var(--zo-ink-500);        /* secondary text */
  --zo-fg-subtle:   var(--zo-ink-400);        /* tertiary, captions */
  --zo-fg-inverse:  var(--zo-white);
  --zo-fg-brand:    var(--zo-purple-700);
  --zo-fg-on-brand: var(--zo-white);

  --zo-border:        var(--zo-ink-150);      /* default hairline */
  --zo-border-strong: var(--zo-ink-200);
  --zo-border-brand:  var(--zo-purple-200);
  --zo-divider:       var(--zo-ink-100);

  --zo-overlay:     rgba(13, 10, 24, 0.55);   /* modal scrim */
  --zo-overlay-brand: rgba(37, 16, 79, 0.78); /* branded scrim */

  /* Brand gradients — direct from the logo. Used sparingly, never as default bg. */
  --zo-grad-brand:    linear-gradient(180deg, #5f2187 0%, #360b5c 100%);
  --zo-grad-brand-h:  linear-gradient(135deg, #5f2187 0%, #360b5c 60%, #240847 100%);
  --zo-grad-soft:     linear-gradient(180deg, #faf5fd 0%, #ffffff 100%);

  /* ============================================================
     TYPOGRAPHY
     Display: Bricolage Grotesque (variable, characterful)
     Body:    Manrope (geometric, very legible at small sizes)
     Mono:    JetBrains Mono
     ============================================================ */
  --zo-font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --zo-font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zo-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — modular ratio 1.2, optimized for mobile-first */
  --zo-text-xs:    11px;
  --zo-text-sm:    13px;
  --zo-text-base:  15px;   /* body default */
  --zo-text-md:    17px;
  --zo-text-lg:    20px;
  --zo-text-xl:    24px;
  --zo-text-2xl:   30px;
  --zo-text-3xl:   38px;
  --zo-text-4xl:   48px;
  --zo-text-5xl:   60px;
  --zo-text-6xl:   76px;

  --zo-leading-tight:   1.1;
  --zo-leading-snug:    1.25;
  --zo-leading-normal:  1.45;
  --zo-leading-relaxed: 1.6;

  --zo-tracking-tighter: -0.03em;  /* big display */
  --zo-tracking-tight:   -0.015em;
  --zo-tracking-normal:  0;
  --zo-tracking-wide:    0.04em;
  --zo-tracking-eyebrow: 0.12em;   /* uppercase labels */

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

  /* ============================================================
     RADII — generous on mobile sheets, tight on inline elements
     ============================================================ */
  --zo-radius-xs:    4px;   /* badges, chips */
  --zo-radius-sm:    8px;   /* small buttons, inputs in dense rows */
  --zo-radius-md:    12px;  /* default input, secondary card */
  --zo-radius-lg:    16px;  /* primary card */
  --zo-radius-xl:    20px;  /* hero card */
  --zo-radius-2xl:   28px;  /* bottom sheets, modals */
  --zo-radius-pill:  999px;
  --zo-radius-full:  9999px;

  /* ============================================================
     SHADOWS — purple-tinted, soft, never harsh
     ============================================================ */
  --zo-shadow-xs: 0 1px 2px rgba(54, 11, 92, 0.06);
  --zo-shadow-sm: 0 2px 6px rgba(54, 11, 92, 0.07), 0 1px 2px rgba(54, 11, 92, 0.04);
  --zo-shadow-md: 0 8px 20px -6px rgba(54, 11, 92, 0.16), 0 2px 6px rgba(54, 11, 92, 0.06);
  --zo-shadow-lg: 0 18px 40px -12px rgba(54, 11, 92, 0.24), 0 4px 12px rgba(54, 11, 92, 0.08);
  --zo-shadow-xl: 0 30px 60px -20px rgba(54, 11, 92, 0.32);
  --zo-shadow-brand: 0 12px 30px -8px rgba(95, 33, 135, 0.50);
  --zo-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* ============================================================
     MOTION
     ============================================================ */
  --zo-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --zo-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --zo-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --zo-dur-fast:    140ms;
  --zo-dur-base:    220ms;
  --zo-dur-slow:    380ms;

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --zo-z-base:     1;
  --zo-z-nav:      10;
  --zo-z-sheet:    50;
  --zo-z-modal:    100;
  --zo-z-toast:    200;
}

/* ============================================================
   BASE — apply on document body
   ============================================================ */
.zo-root,
body.zo {
  font-family: var(--zo-font-body);
  font-size: var(--zo-text-base);
  line-height: var(--zo-leading-normal);
  color: var(--zo-fg);
  background: var(--zo-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* ============================================================
   SEMANTIC TYPE CLASSES — use these directly in JSX/HTML
   ============================================================ */
.zo-display-xl {
  font-family: var(--zo-font-display);
  font-size: var(--zo-text-6xl);
  line-height: var(--zo-leading-tight);
  letter-spacing: var(--zo-tracking-tighter);
  font-weight: 700;
}
.zo-display-lg {
  font-family: var(--zo-font-display);
  font-size: var(--zo-text-5xl);
  line-height: var(--zo-leading-tight);
  letter-spacing: var(--zo-tracking-tighter);
  font-weight: 700;
}
.zo-display-md {
  font-family: var(--zo-font-display);
  font-size: var(--zo-text-4xl);
  line-height: var(--zo-leading-tight);
  letter-spacing: var(--zo-tracking-tight);
  font-weight: 700;
}
.zo-h1 {
  font-family: var(--zo-font-display);
  font-size: var(--zo-text-3xl);
  line-height: var(--zo-leading-snug);
  letter-spacing: var(--zo-tracking-tight);
  font-weight: 700;
}
.zo-h2 {
  font-family: var(--zo-font-display);
  font-size: var(--zo-text-2xl);
  line-height: var(--zo-leading-snug);
  letter-spacing: var(--zo-tracking-tight);
  font-weight: 700;
}
.zo-h3 {
  font-family: var(--zo-font-body);
  font-size: var(--zo-text-xl);
  line-height: var(--zo-leading-snug);
  font-weight: 700;
}
.zo-h4 {
  font-family: var(--zo-font-body);
  font-size: var(--zo-text-lg);
  line-height: var(--zo-leading-snug);
  font-weight: 700;
}
.zo-body-lg {
  font-size: var(--zo-text-md);
  line-height: var(--zo-leading-relaxed);
}
.zo-body {
  font-size: var(--zo-text-base);
  line-height: var(--zo-leading-normal);
}
.zo-body-sm {
  font-size: var(--zo-text-sm);
  line-height: var(--zo-leading-normal);
}
.zo-caption {
  font-size: var(--zo-text-xs);
  line-height: var(--zo-leading-normal);
  color: var(--zo-fg-muted);
}
.zo-eyebrow {
  font-size: var(--zo-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--zo-tracking-eyebrow);
  color: var(--zo-fg-muted);
}
.zo-mono {
  font-family: var(--zo-font-mono);
  font-size: var(--zo-text-sm);
}
.zo-fare {
  /* Tabular numerals for prices — critical for ride/fare displays */
  font-family: var(--zo-font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}