/* Vaultivo design tokens — VENDORED from the application.
 *
 * Source: resources/css/app.css in relu-dm/vaultivo, at commit aa8585f.
 * Copied verbatim: the :root and .dark blocks, nothing else.
 *
 * WHY A COPY AND NOT A SHARED PACKAGE
 * ADR 0020 (revision 2026-08-04) chose vendoring deliberately — a submodule
 * or an npm package is ceremony a single developer should not carry
 * (CLAUDE.md, Single Developer). The accepted risk is drift, which this
 * project has already been bitten by once (vaultivo#764).
 *
 * SO: DO NOT EDIT THESE VALUES HERE. Change them in the application, then
 * re-vendor and update the commit above. A token that differs between the
 * two repositories is the failure this header exists to prevent.
 *
 * The application ships a `.dark` class; this site keys dark mode off the
 * viewer's preference instead, so the second block is re-homed onto
 * prefers-color-scheme while keeping identical values.
 */

:root {
    --v-ground: #E9EDF3;
    --v-surface: #FFFFFF;
    --v-surface-2: #F3F6FB;
    --v-ink: #2E3440;
    --v-ink-muted: #545C6E;
    --v-ink-faint: #8A93A6;
    --v-line: #DCE1EA;
    --v-line-strong: #C6CEDC;
    --v-accent: #5E81AC;
    --v-accent-strong: #4C6E98;
    --v-accent-soft: #E5ECF5;
    /* The fill behind ink on a filled primary control. Deliberately NOT
     * --v-accent: white on #5E81AC is 4.03:1, under the 4.5:1 AA floor for a
     * 14px/600 button label. #4C6E98 is 5.26:1. Before this, the resting
     * button failed AA and its hover state passed -- backwards. */
    --v-accent-fill: #4C6E98;
    --v-accent-fill-hover: #3E5D82;
    --v-accent-ink: #FFFFFF;
    --v-good: #6E9354;
    --v-good-soft: #E7EEDE;
    --v-warn: #B8901C;
    --v-warn-soft: #F6EDD3;
    --v-danger: #BF616A;
    --v-danger-soft: #F5E1E3;
    /* Ink on a solid danger fill. Deliberately not --v-accent-ink, which
       inverts with the theme: text on the impersonation stop button must stay
       light in both, because --v-danger stays a mid-tone in both. */
    --v-danger-ink: #FFFFFF;
    --v-info: #4E7E8C;
    --v-info-soft: #DFEBEE;

    /* Text-safe semantic tones, for tinted text sitting directly on --v-ground.
     * The plain semantic tokens above are badge colours: they are chosen to read
     * on their own --v-*-soft tints, and against the #E9EDF3 ground they land at
     * 2.54:1 (warn) and 3.81:1 (info) — under the 4.5:1 AA floor for body-size
     * text. These darkened variants clear it (4.67:1 and 4.68:1) while staying
     * in the same hue family.
     *
     * "Strong" follows --v-accent-strong: the variant with more contrast against
     * the ground, which is darker in light and brighter in dark. In dark the
     * plain tokens already clear AA comfortably (9.34:1 and 7.29:1), so the dark
     * values below are deliberately identical to them. */
    --v-warn-strong: #856408;
    --v-info-strong: #456F7C;
    --v-shadow: 0 1px 2px rgba(46,52,64,.05), 0 8px 24px -12px rgba(46,52,64,.18);
    /* Scrim behind a blocking dialog. Polar Night rather than black: the light
     * theme's ground is cool, and a neutral black reads as a hole punched in it. */
    --v-scrim: rgba(46, 52, 64, 0.55);
    /* Text on the scrim. White in both themes, because the scrim is dark in
     * both — the one place --v-ink would be wrong. */
    --v-scrim-ink: #FFFFFF;
    /* Key-cap fill and edge for .v-kbd, which sits on the accent fill.
     *
     * The fill moves the cap *away* from the ink on top of it, never toward it.
     * The first version of these tokens tinted both toward `--v-accent-ink` — the
     * reasoning being that the cap should follow the ink — and that is exactly
     * backwards: it closes the gap the cap exists to open. White ink over a
     * white-tinted cap measured 2.98:1 in this theme, under the AA floor, and the
     * bug shipped past a green invariant test because the test checks which
     * tokens a rule uses, never what they compute to.
     *
     * So: light theme has white ink, therefore a Polar Night fill. The edge goes
     * the other way, since it has only the accent behind it and needs 3:1 as a
     * non-text boundary. */
    --v-kbd-fill: rgba(46, 52, 64, 0.22);
    --v-kbd-line: rgba(255, 255, 255, 0.75);
    /* Radius scale — five roles, derived from what the app already drew rather
     * than invented. Before this, nine literal values were in use across a
     * continuum from 3px to 20px, which is how a corner ends up being decided
     * per component. --v-radius keeps its name and value because it was already
     * the card role and is referenced from the mockup. */
    --v-radius-focus: 4px;
    --v-radius-control: 7px;
    --v-radius: 10px;
    --v-radius-pill: 999px;
    --v-radius-circle: 50%;
    --v-spine: #5E81AC;
    --v-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
}

.dark {
    --v-ground: #242933;
    --v-surface: #2E3440;
    --v-surface-2: #353C4A;
    --v-ink: #ECEFF4;
    --v-ink-muted: #C2C9D6;
    --v-ink-faint: #828C9E;
    --v-line: #3B4252;
    --v-line-strong: #434C5E;
    --v-accent: #81A1C1;
    --v-accent-strong: #88C0D0;
    --v-accent-soft: #333F52;
    /* Dark needs no darkening: ink #1B2028 on #81A1C1 is 6.08:1. The fill is
     * the accent, and hover goes lighter rather than darker. */
    --v-accent-fill: #81A1C1;
    --v-accent-fill-hover: #88C0D0;
    --v-accent-ink: #1B2028;
    --v-good: #A3BE8C;
    --v-good-soft: #333F35;
    --v-warn: #EBCB8B;
    --v-warn-soft: #40391F;
    --v-danger: #D08770;
    --v-danger-soft: #40312B;
    --v-danger-ink: #FFFFFF;
    --v-info: #88C0D0;
    --v-info-soft: #2C3A40;

    /* Same as the plain tokens on purpose — both already clear AA against the
     * #242933 ground (9.34:1 and 7.29:1), so dark needs no darkened variant.
     * They exist here so a surface can reference one token in both themes. */
    --v-warn-strong: #EBCB8B;
    --v-info-strong: #88C0D0;
    --v-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    /* Deeper in dark: the card it covers is only a little lighter than the
     * ground, so a 0.55 scrim would leave the two nearly indistinguishable. */
    --v-scrim: rgba(18, 21, 27, 0.72);
    --v-scrim-ink: #FFFFFF;
    /* Mirrored, per the note in :root: the ink on the accent is dark here, so the
     * cap lightens and the edge darkens. 7.81:1 for the text, 3.20:1 for the edge. */
    --v-kbd-fill: rgba(255, 255, 255, 0.22);
    --v-kbd-line: rgba(27, 32, 40, 0.65);
    --v-spine: #81A1C1;
}

/* Same values as .dark above, applied by preference rather than by class.
 * Kept as a separate rule so the vendored blocks stay byte-identical to
 * the application and can be diffed against it mechanically. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v-ground: #242933;
    --v-surface: #2E3440;
    --v-surface-2: #353C4A;
    --v-ink: #ECEFF4;
    --v-ink-muted: #C2C9D6;
    --v-ink-faint: #828C9E;
    --v-line: #3B4252;
    --v-line-strong: #434C5E;
    --v-accent: #81A1C1;
    --v-accent-strong: #88C0D0;
    --v-accent-soft: #333F52;
    --v-accent-fill: #81A1C1;
    --v-accent-fill-hover: #88C0D0;
    --v-accent-ink: #1B2028;
    --v-good: #A3BE8C;
    --v-good-soft: #333F35;
    --v-warn: #EBCB8B;
    --v-warn-soft: #40391F;
    --v-danger: #D08770;
    --v-danger-soft: #40312B;
    --v-danger-ink: #FFFFFF;
    --v-info: #88C0D0;
    --v-info-soft: #2C3A40;
    --v-warn-strong: #EBCB8B;
    --v-info-strong: #88C0D0;
    --v-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --v-scrim: rgba(18, 21, 27, 0.72);
    --v-scrim-ink: #FFFFFF;
    --v-kbd-fill: rgba(255, 255, 255, 0.22);
    --v-kbd-line: rgba(27, 32, 40, 0.65);
    --v-spine: #81A1C1;
  }
}