/*
 * NNVV design tokens. Single source of truth for colours, spacing, type
 * scale, radius, and shadows. Defined once on :root — referenced via var()
 * from every other stylesheet. Never hardcode a colour value (hex, rgba,
 * or oklch) outside this file.
 *
 * Colours use oklch() for perceptual uniformity: equal steps in L read as
 * equal steps to the eye, so hover/active variants are math instead of
 * guesswork. Supported in every browser the app allows (see
 * application_controller.rb — allow_browser :modern).
 *
 * See docs/design_system.md for usage rules and docs/nnvv_prd.md §"CSS
 * Architecture" for how these get composed.
 */

:root {
  /* Colour palette */
  --forest:   oklch(0.322 0.040 166.7);
  --moss:     oklch(0.436 0.061 162.1);
  --sage:     oklch(0.591 0.068 157.9);
  --water:    oklch(0.575 0.082 241.3);
  --water-lt: oklch(0.926 0.029 238.2);
  --stone:    oklch(0.962 0.007 80.7);
  --sand:     oklch(0.912 0.018 81.3);
  --ink:      oklch(0.217 0.004 106.7);
  --muted:    oklch(0.549 0.026 135.1);
  --cream:    oklch(0.980 0.006 84.6);
  --accent:   oklch(0.652 0.117 64.1);
  --accent-dark: oklch(0.585 0.110 63.3);

  /* Semantic status colours — used by alerts and status badges. */
  --info-ink:    oklch(0.342 0.071 251.8);
  --ok-bg:       oklch(0.909 0.027 166.7);
  --ok-ink:      oklch(0.297 0.060 159.2);
  --ok-border:   oklch(0.552 0.123 157.0);
  --warn-bg:     oklch(0.964 0.051 92.6);
  --warn-ink:    oklch(0.523 0.106 85.5);
  --warn-border: oklch(0.844 0.172 84.9);
  --err-bg:      oklch(0.907 0.037 11.6);
  --err-ink:     oklch(0.410 0.134 20.8);
  --err-border:  oklch(0.592 0.202 21.2);

  /* Overlays — ink that sits on top of a dark or light surface. Alpha
   * varies with the role (.10 for subtle borders, .75 for body text on
   * a dark hero, etc.). Name encodes the *surface*, not the intent, so
   * callers read correctly at the call-site. */
  --on-dark-06:  oklch(1 0 0 / .06);
  --on-dark-10:  oklch(1 0 0 / .10);
  --on-dark-30:  oklch(1 0 0 / .30);
  --on-dark-35:  oklch(1 0 0 / .35);
  --on-dark-45:  oklch(1 0 0 / .45);
  --on-dark-50:  oklch(1 0 0 / .50);
  --on-dark-65:  oklch(1 0 0 / .65);
  --on-dark-75:  oklch(1 0 0 / .75);
  --on-light-06: oklch(0 0 0 / .06);

  /* Type scale */
  --fs-xs:   .8125rem;   /* 13px — captions, meta, badges */
  --fs-sm:   .9375rem;   /* 15px — nav links, small labels */
  --fs-base: 1.0625rem;  /* 17px — body text */
  --fs-lg:   1.25rem;    /* 20px — lead text, h3 */
  --fs-xl:   1.625rem;   /* 26px — h2 */
  --fs-2xl:  2.25rem;    /* 36px — section title */
  --fs-3xl:  3.25rem;    /* 52px — page title */
  --fs-hero: clamp(2.5rem, 7vw, 5.5rem);

  /* Shape */
  --r:    .375rem;   /* buttons, inputs, badges */
  --r-lg: .75rem;    /* cards, demo blocks */

  /* Shadow — forest-hued so the brand green reads through the dimming.
   * Relative-colour syntax keeps the link to --forest live: a palette
   * tweak to the brand green automatically tracks into the shadow. */
  --shadow:    0 2px 16px oklch(from var(--forest) l c h / .10);
  --shadow-lg: 0 8px 40px oklch(from var(--forest) l c h / .16);

  /* One-offs used only on the design-system reference page. */
  --dot-live: oklch(0.800 0.182 151.7);
  --code-fg:  oklch(0.911 0.034 145.3);
}