/* Draknar Webworks: "One Build, One Day" design tokens.
   The page passes through one Arizona day: dawn in the hero, work through
   the afternoon, then one switch to dusk at Pricing, and the evening runs
   on ink to the footer. Every colour is OKLch. The only red is the logo's. */

:root {
  /* Daylight surfaces */
  --bg: oklch(97.6% 0.009 84);
  --surface: oklch(99.3% 0.004 88);
  --surface-2: oklch(94.6% 0.014 82);
  --fg: oklch(21% 0.012 58);
  --muted: oklch(42% 0.02 58);
  --border: oklch(86.5% 0.015 78);
  --border-strong: oklch(56% 0.02 70); /* 3.5:1 on --bg: field edges, chips, ghost buttons (WCAG 1.4.11) */

  /* Dusk surfaces (Pricing to the footer) */
  --ink: oklch(18.5% 0.014 62);
  --ink-2: oklch(23.5% 0.016 62);
  --ink-3: oklch(29% 0.018 62);
  --on-ink: oklch(96.5% 0.01 86);
  --on-ink-muted: oklch(79% 0.016 82);
  --ink-border: oklch(100% 0 0 / 0.12);
  --ink-border-strong: oklch(100% 0 0 / 0.42); /* 3.4:1 on --ink-2: ghost buttons on dusk */

  /* The one accent: the logo's red, darkened until white text passes AA */
  --accent: oklch(54.8% 0.188 22.2);
  --accent-hover: oklch(47% 0.185 22.2);
  --accent-soft: oklch(54.8% 0.188 22.2 / 0.1);
  --on-accent: oklch(99% 0.004 88);

  /* Sky poster (hero only, never UI) */
  --sky-zenith: oklch(88% 0.045 250);
  --sky-mid: oklch(95% 0.03 85);
  --sky-horizon: oklch(82% 0.13 58);
  --ridge-far: oklch(90% 0.03 76);
  --ridge-near: oklch(94.6% 0.014 82);

  /* Semantic */
  --ok: oklch(46% 0.15 150);
  --ok-on-ink: oklch(82% 0.17 152);
  --focus: oklch(50% 0.2 255);
  --focus-on-ink: oklch(86% 0.14 92);

  /* Type: Bricolage Grotesque (display, 600/700/800) over Source Sans 3 (body, 400/600/700). Both self-hosted. */
  --font-display: "Bricolage Grotesque", "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-h3: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --text-h2: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  --text-h1: clamp(2.75rem, 1.4rem + 5vw, 5.2rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Shape rule: actions (buttons, inputs) are 8px; filters and toggles (chips,
     the billing switch, the motion button, badges, city tags) are pills;
     containers (cards, phones) are 16 to 34px. */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-phone: 34px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px oklch(20% 0.01 60 / 0.06), 0 6px 20px oklch(20% 0.01 60 / 0.06);
  --shadow-2: 0 2px 6px oklch(20% 0.01 60 / 0.08), 0 24px 60px oklch(20% 0.01 60 / 0.14);
  --shadow-phone: 0 40px 80px oklch(20% 0.02 60 / 0.28), 0 12px 24px oklch(20% 0.02 60 / 0.14);

  --wrap: 1180px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}