/* DevHippo / Vsync design tokens - the single source of truth.
   Consumers copy this file verbatim; never edit local copies or add
   color hexes outside it. See BRAND.md for rules and rationale. */

:root {
  color-scheme: light;

  /* Surfaces.
     --bg: page ground
     --panel: elevated card / chrome (sidebar, titlebar, cards)
     --panel-2: inset / nested (inputs, wells on a panel)
     --raise: neutral pressed / secondary fill (tracks, ghost hover)
     Selected nav and filters should use --selected, not --raise. */
  --bg: #f3f1ea;
  --panel: #ffffff;
  --panel-2: #ebe8e0;
  --raise: #e2dfd6;
  --line: #cfcbc0;
  --line-soft: #e0ddd3;
  --text: #1b1e23;
  --text-dim: #5b636c;
  --text-faint: #8b929b;

  /* Brand accent. --accent is for fills, dots, badges; --accent-text is
     the only green readable as text on light grounds (~4:1 on cream). */
  --accent: #31ca98;
  --accent-text: #1d8664;
  --accent-ink: #06140d; /* text on accent-filled surfaces */

  /* Interaction. Same names in both schemes; light selected is an
     accent tint, not a bare warm gray. */
  --hover: color-mix(in oklab, var(--text) 5%, transparent);
  --selected: color-mix(in oklab, var(--accent) 12%, var(--panel));
  --selected-line: color-mix(in oklab, var(--accent) 34%, var(--line));
  --shadow:
    0 1px 2px color-mix(in oklab, var(--text) 7%, transparent),
    0 10px 28px color-mix(in oklab, var(--text) 6%, transparent);

  /* Semantic status */
  --ok: #1d8664;
  --bad: #c2483b;
  --warn: #a2660e;
  --info: #3b6ec4;

  /* Type. Web surfaces use the brand faces; the desktop app and admin
     panel deliberately use the native stacks (see BRAND.md). */
  --font-sans: Manrope, Arial, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --font-native: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-native-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Type scale - base 16px, ratio 1.2 (minor third). No raw font-size
     outside these steps; to resize something, move it a step. */
  --text-xs: 0.688rem; /* 11px - micro labels, badges */
  --text-sm: 0.844rem; /* 13.5px - UI body (desktop app, admin), captions */
  --text-base: 1rem; /* 16px - web body */
  --text-lg: 1.188rem; /* 19px - lede, prominent UI */
  --text-xl: 1.438rem; /* 23px - h3, card titles */
  --text-2xl: 1.75rem; /* 28px - h2 */
  --text-3xl: 2.063rem; /* 33px - h1 on content pages */
  --text-4xl: 2.5rem; /* 40px - small display */
  --display-md: clamp(
    2.063rem,
    5vw,
    3.563rem
  ); /* 33→57px - marketing sections */
  --display-lg: clamp(3rem, 7vw, 5.188rem); /* 48→83px - hero */

  /* What travels with size */
  --leading-tight: 1.1; /* display */
  --leading-snug: 1.35; /* headings */
  --leading-normal: 1.5; /* UI text */
  --leading-relaxed: 1.65; /* reading copy */
  --tracking-tight: -0.045em; /* display and headings */
  --tracking-wide: 0.08em; /* uppercase labels */

  /* Shape */
  --radius: 9px;
  --radius-lg: 13px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b0c10;
    --panel: #13151b;
    --panel-2: #171a21;
    --raise: #1c2029;
    --line: #262a33;
    --line-soft: #1e222a;
    --text: #e9e7e0;
    --text-dim: #929aa4;
    --text-faint: #646b75;
    --accent: #31ca98;
    --accent-text: #31ca98;
    --accent-ink: #06140d;
    --hover: color-mix(in oklab, var(--text) 6%, transparent);
    --selected: color-mix(in oklab, var(--accent) 14%, var(--panel));
    --selected-line: color-mix(in oklab, var(--accent) 40%, var(--line));
    --shadow:
      0 1px 2px color-mix(in oklab, #000 40%, transparent),
      0 16px 40px color-mix(in oklab, #000 45%, transparent);
    --ok: #31ca98;
    --bad: #ff6b6b;
    --warn: #ffae4d;
    --info: #6b94ff;
  }
}

/* Explicit opt-in per surface, overriding the OS preference.
   The attribute can be placed on any element (not just :root) to control
   individual subtrees while still using the same semantic token names. */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1ea;
  --panel: #ffffff;
  --panel-2: #ebe8e0;
  --raise: #e2dfd6;
  --line: #cfcbc0;
  --line-soft: #e0ddd3;
  --text: #1b1e23;
  --text-dim: #5b636c;
  --text-faint: #8b929b;
  --accent: #31ca98;
  --accent-text: #1d8664;
  --accent-ink: #06140d;
  --hover: color-mix(in oklab, var(--text) 5%, transparent);
  --selected: color-mix(in oklab, var(--accent) 12%, var(--panel));
  --selected-line: color-mix(in oklab, var(--accent) 34%, var(--line));
  --shadow:
    0 1px 2px color-mix(in oklab, var(--text) 7%, transparent),
    0 10px 28px color-mix(in oklab, var(--text) 6%, transparent);
  --ok: #1d8664;
  --bad: #c2483b;
  --warn: #a2660e;
  --info: #3b6ec4;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c10;
  --panel: #13151b;
  --panel-2: #171a21;
  --raise: #1c2029;
  --line: #262a33;
  --line-soft: #1e222a;
  --text: #e9e7e0;
  --text-dim: #929aa4;
  --text-faint: #646b75;
  --accent: #31ca98;
  --accent-text: #31ca98;
  --accent-ink: #06140d;
  --hover: color-mix(in oklab, var(--text) 6%, transparent);
  --selected: color-mix(in oklab, var(--accent) 14%, var(--panel));
  --selected-line: color-mix(in oklab, var(--accent) 40%, var(--line));
  --shadow:
    0 1px 2px color-mix(in oklab, #000 40%, transparent),
    0 16px 40px color-mix(in oklab, #000 45%, transparent);
  --ok: #31ca98;
  --bad: #ff6b6b;
  --warn: #ffae4d;
  --info: #6b94ff;
}