/**
 * Zovantro design tokens.
 * Every color, spacing, radius, shadow and motion value used anywhere in
 * the app should come from a variable defined here — never hardcode a
 * raw hex/px value in a component or page stylesheet.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  color-scheme: light;

  /* ---- Brand ---- (sampled from the Zovantro shield/pin logo) */
  --color-primary: #069742;
  --color-primary-hover: #0B3B24;
  --color-primary-active: #0B3B24;
  --color-primary-dark: #0B3B24;
  --color-primary-soft: #E4F5EA;
  --color-on-primary: #FFFFFF;

  --color-gold: #FCAD00;
  --color-gold-soft: #FFF3DC;
  --color-accent: #FCAD00;
  --color-accent-soft: #FFF3DC;
  --color-amber: #FCAD00;
  --color-amber-soft: #FFF3DC;

  /* ---- Category coding: every driver/transport surface is green-toned,
     every appliance/repair surface is gold-toned, sitewide. ---- */
  --color-driver: var(--color-primary);
  --color-driver-soft: var(--color-primary-soft);
  --color-appliance: var(--color-gold);
  --color-appliance-soft: var(--color-gold-soft);

  /* ---- Surfaces & text (light) ---- */
  --color-bg: #FAFAF8;
  --color-paper: #FAFAF8;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F2EE;
  --color-border: #E4E6E1;
  --color-border-strong: #D2D5CD;

  --color-text: #14181A;
  --color-text-secondary: #5B6460;
  --color-text-muted: #8A9490;
  --color-text-on-primary: #FFFFFF;

  /* ---- Semantic ---- (success reuses brand green — no second green) */
  --color-success: #069742;
  --color-success-soft: #E4F5EA;
  --color-error: #D64545;
  --color-error-soft: #FBEAEA;
  --color-warning: #FCAD00;
  --color-warning-soft: #FFF3DC;
  --color-info: #3B82F6;
  --color-info-soft: #EAF2FE;

  /* ---- Typography ---- */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 34px;

  /* ---- Spacing (4px rhythm) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Shadows (tinted, soft) ---- */
  --shadow-sm: 0 1px 2px rgba(21, 22, 30, 0.04), 0 1px 1px rgba(21, 22, 30, 0.03);
  --shadow-md: 0 6px 16px rgba(21, 22, 30, 0.07), 0 2px 4px rgba(21, 22, 30, 0.04);
  --shadow-lg: 0 16px 40px rgba(21, 22, 30, 0.12), 0 4px 10px rgba(21, 22, 30, 0.05);
  --shadow-sheet: 0 -12px 32px rgba(21, 22, 30, 0.14);
  --shadow-primary: 0 10px 24px rgba(6, 151, 66, 0.28);
  --shadow-accent: 0 10px 24px rgba(252, 173, 0, 0.32);

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-normal: 400ms;
  --duration-long: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Depth & glass (aesthetic upgrade) ---- */
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  --shadow-green: 0 10px 24px rgba(16, 185, 129, 0.25);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);

  /* ---- Aesthetic accent palette (used for mesh blobs, gradients) ---- */
  --zov-green: #10b981;
  --zov-teal: #14b8a6;
  --zov-orange: #f59e0b;
  --zov-dark: #0f172a;

  /* ---- Section accent palette ----
     Bold color-blocking for marketing sections ONLY — supplements the
     locked brand green/gold (never used for booking CTAs, category
     coding, or anything the brand palette already owns). --color-info(-soft)
     already covered "trust blue"; the rest are new. */
  --color-info-dark: #2563EB;
  --color-teal-soft: #E3FBF6;
  --color-teal-dark: #0D9488;
  --color-violet: #7C3AED;
  --color-violet-soft: #F1EAFE;
  --color-sky: #0EA5E9;
  --color-sky-soft: #E5F6FE;
  --color-cyan: #06B6D4;
  --color-cyan-soft: #E1F8FA;

  /* Deepest gradient anchor for dark marketing sections (hero, final CTA) —
     derived from the locked brand greens, not a separate palette. */
  --color-forest-950: #052E1F;

  /* Translucent "glass" pill/card tokens for content sitting on dark
     section backgrounds (--glass-bg/--glass-border above assume a light
     backdrop and read as near-invisible on dark). */
  --glass-dark-bg: rgba(255, 255, 255, 0.10);
  --glass-dark-bg-strong: rgba(255, 255, 255, 0.16);
  --glass-dark-border: rgba(255, 255, 255, 0.22);

  /* ---- Layout ---- */
  --app-max-width: 480px;
  --header-height: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* ---- Z-index scale ---- */
  --z-sticky: 10;
  --z-overlay: 40;
  --z-sheet: 50;
  --z-modal: 60;
  --z-toast: 100;
  --z-preloader: 200;
}

/* Dark mode intentionally removed — the app always renders the light
   palette from :root regardless of OS/browser color scheme. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

*, *::before, *::after { box-sizing: border-box; }

* { scroll-margin-top: 72px; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--color-text);
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

img { max-width: 100%; display: block; }

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

::selection {
  background: var(--color-primary-soft);
  color: var(--color-primary-active);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}