/* ═══════════════════════════════════════════════════════════════════════════
   Organic — design tokens, SnazzyGo brand theme.

   This is the only file you need to touch to re-theme the site.

   The colour ramps come from the Organic design system's own generator: one
   shared lightness scale in OKLCH, so step 500 of accent, accent-2 and neutral
   all sit at the same visual value.

   The hues are sampled from the SnazzyGo logo rather than chosen: its pixels
   cluster at OKLCH hue 240-270 (the navy wordmark dominates at 268, the icon
   blues sit at 249) with an orange secondary at 73. Accent is blue at hue 255,
   between the wordmark and the icon; accent-2 is the logo's orange at 73.
   The site was mint (158/40/155) before the logo existed — see README.md.

   To try another hue, change the three hue numbers and keep the lightness and
   chroma columns as they are — that is what keeps the ramps in step.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* — ground — */
  --color-bg: #e9edf6;
  --color-surface: #f7f9fd;
  --color-text: #161b2a;
  --color-divider: oklch(0.86 0.012 255);

  /* — accent: brand blue (h 255, c 0.095) — */
  --color-accent-100: oklch(0.955 0.024 255);
  --color-accent-200: oklch(0.905 0.040 255);
  --color-accent-300: oklch(0.825 0.059 255);
  --color-accent-400: oklch(0.735 0.081 255);
  --color-accent-500: oklch(0.615 0.095 255);
  --color-accent-600: oklch(0.535 0.095 255);
  --color-accent-700: oklch(0.455 0.090 255);
  --color-accent-800: oklch(0.345 0.076 255);
  --color-accent-900: oklch(0.245 0.059 255);
  --color-accent: var(--color-accent-500);

  /* — accent-2: brand orange (h 73, c 0.11) — */
  --color-accent-2-100: oklch(0.955 0.028 73);
  --color-accent-2-200: oklch(0.905 0.046 73);
  --color-accent-2-300: oklch(0.825 0.068 73);
  --color-accent-2-400: oklch(0.735 0.093 73);
  --color-accent-2-500: oklch(0.615 0.110 73);
  --color-accent-2-600: oklch(0.535 0.110 73);
  --color-accent-2-700: oklch(0.455 0.104 73);
  --color-accent-2-800: oklch(0.345 0.088 73);
  --color-accent-2-900: oklch(0.245 0.068 73);
  --color-accent-2: var(--color-accent-2-500);

  /* — neutral (h 255, c 0.012) — */
  --color-neutral-100: oklch(0.955 0.003 255);
  --color-neutral-200: oklch(0.905 0.005 255);
  --color-neutral-300: oklch(0.825 0.007 255);
  --color-neutral-400: oklch(0.735 0.010 255);
  --color-neutral-500: oklch(0.615 0.012 255);
  --color-neutral-600: oklch(0.535 0.012 255);
  --color-neutral-700: oklch(0.455 0.011 255);
  --color-neutral-800: oklch(0.345 0.010 255);
  --color-neutral-900: oklch(0.245 0.007 255);
  --color-neutral: var(--color-neutral-500);

  /* — readable accent —
     The canvas design paints links, card kickers and .btn-primary with
     accent-500, which on this ground measures ~3.2:1 — under WCAG AA. These
     three roles use accent-700 (~6.3:1) instead. It is the same move the
     design already makes for the Growth pricing card, which sits on
     accent-800, so the page still reads as one system. See README.md. */
  --color-accent-readable: var(--color-accent-700);
  --color-accent-readable-hover: var(--color-accent-800);
  --color-accent-readable-active: var(--color-accent-900);

  /* — type —
     The canvas design set headings in Caprasimo, which Google Fonts ships in
     one weight only and which is an inherently fat display serif. Lora 600
     carries the same serif voice at a much lighter stroke, and is already
     loaded for prices and figures, so the swap removes a font request rather
     than adding one. --font-figure stays its own token even though it now
     resolves to the same family: display and figure type remain separable by
     weight, and a later re-theme can split them again. */
  --font-heading: "Lora", Georgia, serif;
  --font-heading-weight: 600;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --font-figure: "Lora", Georgia, serif;

  /* Headings sit a shade off pure ink — same lightness as the body text, but
     carrying the brand blue instead of reading as flat black. */
  --color-heading: var(--color-accent-900);

  /* — space — */
  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  /* — radius — */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* — elevation: soft ink-tinted shadows lifted off the darkest neutral — */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #1c2233 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #1c2233 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #1c2233 22%, transparent);

  /* — page rhythm — */
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1240px;
  --section-y: clamp(40px, 6vw, 88px);
}