/* OVELRO design tokens — light + dark. Source: branding/tokens/ovelro-design-tokens.css (light only, from kit).
   Dark set is new design work (CLAUDE.md rule 8): --ovelro-signal fixed as accent, ink/paper roles inverted,
   dark surface scale derived from --ovelro-slate. Switch via [data-theme="dark"] on <html>. */

:root,
:root[data-theme="light"] {
  --ovelro-ink: #111315;
  --ovelro-slate: #2a2d33;
  --ovelro-paper: #f5f4ef;
  --ovelro-signal: #19c3a3;
  --ovelro-signal-dark: #119a80;
  --ovelro-mist: #e6f7f3;

  --ovelro-display: "Manrope", Inter, Arial, sans-serif;
  --ovelro-body: Inter, Arial, sans-serif;

  /* Semantic roles — reference these, never the raw palette names above, from component CSS/Razor. */
  --ovelro-bg: var(--ovelro-paper);
  --ovelro-surface: #ffffff;
  --ovelro-surface-raised: #ffffff;
  --ovelro-text: var(--ovelro-ink);
  --ovelro-text-muted: #55585f;
  --ovelro-border: #d6d7d2;
  /* --ovelro-signal itself (white text ratio 2.24:1) fails WCAG AA as a filled button background —
     --ovelro-accent diverges from it here (dark mode's --ovelro-accent stays === --ovelro-signal,
     which already passes at 8.56:1). Same hue, darkened just enough for 4.5:1 (4.92:1 measured).
     --ovelro-signal itself is untouched — still the brand teal for icons/borders/dark-mode text,
     where this contrast requirement doesn't apply the same way. See docs/ROADMAP.md Phase 6. */
  --ovelro-accent: #107f6a;
  --ovelro-accent-hover: #0e725f;
  --ovelro-accent-contrast: #ffffff;
  --ovelro-accent-soft: var(--ovelro-mist);
  --ovelro-shadow: rgba(17, 19, 21, 0.06);
  --ovelro-nav-bg: var(--ovelro-ink);
  --ovelro-nav-text: #ffffff;
  /* WCAG AA (4.5:1) small-text variant of --ovelro-signal-dark (3.20:1, fails at kicker size/weight)
     — darkened, not a different hue, so it still reads as the brand teal. See docs/ROADMAP.md Phase 6. */
  --ovelro-kicker-text: #0e7b66;

  /* Status colors for health/state indicators (e.g. backoffice dashboard). Fixed hues, one value
     per theme chosen for 4.5:1 text contrast against that theme's --ovelro-surface, same pattern
     as --ovelro-accent's light/dark divergence above. */
  --ovelro-success: #0f8a5f;
  --ovelro-danger: #c22f3a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ovelro-bg: #0d0f11;
    --ovelro-surface: #17191c;
    --ovelro-surface-raised: #1e2124;
    --ovelro-text: #f2f2f0;
    --ovelro-text-muted: #a7abb3;
    --ovelro-border: #33373d;
    --ovelro-accent: var(--ovelro-signal);
    --ovelro-accent-hover: #22d9b6;
    --ovelro-accent-contrast: #06110f;
    --ovelro-accent-soft: #0f2a25;
    --ovelro-shadow: rgba(0, 0, 0, 0.4);
    --ovelro-nav-bg: #0a0b0d;
    --ovelro-nav-text: #f2f2f0;
    /* --ovelro-signal itself already clears AA (8.57:1) against the dark background — no darkening needed. */
    --ovelro-kicker-text: var(--ovelro-signal);

    --ovelro-success: #3ddc97;
    --ovelro-danger: #ff6b6b;
  }
}

:root[data-theme="dark"] {
  --ovelro-bg: #0d0f11;
  --ovelro-surface: #17191c;
  --ovelro-surface-raised: #1e2124;
  --ovelro-text: #f2f2f0;
  --ovelro-text-muted: #a7abb3;
  --ovelro-border: #33373d;
  --ovelro-accent: var(--ovelro-signal);
  --ovelro-accent-hover: #22d9b6;
  --ovelro-accent-contrast: #06110f;
  --ovelro-accent-soft: #0f2a25;
  --ovelro-shadow: rgba(0, 0, 0, 0.4);
  --ovelro-nav-bg: #0a0b0d;
  --ovelro-nav-text: #f2f2f0;
  --ovelro-kicker-text: var(--ovelro-signal);

  --ovelro-success: #3ddc97;
  --ovelro-danger: #ff6b6b;
}

body {
  background: var(--ovelro-bg);
  color: var(--ovelro-text);
  font-family: var(--ovelro-body);
  transition: background-color 0.15s ease, color 0.15s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ovelro-display);
}