/*
 * RECAP "Highlighter" design tokens — the one source for recap.cx colour,
 * type and shape (Igor picked Highlighter as the brand look, 2026-10-08).
 * See web_apps/vozee/brand.md.
 *
 * Served to marketing pages at /marketing/highlighter/tokens.css. The app
 * keeps a byte-identical copy at vozee-ui/src/highlighter/tokens.css;
 * lib/__tests__/highlighter-tokens.test.ts fails if the two drift, so edit
 * this file and copy it across.
 *
 * Theme: light by default, dark when the visitor's system asks for it.
 * html[data-theme="light" | "dark"] overrides the system (the toggle sets it).
 * html.dark also turns dark on, because the React app marks dark mode with
 * that class. An app that lets a user pick light on a dark system must also
 * set data-theme="light", or the system rule below wins.
 * Accent: yellow by default; html[data-hl="green" | "orange" | "blue" | "pink"]
 * swaps the highlighter colour.
 */

:root {
  color-scheme: light;

  /* Paper and ink */
  --rc-paper: #f6f3ec;        /* page background */
  --rc-surface: #fffdf8;      /* cards, documents, inputs */
  --rc-sunken: #efeadf;       /* wells, chips, code */
  --rc-ink: #121212;          /* headings, primary text */
  --rc-ink-2: #3b3b3b;        /* body text */
  --rc-ink-3: #6b6b6b;        /* secondary text */
  --rc-ink-4: #a39e92;        /* timestamps, placeholders */
  --rc-rule: #e3ddd0;         /* borders, dividers */

  /* The highlighter (accent) */
  --rc-hl-rgb: 255, 233, 77;
  --rc-hl: #ffe94d;           /* marks, recap note, logo bar */
  --rc-hl-strong: #ffd60a;    /* button offset shadow, underlines */
  --rc-hl-deep: #8a7a10;      /* accent shadow on dark */
  --rc-on-hl: #15130c;        /* text sitting on the highlighter */

  /* Mark colours with meaning (goal met, missed or blocker, info) */
  --rc-mark-good: #b8f2c9;
  --rc-mark-bad: #ffb3cf;
  --rc-mark-info: #bfe0ff;

  /* Recording red: RECAP S2 and RECAP Capture, the products that record */
  --rc-rec: #e5484d;

  /* Status */
  --rc-success: #1f9d55;
  --rc-warning: #b7791f;
  --rc-error: #d93a3f;

  /* Primary button: ink on paper with a highlighter offset */
  --rc-primary-bg: var(--rc-ink);
  --rc-primary-fg: #fff;
  --rc-primary-shadow: var(--rc-hl-strong);

  /* Type */
  --rc-font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --rc-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rc-font-mono: 'SF Mono', ui-monospace, 'Fira Code', 'Cascadia Code', monospace;

  /* Shape and depth */
  --rc-radius-sm: 8px;
  --rc-radius: 12px;
  --rc-radius-lg: 18px;
  --rc-shadow: 0 0 0 1px var(--rc-rule), 0 30px 60px -36px rgba(60, 40, 0, 0.35);
  --rc-shadow-note: 0 18px 30px -16px rgba(80, 60, 0, 0.45);
  --rc-nav-bg: rgba(246, 243, 236, 0.86);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rc-paper: #121110;
    --rc-surface: #1c1a18;
    --rc-sunken: #24221f;
    --rc-ink: #f4f0e6;
    --rc-ink-2: #c8c2b5;
    --rc-ink-3: #8d877a;
    --rc-ink-4: #6c675d;
    --rc-rule: #2d2a25;
    --rc-success: #4ade80;
    --rc-warning: #fbbf24;
    --rc-error: #ff6b6f;
    --rc-primary-bg: var(--rc-hl);
    --rc-primary-fg: var(--rc-on-hl);
    --rc-primary-shadow: var(--rc-hl-deep);
    --rc-shadow: 0 0 0 1px var(--rc-rule), 0 30px 60px -36px rgba(0, 0, 0, 0.8);
    --rc-shadow-note: 0 22px 40px -14px rgba(0, 0, 0, 0.75), 0 0 60px -10px rgba(var(--rc-hl-rgb), 0.25);
    --rc-nav-bg: rgba(18, 17, 16, 0.82);
  }
}

:root[data-theme="dark"],
:root.dark {
  color-scheme: dark;
  --rc-paper: #121110;
  --rc-surface: #1c1a18;
  --rc-sunken: #24221f;
  --rc-ink: #f4f0e6;
  --rc-ink-2: #c8c2b5;
  --rc-ink-3: #8d877a;
  --rc-ink-4: #6c675d;
  --rc-rule: #2d2a25;
  --rc-success: #4ade80;
  --rc-warning: #fbbf24;
  --rc-error: #ff6b6f;
  --rc-primary-bg: var(--rc-hl);
  --rc-primary-fg: var(--rc-on-hl);
  --rc-primary-shadow: var(--rc-hl-deep);
  --rc-shadow: 0 0 0 1px var(--rc-rule), 0 30px 60px -36px rgba(0, 0, 0, 0.8);
  --rc-shadow-note: 0 22px 40px -14px rgba(0, 0, 0, 0.75), 0 0 60px -10px rgba(var(--rc-hl-rgb), 0.25);
  --rc-nav-bg: rgba(18, 17, 16, 0.82);
}

/* Highlighter colours */
:root[data-hl="green"]  { --rc-hl-rgb: 157, 252, 138; --rc-hl: #9dfc8a; --rc-hl-strong: #5ee04a; --rc-hl-deep: #2f7a24; }
:root[data-hl="orange"] { --rc-hl-rgb: 255, 179, 92;  --rc-hl: #ffb35c; --rc-hl-strong: #ff9a1f; --rc-hl-deep: #8a4f0a; }
:root[data-hl="blue"]   { --rc-hl-rgb: 143, 211, 255; --rc-hl: #8fd3ff; --rc-hl-strong: #4fb6ff; --rc-hl-deep: #1f5f8a; }
:root[data-hl="pink"]   { --rc-hl-rgb: 255, 158, 208; --rc-hl: #ff9ed0; --rc-hl-strong: #ff6fb7; --rc-hl-deep: #8a2f5c; }