/* GENERATED from src/styles/tokens.css by `npm run tokens:landing`.
   Do not edit: change the source and regenerate. */

/* ---------------------------------------------------------------------------
   Design tokens — Naiiman

   Warm cream paper, forest green ink-adjacent accent, clay and brass as the
   two secondary voices. Colours are authored in OKLCH so light and dark stay
   perceptually matched.

   The one characteristic move: in light mode `--line-strong` IS `--ink`. The
   sharp 1.5px near-black border on customer-facing cards, inputs, buttons and
   category tiles is what makes the system read as printed rather than as a
   dashboard. The consoles deliberately stay on the quiet 1px `--line`.

   ONE SOURCE FOR TWO SITES. The app imports this file from globals.css. The
   landing site (landing/, a static Cloudflare deploy that cannot reach src/)
   gets a generated copy, landing/public/tokens.css, written by
   `npm run tokens:landing`. The copy is identical except that the `.dark`
   block becomes a prefers-color-scheme query, because the landing site has no
   theme toggle. A unit test fails if the copy falls behind, so the two sites
   cannot drift apart again: change values here, then regenerate.
--------------------------------------------------------------------------- */

:root {
  --canvas: oklch(0.965 0.017 78);
  --surface: oklch(0.99 0.01 80);
  --surface-2: oklch(0.945 0.018 78);
  --surface-3: oklch(0.905 0.018 76);

  --ink: oklch(0.20 0.025 55);
  --ink-muted: oklch(0.46 0.02 60);
  /* 3.55:1 on surface — under the 4.5:1 body text needs. Icons, disabled
     controls and placeholders only; hints and fine print take --ink-muted. */
  --ink-subtle: oklch(0.62 0.018 62);
  --ink-inverse: oklch(0.99 0.01 80);

  --line: oklch(0.87 0.015 75);
  /* Not a grey. Ink itself — see the block comment above. */
  --line-strong: oklch(0.20 0.025 55);

  /* Brand palette */
  --forest: oklch(0.30 0.06 155);
  --forest-bright: oklch(0.68 0.10 150);
  --forest-soft: oklch(0.93 0.035 150);
  --clay: oklch(0.55 0.13 42);
  --brass: oklch(0.70 0.11 78);
  /* Brass stays the brand tone for fills and panels, but at 2.63:1 on surface
     it cannot carry meaning on its own. `--brass-ink` is the same hue darkened
     until a rating star clears the 3:1 that WCAG 1.4.11 asks of a graphic that
     conveys state (3.59:1 on surface, 3.34:1 on canvas). Dark mode already
     measures 8.36:1, so there it simply IS --brass. */
  --brass-ink: oklch(0.62 0.11 78);
  /* --line is a hairline for boxes (1.44:1) — invisible as a standalone mark.
     --line-contrast is the quietest line tone that still reads as a graphic:
     3.55:1 on surface. Used for the unearned stars in a rating. */
  --line-contrast: oklch(0.62 0.018 62);

  /* `accent` is forest now: every existing bg-accent / text-accent follows. */
  --accent: oklch(0.30 0.06 155);
  --accent-hover: oklch(0.25 0.055 155);
  --accent-soft: oklch(0.93 0.035 150);
  --accent-ring: oklch(0.30 0.06 155 / 0.35);
  --accent-ink: oklch(0.99 0.01 80);

  /* Two-tone focus ring — see the :focus-visible rule for why it is two tones.
     Declared in BOTH :root and .dark rather than aliased once, so each block
     resolves against its own --accent / --surface. */
  --focus-ring: var(--accent);
  --focus-halo: var(--surface);

  /* Semantics retuned into the warm/forest palette rather than dropped. */
  --success: oklch(0.44 0.10 152);
  --success-soft: oklch(0.93 0.035 150);
  --warning: oklch(0.55 0.11 72);
  /* Same hue, three lightness steps down. --warning is 4.16:1 on the tinted
     warning-soft tile the owner console draws it on — under AA for a 11.5px
     label. --warning-ink is 4.71:1 there and 5.46:1 on surface, for warning
     text small enough to need it. The fills and the big figures keep
     --warning. */
  --warning-ink: oklch(0.52 0.11 72);
  --warning-soft: oklch(0.945 0.045 82);
  --danger: oklch(0.52 0.17 28);
  --danger-soft: oklch(0.945 0.035 30);
  --info: oklch(0.48 0.09 238);
  --info-soft: oklch(0.94 0.028 238);

  /* Green panel surfaces — the hero panel and promo bands. A saturated block
     would glare in dark mode, so the gradient is a token rather than a fill:
     brightened greens stay on arches, badges and CTAs. */
  --panel: linear-gradient(165deg, oklch(0.34 0.065 155), oklch(0.26 0.05 155) 75%);
  --panel-band: linear-gradient(115deg, oklch(0.30 0.06 155), oklch(0.24 0.048 155) 80%);
  --panel-flat: oklch(0.30 0.06 155);
  --panel-edge: transparent;
  --on-panel: oklch(0.99 0.01 80);
  --on-panel-muted: oklch(0.90 0.02 90);
  --watermark: oklch(0.30 0.06 155 / 0.55);
  --arch-1: oklch(0.42 0.075 155 / 0.55);
  --arch-2: oklch(0.68 0.10 150 / 0.30);
  --arch-3: oklch(0.97 0.014 80 / 0.16);

  /* Paper grain: a 3px radial dot, the overlay's opacity folded into alpha. */
  --grain: oklch(0.85 0.02 70 / 0.5);

  /* 10px buttons/inputs, 12px cards, 20px marketing panels — read off the
     artboards, which never use the old 16/24px steps. */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.25rem;

  --shadow-sm: 0 1px 2px oklch(0.20 0.025 55 / 0.06);
  --shadow-md: 0 10px 28px -12px oklch(0.20 0.025 55 / 0.28);
  --shadow-lg: 0 24px 48px -18px oklch(0.20 0.025 55 / 0.35);
  --shadow-float: 0 24px 60px -18px oklch(0.15 0.03 55 / 0.45);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-settle: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-color: 30 25% 16%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: oklch(0.15 0.012 60);
    --surface: oklch(0.20 0.014 62);
    --surface-2: oklch(0.245 0.015 62);
    --surface-3: oklch(0.29 0.017 62);

    --ink: oklch(0.96 0.008 75);
    --ink-muted: oklch(0.72 0.012 70);
    --ink-subtle: oklch(0.58 0.012 68);
    --ink-inverse: oklch(0.15 0.012 60);

    --line: oklch(0.32 0.02 65);
    /* Control borders need 3:1 against the surface they sit on (WCAG 1.4.11).
       0.40 measured 1.96:1; 0.54 measures 3.57:1. */
    --line-strong: oklch(0.54 0.02 65);

    --forest: oklch(0.66 0.11 155);
    --forest-bright: oklch(0.84 0.07 150);
    --forest-soft: oklch(0.30 0.05 155);
    --clay: oklch(0.70 0.12 45);
    --brass: oklch(0.76 0.10 78);
    /* Brass on the dark surface is already 8.36:1 — nothing to correct. */
    --brass-ink: oklch(0.76 0.10 78);
    --line-contrast: oklch(0.54 0.015 65);

    --accent: oklch(0.66 0.11 155);
    --accent-hover: oklch(0.74 0.10 152);
    --accent-soft: oklch(0.30 0.05 155);
    --accent-ring: oklch(0.66 0.11 155 / 0.4);
    --accent-ink: oklch(0.15 0.012 60);

    --focus-ring: var(--accent);
    --focus-halo: var(--surface);

    --success: oklch(0.72 0.12 152);
    --success-soft: oklch(0.30 0.05 155);
    --warning: oklch(0.78 0.11 80);
    /* Dark mode measures 9.70:1 already — nothing to correct. */
    --warning-ink: oklch(0.78 0.11 80);
    --warning-soft: oklch(0.30 0.05 80);
    --danger: oklch(0.68 0.16 28);
    --danger-soft: oklch(0.30 0.06 28);
    --info: oklch(0.70 0.09 238);
    --info-soft: oklch(0.28 0.04 238);

    --panel: linear-gradient(165deg, oklch(0.27 0.04 155), oklch(0.21 0.035 155) 75%);
    --panel-band: linear-gradient(115deg, oklch(0.27 0.04 155), oklch(0.21 0.035 155) 80%);
    --panel-flat: oklch(0.26 0.04 155);
    --panel-edge: oklch(0.33 0.045 155);
    --on-panel: oklch(0.96 0.008 75);
    --on-panel-muted: oklch(0.72 0.012 70);
    --watermark: oklch(0.28 0.045 155 / 0.6);
    --arch-1: oklch(0.30 0.05 155 / 0.6);
    --arch-2: oklch(0.66 0.11 155 / 0.28);
    --arch-3: oklch(0.84 0.07 150 / 0.20);

    --grain: oklch(0.30 0.02 65 / 0.35);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
    --shadow-md: 0 10px 28px -12px oklch(0 0 0 / 0.55);
    --shadow-lg: 0 24px 48px -18px oklch(0 0 0 / 0.6);
    --shadow-float: 0 24px 60px -18px oklch(0.02 0 0 / 0.6);

    --shadow-color: 30 30% 3%;
  }
}