/* Loop — placeholder brand identity.
 *
 * This is the ONLY stylesheet that defines the product's visual identity:
 *
 *   1. the colour scheme — the guide's semantic colour tokens plus the accent, per theme;
 *   2. the font stack.
 *
 * Component styles (loop.css) consume these variables and never define or hard-code them, so a
 * rebrand is a change to this file plus BRAND in product/lms/branding.py. Procedure: docs/branding.md.
 *
 * To add a second scheme, copy the three blocks below under a `[data-brand-scheme="<name>"]`
 * selector. One live scheme is enough today.
 *
 * Every value is the Loop guide's placeholder palette and is provisional.
 */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Accent (light theme). */
  --accent: #c72e25;

  /* Semantic neutrals (guide set), light theme. */
  --bg: #ffffff;
  --surface: #f4f4f5;
  --text: #171719;
  --muted: #626268;
  --line: #dedee2;
  --selected: #171719;
  --inverse: #ffffff;
  /* The current/selected *row*: a subtle tint that keeps the ordinary ink, unlike
     `--selected`, which is a solid control and needs `--inverse`. Calibrated to YouTube's
     light playback-list highlight. */
  --highlight: #f2f2f2;
  --highlight-hover: #e6e6e6;
  --focus: #246bdd;

  /* Document stage (pdf-only-lessons): the always-dark matte and its translucent chrome, mirroring
     the video letterbox. `--accent-tint` backs the locked "Subscribe to download" affordance. */
  --matte: #000000;
  --chrome: rgba(20, 20, 23, 0.94);
  --on-matte: #f5f5f7;
  --muted-on-matte: #bbbcc5;
  --scrim: rgba(0, 0, 0, 0.55);
  --accent-tint: #fbe9e7;
  /* Paper stays light in both themes: it is a document, not chrome. */
  --paper: #ffffff;
  --shadow: rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] {
  --accent: #ff756b;
  --bg: #111113;
  --surface: #242427;
  --text: #f5f5f7;
  --muted: #aaaab2;
  --line: #3b3b41;
  --selected: #f5f5f7;
  --inverse: #171719;
  --highlight: #2c2c31;
  --highlight-hover: #383840;
  --focus: #8fb9ff;
  --accent-tint: #402522;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --accent: #ff756b;
    --bg: #111113;
    --surface: #242427;
    --text: #f5f5f7;
    --muted: #aaaab2;
    --line: #3b3b41;
    --selected: #f5f5f7;
    --inverse: #171719;
    --highlight: #2c2c31;
    --highlight-hover: #383840;
    --focus: #8fb9ff;
  }
}