:root {
  color-scheme: light dark;

  /* Brand primitives */
  --kc-color-cloud: #f5f5f3;
  --kc-color-plate: #fdfdfb;
  --kc-color-fog: #c3c9d2;
  --kc-color-slate: #5c6570;
  --kc-color-graphite: #3a3f47;
  --kc-color-coral: #e25a3f;
  --kc-color-coral-deep: #b23a24;
  --kc-color-coral-key: #c7452c;
  --kc-color-coral-edge: #8f2d1a;
  --kc-color-coral-bright: #f0765c;
  --kc-color-mint: #4fbfa3;
  --kc-color-mint-deep: #1b6f5a;
  --kc-color-mint-tint: #ddf2ec;
  --kc-color-mint-bright: #63d4b8;
  --kc-color-mustard: #efb93f;
  --kc-color-mustard-ink: #7d5a12;
  --kc-color-mustard-tint: #f9e9c0;
  --kc-color-mustard-bright: #f5c95e;
  --kc-color-signal-deep: #22688f;
  --kc-color-signal-bright: #7ccbf2;
  --kc-color-danger: #c7302b;
  --kc-color-danger-bright: #f08a80;

  /* Typography */
  /* Piazzolla's `opsz` axis is left to `font-optical-sizing: auto`, so there is
     no variation-settings token to pin. The face adapts its own drawing between
     a 1.25rem card title and a 2.5rem page heading, which is precisely why it
     was chosen. Pinning the axis would throw that away. */
  --kc-font-display: "Piazzolla", Georgia, "Times New Roman", serif;
  --kc-font-body: "Sofia Sans", ui-sans-serif, system-ui, -apple-system,
    sans-serif;
  --kc-font-mono: "Lilex", ui-monospace, "Cascadia Mono", "SF Mono", Menlo,
    Consolas, monospace;
  /* Inline code is set relative to its parent, not on the size ramp, because it
     appears inside body, label and table text alike. 0.8em rather than a
     conventional 0.85em: a monospace advance is ~0.6em against Sofia Sans'
     ~0.41em average, so code always sets wider than the prose around it and the
     only remaining lever is size. */
  --kc-font-size-code: 0.8em;
  /* A code block has no surrounding prose to match, so the inline correction
     does not apply: it is read as its own column and wants the size it would
     have in an editor. Absolute rather than relative for the same reason —
     nothing is inheriting from. */
  --kc-font-size-code-block: 0.875rem;
  --kc-font-size-xs: 0.75rem;
  --kc-font-size-sm: 0.875rem;
  --kc-font-size-md: 1rem;
  --kc-font-size-lg: 1.125rem;
  --kc-font-size-xl: 1.25rem;
  /* All-caps text is governed by cap height, not x-height, and Sofia Sans sets a
     low cap (0.655em) against a generous x-height (0.488em). Mixed-case text at
     `xs` is unaffected — it reads off the x-height — but a string that is
     entirely capitals loses about 7% of its height, which at 0.75rem is the
     difference between legible and squinting. Every all-caps surface uses this
     instead. */
  --kc-font-size-caps: 0.8125rem;
  --kc-line-height-body: 1.55;
  --kc-line-height-heading: 1.2;
  /* The Label and Micro roles carry their own leading. Both are committed in
     DESIGN.md and were previously restated as literals in six places, which is
     drift waiting to happen: a role documented in one place and implemented in
     six has no single source. Micro is 1 because at 0.75rem uppercase, any
     leading above the cap height opens a gap the padding never asked for. */
  --kc-line-height-label: 1.45;
  --kc-line-height-micro: 1;
  /* Heading rhythm. In `em`, not rem or a space step, so it scales with
     whatever size the surface chose — heading sizes are deliberately not
     tokenized ("the surface decides, the face does not"), and the space around
     a heading has to obey the same rule or it breaks at the extremes. The
     2.67:1 ratio is what binds a heading to the section it opens instead of
     the one it closes. */
  --kc-space-heading-above: 1.6em;
  --kc-space-heading-below: 0.6em;
  /* The generic ladder. Both faces are continuously variable — Piazzolla
     100–900, Sofia Sans 1–1000 — so every one of these is a real weight in both
     voices, not a nearest match. This is what a consumer reaches for. */
  --kc-font-weight-regular: 400;
  --kc-font-weight-medium: 500;
  --kc-font-weight-semibold: 600;
  --kc-font-weight-bold: 700;

  /* Role weights, tuned optically rather than snapped to the ladder.
     Apparent stroke weight falls as size falls, so one number spanning a 40px
     heading and a 12px badge does not read as one system. Display and Title are
     the same intent at 2x the size apart, so they bracket 600 instead of
     sharing it; Micro carries the most because 12px uppercase has no ascenders
     or descenders left to help it. Body is deliberately untuned — running text
     should sit at the face's own text weight. */
  --kc-font-weight-body: calc(400 + var(--kc-font-weight-shift));
  --kc-font-weight-display: calc(580 + var(--kc-font-weight-shift));
  --kc-font-weight-title: calc(640 + var(--kc-font-weight-shift));
  --kc-font-weight-label: calc(580 + var(--kc-font-weight-shift));
  --kc-font-weight-micro: calc(760 + var(--kc-font-weight-shift));
  /* Emphasis is a role, not a rung. `strong` is the most frequent typographic
     decision a document makes, and reaching for the flat ladder left the one
     weight that never compensated in dark — widening the gap against body text
     exactly where irradiation already exaggerates it. */
  --kc-font-weight-emphasis: calc(700 + var(--kc-font-weight-shift));

  /* Dark-mode optical compensation, and the one thing here that a static face
     could not do at all. Light glyphs on a dark ground irradiate: the bright
     stroke bleeds into the surround and reads heavier than the same weight on
     white. Both faces are low-contrast enough that this, rather than strokes
     breaking up, is the dominant effect — so dark shaves weight rather than
     adding it. One value; flip it to 0 to disable the whole behaviour. */
  --kc-font-weight-shift: 0;

  /* Space, shape, elevation, motion */
  --kc-space-1: 0.25rem;
  --kc-space-2: 0.5rem;
  --kc-space-3: 0.75rem;
  --kc-space-4: 1rem;
  --kc-space-5: 1.25rem;
  --kc-space-6: 1.5rem;
  --kc-space-8: 2rem;
  --kc-space-10: 2.5rem;
  --kc-radius-sm: 6px;
  --kc-radius-key: 10px;
  --kc-radius-plate: 18px;
  --kc-radius-pill: 999px;
  --kc-key-edge-width: 4px;
  --kc-control-min-size: 44px;
  --kc-duration-press: 120ms;
  --kc-ease-press: ease;
  --kc-duration-overlay: 140ms;
  --kc-ease-overlay: ease-out;
  /* A slower, softer transition for a selector face changing position or a
     tonal surface settling into place. It is distinct from a press: the reader
     is following continuity between states, not feeling a key actuate. */
  --kc-duration-settle: 210ms;
  --kc-ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --kc-settle-offset: 6px;
  --kc-settle-turn: 0.45deg;

  /* The press gesture. Travel and edge width are one coupled value pair: the
     cap descends exactly as far as its wall shrinks, so the object's lower
     boundary never moves. 3px down, 4px edge compressing to 1px. */
  --kc-press-travel: 3px;
  --kc-press-edge-width: 1px;
  --kc-chevron-open-turn: 180deg;

  /* Light semantic theme */
  --kc-color-surface: var(--kc-color-cloud);
  --kc-color-surface-raised: var(--kc-color-plate);
  --kc-color-surface-hover: #f7f7f4;
  /* The Layered Plate ladder. These roles replace decorative container borders
     with controlled tonal steps; `contrast` is intentionally exceptional and
     should mark a chapter or editorial accent, not routine grouping. */
  --kc-color-surface-minimal: color-mix(
    in srgb,
    var(--kc-color-surface-raised) 96%,
    var(--kc-color-text) 4%
  );
  --kc-color-surface-tonal: color-mix(
    in srgb,
    var(--kc-color-surface-raised) 92%,
    var(--kc-color-text) 8%
  );
  --kc-color-surface-contrast: var(--kc-color-text);
  --kc-color-on-contrast: var(--kc-color-surface-raised);
  --kc-color-on-contrast-muted: color-mix(
    in srgb,
    var(--kc-color-on-contrast) 72%,
    var(--kc-color-surface-contrast)
  );
  --kc-color-text: var(--kc-color-graphite);
  --kc-color-text-muted: var(--kc-color-slate);
  --kc-color-border: var(--kc-color-fog);
  --kc-color-divider: #e7e7e3;
  --kc-color-link: var(--kc-color-signal-deep);
  --kc-color-focus: var(--kc-color-coral);
  --kc-color-key-face: var(--kc-color-coral-key);
  --kc-color-key-face-hover: var(--kc-color-coral-deep);
  --kc-color-key-face-pressed: var(--kc-color-key-face-hover);
  --kc-color-key-edge: var(--kc-color-coral-edge);
  --kc-color-on-key: var(--kc-color-plate);

  /* The destructive key. Deliberately *not* a filled key in the danger hue:
     `danger` (#c7302b) and `coral-key` (#c7452c) differ only in their green
     channel, so two filled keys side by side — "Approve" and "Reject" on the
     same approvals row — would be indistinguishable. The Commitment Rule also
     reserves the coral fill for actions that commit, and the Tone Trio Rule
     forbids a status carried by color alone.

     So the difference is carried by form: the destructive key is a raised plate
     surface with the danger tone on its border, its wall, and its ink, against a
     filled coral face. Filled versus outlined survives forced colors,
     monochrome printing, and every color vision deficiency; a 21-point shift in
     one channel does not. It still wears the 4px wall and still depresses, so
     the Pressable Edge Rule is kept.

     Under reduced motion the pressed face becomes the wall color and the ink
     flips to the raised surface — which is the same substitution a primary key
     makes, not a special case for this variant. A primary key fills with
     `coral-edge`, its wall; this one fills with `key-edge-danger`, its wall. The
     one thing worth recording is why tinting was not an option here: every light
     tint of `danger-surface` dark enough to read as pressed drops the ink below
     4.5:1, because the danger red is too dark to leave headroom. Filling with the
     wall lands at 5.3:1 in light and 6.6:1 in dark.

     Form alone does not finish the job. Outlining ends the collision with the
     coral key and starts a nearer one with `secondary`, which is also a raised
     plate key — and in `forced-colors: active` every token below resolves to a
     system color, so nothing here distinguishes destroying from cancelling. The
     component renders the danger shape by construction for that reason; these
     tokens carry the tone, and the octagon carries the meaning. */
  --kc-color-key-face-danger: var(--kc-color-surface-raised);
  --kc-color-key-face-danger-hover: var(--kc-color-danger-surface);
  --kc-color-key-face-danger-pressed: var(--kc-color-key-face-danger-hover);
  --kc-color-key-edge-danger: var(--kc-color-danger-text);
  --kc-color-on-key-danger: var(--kc-color-danger-text);
  --kc-color-on-key-danger-pressed: var(--kc-color-on-key-danger);
  --kc-color-accent-surface: var(--kc-color-mint-tint);
  --kc-color-accent-text: var(--kc-color-mint-deep);
  --kc-color-accent-border: var(--kc-color-mint);
  --kc-color-success-surface: #eef9f5;
  --kc-color-success-text: var(--kc-color-mint-deep);
  --kc-color-success-border: #bbe4d2;
  --kc-color-warning-surface: var(--kc-color-mustard-tint);
  --kc-color-warning-text: var(--kc-color-mustard-ink);
  --kc-color-warning-border: var(--kc-color-mustard);
  --kc-color-danger-surface: #fbf1f0;
  --kc-color-danger-text: var(--kc-color-danger);
  --kc-color-danger-border: #efb3ac;
  --kc-color-info-surface: #eaf6fc;
  --kc-color-info-text: var(--kc-color-signal-deep);
  --kc-color-info-border: #addcf3;
  /* Syntax roles for a code block. Four, not the dozen a highlighter offers,
     and two of them are not colors at all — the Two Voice Rule already spends
     Lilex on the semantic distinction code draws, and a plate that stays quiet
     cannot also carry five hues in a `pre`. Comments and punctuation recede to
     the muted ink; a string literal — the value a reader is usually scanning
     for — takes the accent, which is the system's "yes"; a keyword is carried by
     weight rather than hue. Coral appears nowhere: nothing in a code sample
     commits to anything. */
  --kc-color-code-comment: var(--kc-color-text-muted);
  --kc-color-code-punctuation: var(--kc-color-text-muted);
  --kc-color-code-string: var(--kc-color-accent-text);
  --kc-color-code-keyword: var(--kc-color-text);

  --kc-shadow-plate: 0 1px 2px rgb(58 63 71 / 0.06),
    0 10px 28px rgb(58 63 71 / 0.1);
  --kc-shadow-overlay: 0 14px 40px rgb(58 63 71 / 0.2);
  /* The scrim behind a modal dialog. It is tinted with the graphite ink, the
     same tint both shadows carry, so the scrim and the shadow are one material
     rather than two darks that happen to sit together.

     The alpha is the one number the survey handed over: `assistant-workbench`
     and `retirement-dashboard` picked different colours and the *same* 0.68
     without coordinating, which is the strongest evidence available for a value
     nobody can reason to from first principles. Their colours do not survive —
     both are raw literals — but their agreement does. */
  --kc-color-scrim: rgb(58 63 71 / 0.68);
  --kc-focus-ring: 3px solid var(--kc-color-focus);
  --kc-focus-ring-offset: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Light glyphs irradiate on a dark ground and read heavier. See
       --kc-font-weight-shift. */
    --kc-font-weight-shift: -20;
    --kc-color-surface: #15181d;
    --kc-color-surface-raised: #1e2228;
    --kc-color-surface-hover: #262b33;
    --kc-color-text: #edeff2;
    --kc-color-text-muted: #a8b0bb;
    --kc-color-border: #4a515c;
    --kc-color-divider: #2a2f36;
    --kc-color-link: var(--kc-color-signal-bright);
    --kc-color-focus: var(--kc-color-coral-bright);
    --kc-color-key-face: var(--kc-color-coral-bright);
    --kc-color-key-face-hover: #e96a4f;
    --kc-color-key-edge: var(--kc-color-coral);
    --kc-color-on-key: #15181d;
    --kc-color-accent-surface: #16332b;
    --kc-color-accent-text: var(--kc-color-mint-bright);
    --kc-color-accent-border: var(--kc-color-mint-deep);
    --kc-color-success-surface: #12251f;
    --kc-color-success-text: var(--kc-color-mint-bright);
    --kc-color-success-border: #1e4a3c;
    --kc-color-warning-surface: #453611;
    --kc-color-warning-text: var(--kc-color-mustard-bright);
    --kc-color-warning-border: #8a6414;
    --kc-color-danger-surface: #2c1715;
    --kc-color-danger-text: var(--kc-color-danger-bright);
    --kc-color-danger-border: #6e332f;
    --kc-color-info-surface: #162a35;
    --kc-color-info-text: var(--kc-color-signal-bright);
    --kc-color-info-border: #285b72;
    --kc-shadow-plate: none;
    --kc-shadow-overlay: 0 18px 44px rgb(0 0 0 / 0.45);
    /* The scrim keeps its alpha across themes and swaps its tint the way the
       overlay shadow does: a graphite scrim over a #15181d ground is barely a
       scrim at all. */
    --kc-color-scrim: rgb(0 0 0 / 0.68);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Light glyphs irradiate on a dark ground and read heavier. See
     --kc-font-weight-shift. */
  --kc-font-weight-shift: -20;
  --kc-color-surface: #15181d;
  --kc-color-surface-raised: #1e2228;
  --kc-color-surface-hover: #262b33;
  --kc-color-text: #edeff2;
  --kc-color-text-muted: #a8b0bb;
  --kc-color-border: #4a515c;
  --kc-color-divider: #2a2f36;
  --kc-color-link: var(--kc-color-signal-bright);
  --kc-color-focus: var(--kc-color-coral-bright);
  --kc-color-key-face: var(--kc-color-coral-bright);
  --kc-color-key-face-hover: #e96a4f;
  --kc-color-key-edge: var(--kc-color-coral);
  --kc-color-on-key: #15181d;
  --kc-color-accent-surface: #16332b;
  --kc-color-accent-text: var(--kc-color-mint-bright);
  --kc-color-accent-border: var(--kc-color-mint-deep);
  --kc-color-success-surface: #12251f;
  --kc-color-success-text: var(--kc-color-mint-bright);
  --kc-color-success-border: #1e4a3c;
  --kc-color-warning-surface: #453611;
  --kc-color-warning-text: var(--kc-color-mustard-bright);
  --kc-color-warning-border: #8a6414;
  --kc-color-danger-surface: #2c1715;
  --kc-color-danger-text: var(--kc-color-danger-bright);
  --kc-color-danger-border: #6e332f;
  --kc-color-info-surface: #162a35;
  --kc-color-info-text: var(--kc-color-signal-bright);
  --kc-color-info-border: #285b72;
  --kc-shadow-plate: none;
  --kc-shadow-overlay: 0 18px 44px rgb(0 0 0 / 0.45);
  --kc-color-scrim: rgb(0 0 0 / 0.68);
}

:root[data-theme="light"] {
  color-scheme: light;
  /* Explicit light resets the dark optical compensation. */
  --kc-font-weight-shift: 0;
}

/* Motion contract. The system preference is authoritative; `data-kc-motion` on
   the root element is the explicit override, mirroring `data-theme`. Reduced
   motion removes the travel and keeps the wall at full height — the press is
   still legible, expressed in material instead of movement. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-kc-motion="full"]) {
    --kc-duration-press: 0ms;
    --kc-duration-overlay: 0ms;
    --kc-duration-settle: 0ms;
    --kc-settle-offset: 0px;
    --kc-settle-turn: 0deg;
    --kc-press-travel: 0px;
    --kc-press-edge-width: var(--kc-key-edge-width);
    --kc-chevron-open-turn: 0deg;
    --kc-color-key-face-pressed: var(--kc-color-key-edge);
    /* The destructive key inverts instead of tinting. See the note where these
       two are declared. */
    --kc-color-key-face-danger-pressed: var(--kc-color-key-edge-danger);
    --kc-color-on-key-danger-pressed: var(--kc-color-surface-raised);
  }
}

:root[data-kc-motion="reduce"] {
  --kc-duration-press: 0ms;
  --kc-duration-overlay: 0ms;
  --kc-duration-settle: 0ms;
  --kc-settle-offset: 0px;
  --kc-settle-turn: 0deg;
  --kc-press-travel: 0px;
  --kc-press-edge-width: var(--kc-key-edge-width);
  --kc-chevron-open-turn: 0deg;
  --kc-color-key-face-pressed: var(--kc-color-key-edge);
  --kc-color-key-face-danger-pressed: var(--kc-color-key-edge-danger);
  --kc-color-on-key-danger-pressed: var(--kc-color-surface-raised);
}

@media (forced-colors: active) {
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"],
  :root[data-kc-motion="reduce"] {
    --kc-color-surface: Canvas;
    --kc-color-surface-raised: Canvas;
    --kc-color-surface-hover: Canvas;
    --kc-color-surface-minimal: Canvas;
    --kc-color-surface-tonal: Canvas;
    --kc-color-surface-contrast: Canvas;
    --kc-color-on-contrast: CanvasText;
    --kc-color-on-contrast-muted: CanvasText;
    --kc-color-text: CanvasText;
    --kc-color-text-muted: CanvasText;
    --kc-color-border: ButtonText;
    --kc-color-divider: ButtonText;
    --kc-color-link: LinkText;
    --kc-color-focus: Highlight;
    --kc-color-key-face: ButtonFace;
    --kc-color-key-face-hover: ButtonFace;
    --kc-color-key-face-pressed: ButtonFace;
    --kc-color-key-edge: ButtonText;
    --kc-color-on-key: ButtonText;
    --kc-color-key-face-danger: ButtonFace;
    --kc-color-key-face-danger-hover: ButtonFace;
    --kc-color-key-face-danger-pressed: ButtonFace;
    --kc-color-key-edge-danger: ButtonText;
    --kc-color-on-key-danger: ButtonText;
    --kc-color-on-key-danger-pressed: ButtonText;
    --kc-color-code-comment: CanvasText;
    --kc-color-code-punctuation: CanvasText;
    --kc-color-code-string: CanvasText;
    --kc-color-code-keyword: CanvasText;
    --kc-color-accent-surface: Canvas;
    --kc-color-accent-text: CanvasText;
    --kc-color-accent-border: ButtonText;
    --kc-color-success-surface: Canvas;
    --kc-color-success-text: CanvasText;
    --kc-color-success-border: ButtonText;
    --kc-color-warning-surface: Canvas;
    --kc-color-warning-text: CanvasText;
    --kc-color-warning-border: ButtonText;
    --kc-color-danger-surface: Canvas;
    --kc-color-danger-text: CanvasText;
    --kc-color-danger-border: ButtonText;
    --kc-color-info-surface: Canvas;
    --kc-color-info-text: CanvasText;
    --kc-color-info-border: ButtonText;
    --kc-shadow-plate: none;
    --kc-shadow-overlay: none;
    /* Both shadows resolve to `none` here, which leaves a modal dialog with
       nothing between it and the page but the scrim. So the scrim stops being a
       wash and becomes opaque `Canvas`: the page behind it is genuinely hidden,
       and the dialog's own `ButtonText` border is what draws the boundary. A
       translucent scrim would need `forced-color-adjust: none` to survive, which
       is fighting the mode rather than answering it. */
    --kc-color-scrim: Canvas;
  }
}