/* Design tokens. Owned by workforce/DESIGN_SYSTEM.md. Rules enforced by tokens.test.ts:
   generous spacing, NO border lines, subtle shadow only, eyebrows are plain light text. */
:host, :root {
  /* Colour (light) */
  --v-surface: #ffffff;
  --v-surface-raised: #f4f5f7;
  --v-ink: #14171c;
  --v-ink-muted: #4a5160;
  --v-accent: #2d5bff;
  --v-on-accent: #ffffff;
  --v-ok: #13795b;
  --v-partial: #9a5b00;
  --v-fail: #b3261e;
  /* Outlines drawn ON THE PAGE for the screenshot (Bad, Good, and the white edge that lets them read on a dark page). Fixed on purpose:
     the page under them is not Vehra's, so they do not follow the theme. White on each is at least 4.5:1. */
  --v-mark-bad: #e11d2a;
  --v-mask: #6b7280;
  --v-mark-good: #0b8a4a;
  --v-mark-halo: #ffffff;
  /* The one hairline: for TABLES only (the operator's exception to "no border lines"). Derived from the ink so it follows the theme. */
  --v-line: color-mix(in srgb, var(--v-ink) 9%, transparent);

  /* Space: generous, 8px base */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Compact scale: for the floating recorder ONLY (DESIGN_SYSTEM §8). Cards and pages keep the generous scale above. */
  --dock-1: 4px;
  --dock-2: 6px;
  --dock-3: 8px;
  --dock-4: 12px;

  /* Radius */
  --radius-control: 8px;
  --radius-panel: 14px;

  /* Elevation: soft, low opacity. The only separator besides space and tone. */
  --v-shadow-card: 0 1px 2px rgba(20, 23, 28, 0.04), 0 4px 16px rgba(20, 23, 28, 0.04);
  --v-shadow-float: 0 2px 4px rgba(20, 23, 28, 0.05), 0 12px 32px rgba(20, 23, 28, 0.08);

  /* Type */
  /* "Vehra Sans" is Manrope, embedded and registered by fonts.ts; the system fonts are what shows until it loads, or if it cannot. */
  --v-font-ui: "Vehra Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --v-line-height: 1.6;

  /* Motion */
  --v-motion: 120ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :host, :root {
    --v-surface: #16181d;
    --v-surface-raised: #1e2128;
    --v-ink: #eceef2;
    --v-ink-muted: #a4abb8;
    --v-accent: #7c9bff;
    --v-on-accent: #0b1020;
    --v-ok: #41c79b;
    --v-partial: #f0b34a;
    --v-fail: #ff8a80;
    --v-mark-bad: #e11d2a;
    --v-mask: #6b7280;
    --v-mark-good: #0b8a4a;
    --v-mark-halo: #ffffff;
  }
}

:root[data-theme="dark"], :host([data-theme="dark"]) {
  --v-surface: #16181d;
  --v-surface-raised: #1e2128;
  --v-ink: #eceef2;
  --v-ink-muted: #a4abb8;
  --v-accent: #7c9bff;
    --v-on-accent: #0b1020;
  --v-ok: #41c79b;
  --v-partial: #f0b34a;
  --v-fail: #ff8a80;
  --v-mark-bad: #e11d2a;
  --v-mask: #6b7280;
  --v-mark-good: #0b8a4a;
  --v-mark-halo: #ffffff;
}

.v-root { font: 13px/var(--v-line-height) var(--v-font-ui); color: var(--v-ink); }

/* Eyebrow: plain text, very light weight, NO container (no background, no border, no padding box). */
.v-eyebrow {
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 0.08em;
  color: var(--v-ink-muted);
  margin-bottom: var(--space-1);
}

.v-card { --v-control-bg: var(--v-surface);
  background: var(--v-surface-raised);
  border-radius: var(--radius-panel);
  box-shadow: var(--v-shadow-card);
  padding: var(--space-5);
}
.v-float { background: var(--v-surface); border-radius: var(--radius-panel); box-shadow: var(--v-shadow-float); padding: var(--space-5); }

.v-control {
  background: var(--v-surface-raised);
  color: var(--v-ink);
  border-radius: var(--radius-control);
  box-shadow: var(--v-shadow-card);
  padding: var(--space-3) var(--space-4);
}

/* Keyboard focus is required for accessibility and is the one place a ring is allowed. */
.v-control:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; }

/* The status chip is the one container allowed to carry colour: state must be the loudest thing. */
/* Status is an icon, coloured by state: a ring with a tick (complete), a half-filled ring (partial), a dashed ring (missing). The icon
   differs per state, so it is never colour alone. No badge, no pill, no tint, no label: the word is on hover and for screen readers. */
.v-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.v-chip .v-ico { width: 15px; height: 15px; stroke-width: 2; }
.v-chip[data-kind="COMPLETE"] { color: var(--v-ok); }
.v-chip[data-kind="PARTIAL"] { color: var(--v-partial); }
.v-chip[data-kind="MISSING"] { color: var(--v-fail); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }