/* design/tokens/base.css — the brand-neutral foundation (ADR-0006 §Token-source decision; design/README.md §Rules;
 * design/implementation/01/token-migration.md).
 *
 * This file defines the semantic custom-property SET the app may reference — geometry, type scale, radii, the
 * semantic color roles — with neutral values. It is the first layer of the cascade base → loam → <partner file> →
 * generated portal branding (`/tokens/brand.css`, only `--brand-*`), and the server appends one complete generated
 * snapshot of the merged map plus the safe derived roles (`--color-on-accent`, `--color-on-secondary`,
 * `--color-link`, `--color-focus`, `--color-control-border`) under the request's CSP nonce, so first paint is
 * coherent even when an older linked copy of this file is cached.
 *
 * Source contract (apps/web features/theme/token-declarations.ts): `:root { --name: value; }` blocks and comments
 * only. No other selectors, no nested or @-rules, no `!important`, no url()/imports. Fonts and var() aliases are
 * values. `--space-*` is the general scale; the exact approved 13/22/43 px geometry lives on the named roles. The
 * approved values are mirrored from design/hardening/04/tokens/base.css (the immutable design reference).
 */
:root {
  --theme-key: "base";

  /* Spacing scale and named geometry roles */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --page-padding: 24px;
  --page-padding-narrow: 22px;
  --section-gap: 22px;
  --row-padding: 13px;
  --summary-padding: 43px;
  --button-padding-block: 10px;
  --button-padding-inline: 14px;
  --field-padding-block: 10px;
  --field-padding-inline: 12px;
  --nav-gap: 18px;
  --nav-gap-narrow: 6px;

  /* Type — installed/system stacks only; nothing is fetched */
  --font-family-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-heading: var(--font-family-body);
  --font-family-amount: var(--font-family-heading);
  --font-size-xs: 9px;
  --font-size-sm: 10px;
  --font-size-md: 12px;
  --font-size-lg: 20px;
  --font-size-xl: 33px;
  --font-size-stat: 24px;
  --font-size-subheading: 23px;
  --font-size-dialog: 29px;
  --font-size-figure: 17px;
  --font-size-amount: 68px;
  --line-height-body: 1.6;
  --line-height-heading: 1.12;
  --line-height-control: 1.5;
  --line-height-amount: 1.02;
  --tracking-heading: -1.2px;
  --tracking-amount: -2.4px;
  --tracking-section: -0.5px;
  --tracking-kicker: 1.5px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-strong: 600;

  /* Curves — one radius per component role, never one radius stretched across unrelated components */
  --radius-sm: 3px;
  --radius-md: 3px;
  --radius-button: 25px;
  --radius-summary: 60px;
  --radius-frame: 0px;
  --radius-round: 50%;

  /* Structural ratios and limits */
  --amount-cents-scale: 46%;
  --amount-cents-offset: 0.12em;
  --amount-size-narrow: 12cqw;
  --logo-layout-share: 45%;
  --dialog-max-height: 90dvh;
  --border-width: 1px;
  --border-width-selected: 2px;
  --border-width-notice: 3px;
  --border-width-summary: 5px;
  --touch-target-min: 44px;
  --field-height: 46px;
  --checkbox-size: 18px;
  --focus-width: 3px;
  --focus-offset: 4px;
  --logo-max-height: 44px;
  --logo-max-width: 176px;
  --logo-name-size: 25px;
  --logo-name-small-size: 14px;
  --frame-max-width: 960px;
  --content-max-width: 720px;
  --form-max-width: 440px;
  --dialog-max-width: 470px;
  --breakpoint-content: 600px;
  --disabled-opacity: 0.7;
  --loading-opacity: 0.6;

  /* Semantic color roles — neutral here; loam.css supplies the selected palette. Paper / main text, secondary
   * text (also the input boundary — deliberately stronger than a decorative divider), shaded panel, outer canvas. */
  --color-bg: #ffffff;
  --color-surface: #f4f4f4;
  --color-canvas: #ececec;
  --color-fg: #242424;
  --color-muted: #5d5d5d;
  --color-border: #c8c8c8;
  --color-danger: #8b3528;
  --color-overlay: #17283f85;

  /* Brand inputs — the customization surface. A partner file or the portal's generated layer overrides these on
   * the same :root boundary; the `-contrast` pair is the public wire alias (partner-experience.md §Partner
   * branding), kept for the API. Components never read it: they read the derived roles below. */
  --brand-primary: #414141;
  --brand-secondary: #cccccc;
  --brand-primary-contrast: #ffffff;
  --brand-secondary-contrast: #111111;

  /* Fills follow the brand inputs; the foreground/link/focus/boundary roles are DERIVED by the server snapshot from
   * the final resolved inputs and the actual backgrounds (theme-snapshot.ts). The values here are the linked-file
   * fallback only — the snapshot's literal roles always win by source order. */
  --color-accent: var(--brand-primary);
  --color-secondary: var(--brand-secondary);
  --color-on-accent: var(--brand-primary-contrast);
  --color-on-secondary: var(--brand-secondary-contrast);
  --color-link: var(--color-fg);
  --color-focus: var(--color-fg);
  --color-control-border: var(--color-muted);
  --focus-ring: var(--focus-width) solid var(--color-focus);
}