/* Vox Book: site theme layer.
   Loads after globals.css and overrides only the colour tokens that carry the
   brand, the same way RedStone's theme does. The shared design system is untouched.

   Brand yellow is #FFBE00, from the Vox Book logo.
   - Yellow is too light to read as text on white (1.6:1), so on light surfaces it
     is only ever a fill, with dark text on it (about 11:1).
   - On dark surfaces it works as text, icon and focus colour (about 11:1).
   - Primary buttons are yellow with dark text in both themes. Yellow doesn't mean
     error, so unlike RedStone's red it can carry the action.
   - Focus and selected states use the darkest neutral on light surfaces, because a
     yellow ring on white is too faint to see (needs 3:1).

   One token is added: --color-text-on-brand, the text colour on a yellow fill. */

:root, [data-theme="light"] {
  --color-text-on-brand: rgba(0, 6, 38, 0.9);

  /* Brand: fills only on light surfaces. Text and icons use a darkened yellow (5.6:1). */
  --color-text-brand: rgba(138, 95, 0, 1.0);
  --color-icon-brand: rgba(138, 95, 0, 1.0);
  --color-fill-brand-strong: rgba(255, 190, 0, 1.0);
  --color-fill-brand-weak: rgba(255, 190, 0, 0.14);
  --color-stroke-brand-strong: rgba(255, 190, 0, 1.0);
  --color-stroke-brand-weak: rgba(255, 190, 0, 0.45);

  /* Interaction on light surfaces: darkest neutral */
  --color-stroke-focus: var(--color-fill-strong);
  --color-stroke-selected: var(--color-fill-strong);
  --color-fill-selected: var(--color-fill-strong);
}

:root[data-theme="dark"], [data-theme="dark"] {
  --color-text-on-brand: rgba(0, 6, 38, 0.9);

  --color-text-brand: rgba(255, 190, 0, 1.0);
  --color-icon-brand: rgba(255, 190, 0, 1.0);
  --color-fill-brand-strong: rgba(255, 190, 0, 1.0);
  --color-fill-brand-weak: rgba(255, 190, 0, 0.1);
  --color-stroke-brand-strong: rgba(255, 190, 0, 1.0);
  --color-stroke-brand-weak: rgba(255, 190, 0, 0.35);

  /* Interaction on dark surfaces: yellow reads clearly */
  --color-stroke-focus: rgba(255, 190, 0, 1.0);
  --color-stroke-selected: rgba(255, 190, 0, 1.0);
  --color-fill-selected: rgba(255, 190, 0, 1.0);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text-on-brand: rgba(0, 6, 38, 0.9);

    --color-text-brand: rgba(255, 190, 0, 1.0);
    --color-icon-brand: rgba(255, 190, 0, 1.0);
    --color-fill-brand-strong: rgba(255, 190, 0, 1.0);
    --color-fill-brand-weak: rgba(255, 190, 0, 0.1);
    --color-stroke-brand-strong: rgba(255, 190, 0, 1.0);
    --color-stroke-brand-weak: rgba(255, 190, 0, 0.35);

    --color-stroke-focus: rgba(255, 190, 0, 1.0);
    --color-stroke-selected: rgba(255, 190, 0, 1.0);
    --color-fill-selected: rgba(255, 190, 0, 1.0);
  }
}