/* ROLE: source copy for the public site (landing/assets/styles/tokens.css). Mirror: web/src/styles/tokens.css. */
/*
 * Design tokens v2 (D-004). Usage rules and measured contrast: docs/design/DESIGN.md.
 * Both copies of this file must stay identical except for line 1; prove it with `diff`.
 * This is the ONLY place hex values may live (tools/dev/check-invariants.sh).
 * Contrast of every pair: `node tools/design/contrast.mjs`.
 *
 * Breakpoints cannot be variables inside @media. Use these plain values:
 *   --md-bp-sm  40em  (640px)   --md-bp-md  48em  (768px)
 *   --md-bp-lg  64em (1024px)   --md-bp-xl  80em (1280px)
 * Write mobile-first (min-width) queries.
 */

:root {
  /* ---- color: brand roles (D-004 section 1) ---- */
  --md-color-ink: #06302a;
  --md-color-ink-soft: #3d5b55;
  --md-color-primary: #00483e;
  --md-color-on-primary: #ffffff;
  --md-color-action: #f4b21a;
  --md-color-on-action: #00483e;
  --md-color-accent: #5a963b;
  --md-color-lime: #7fa63a;
  --md-color-surface: #ffffff;
  --md-color-surface-alt: #f3f6f0;
  --md-color-danger: #b3261e;
  --md-color-on-danger: #ffffff;

  /* Borders. `border` is the STRONG one: 3.1:1 on white, so a field boundary
     passes WCAG 1.4.11 and the registro (which uses it for every input and
     option) is AA through tokens alone. `divider` is the soft hairline for
     separators and card edges that carry no meaning of their own. */
  --md-color-border: #889688;
  --md-color-divider: #d5ddd2;

  /* Tints for notices and selected states (flat, no gradients). */
  --md-color-tint-primary: #e4eeea;
  --md-color-tint-success: #e8f2e1;
  --md-color-tint-warning: #fdf1cf;
  --md-color-tint-danger: #fbe9e7;

  /* Compatibility alias (D-004): the registro CSS Modules still say "secondary". */
  --md-color-secondary: var(--md-color-primary);

  /* Scrim behind dialogs and photo overlays. Not a text background. */
  --md-color-scrim: rgb(6 48 42 / 0.55);

  /* ---- type ---- */
  --md-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --md-font-display: 'Nunito', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --md-font-size-xs: 0.8125rem;
  --md-font-size-sm: 0.875rem;
  --md-font-size-base: 1rem;
  --md-font-size-lg: 1.25rem;
  --md-font-size-xl: 1.75rem;
  --md-font-size-2xl: 2.25rem;
  --md-font-size-3xl: 2.75rem;
  --md-font-size-display: clamp(2.5rem, 1.2rem + 6.4vw, 5.5rem);
  --md-leading-tight: 1.08;
  --md-leading-snug: 1.25;
  --md-leading-body: 1.5;
  --md-weight-regular: 400;
  --md-weight-medium: 500;
  --md-weight-bold: 700;
  --md-weight-black: 800;
  --md-tracking-tight: -0.02em;
  --md-measure: 62ch;

  /* ---- space (4 px base) ---- */
  --md-space-1: 0.25rem;
  --md-space-2: 0.5rem;
  --md-space-3: 0.75rem;
  --md-space-4: 1rem;
  --md-space-5: 1.5rem;
  --md-space-6: 2rem;
  --md-space-7: 3rem;
  --md-space-8: 4rem;
  --md-space-9: 6rem;
  --md-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --md-container: 72rem;
  --md-container-narrow: 40rem;

  /* ---- shape ---- */
  --md-radius-sm: 0.375rem;
  --md-radius-md: 0.75rem;
  --md-radius-lg: 1.25rem;
  --md-radius-full: 999px;
  --md-border-width: 1px;
  --md-border-width-strong: 2px;
  --md-focus-width: 3px;
  --md-focus-offset: 2px;
  --md-target: 3rem;
  --md-header-height: 5rem;

  /* ---- elevation: nothing at rest; only what truly floats ---- */
  --md-shadow-float: 0 0.5rem 1.5rem rgb(6 48 42 / 0.18);
  --md-shadow-float-up: 0 -0.5rem 1.5rem rgb(6 48 42 / 0.14);

  /* ---- layers ---- */
  --md-z-base: 0;
  --md-z-sticky: 100;
  --md-z-header: 200;
  --md-z-overlay: 300;
  --md-z-toast: 400;

  /* ---- motion (transform and opacity only; see DESIGN.md section 5) ---- */
  --md-duration-fast: 120ms;
  --md-duration-base: 200ms;
  /* Step transition only (FormShell's exit/enter slide) and component entrances.
     Kept apart from --md-duration-base so slowing it down does not also slow
     the progress bar's width transition. */
  --md-duration-slow: 450ms;
  --md-duration-draw: 900ms;
  --md-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --md-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --md-stagger: 70ms;
}