/* ===================================================================
   yovel-skin.css — Yovel product palette overlay for the app's legal
   and support pages (privacy, terms, support, community-guidelines).

   These pages share the neutral.css STRUCTURE (layout, components,
   accordions, review widget, safe-area, reveal) but wear Yovel's own
   INDIGO identity so they clearly belong to the Yovel app, not the
   Dakkak Labs company. This file only re-defines the color tokens
   neutral.css already uses; it MUST be linked AFTER neutral.css.

   SPECIFICITY: neutral.css defines its light/dark tokens with
   `:root[data-theme="light"]` and `:root[data-theme="dark"]`
   (specificity 0,2,0) plus the default `:root` and a
   `@media(prefers-color-scheme:dark) :root:not([data-theme="light"])`
   block. To win, this file MUST mirror those exact selectors so that
   source order (this file loads last) decides — a bare
   `[data-theme="light"]` (0,1,0) would LOSE to neutral's 0,2,0 and the
   page would stay neutral. Palette lifted verbatim from yovel.html.
   Token-only override; every neutral.css a11y pattern is preserved.
   =================================================================== */

/* Light — default / system-light (beats neutral's `:root` by source order) */
:root {
  --bg: #fafafe;
  --bg-2: #f1f0fb;
  --surface: #ffffff;
  --surface-tint: #e0e7ff;
  --text: #1e1b4b;
  --text-soft: #4b4580;
  --primary: #3730a3;
  --primary-hover: #272082;
  --primary-on: #ffffff;
  --border: #c7c5e0;
  --border-strong: #a9a6cf;
  --focus: #1e1b4b;
}

/* Light — explicit toggle (mirrors neutral's `:root[data-theme="light"]` 0,2,0) */
:root[data-theme="light"] {
  --bg: #fafafe;
  --bg-2: #f1f0fb;
  --surface: #ffffff;
  --surface-tint: #e0e7ff;
  --text: #1e1b4b;
  --text-soft: #4b4580;
  --primary: #3730a3;
  --primary-hover: #272082;
  --primary-on: #ffffff;
  --border: #c7c5e0;
  --border-strong: #a9a6cf;
  --focus: #1e1b4b;
}

/* Dark — system preference, unless the user forced light
   (mirrors neutral's `@media … :root:not([data-theme="light"])`) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0d23;
    --bg-2: #1a1740;
    --surface: #1a1740;
    --surface-tint: #252252;
    --text: #eeedf5;
    --text-soft: #a5a1c2;
    --primary: #818cf8;
    --primary-hover: #a5b4fc;
    --primary-on: #0f0d23;
    --border: #3d3866;
    --border-strong: #514b85;
    --focus: #eeedf5;
  }
}

/* Dark — explicit toggle (mirrors neutral's `:root[data-theme="dark"]` 0,2,0) */
:root[data-theme="dark"] {
  --bg: #0f0d23;
  --bg-2: #1a1740;
  --surface: #1a1740;
  --surface-tint: #252252;
  --text: #eeedf5;
  --text-soft: #a5a1c2;
  --primary: #818cf8;
  --primary-hover: #a5b4fc;
  --primary-on: #0f0d23;
  --border: #3d3866;
  --border-strong: #514b85;
  --focus: #eeedf5;
}