/* RedStone Recruiting: site theme layer.
   Loads after globals.css and overrides only the colour tokens that
   carry the brand. The shared design system (tokens/tokens.json) is untouched,
   so other sites keep their own brand.

   Brand red is #DC2523, sampled from the RedStone logo.
   White on it is 4.85:1 and it is 4.85:1 on the white page, so it clears 4.5:1.

   How the red is applied follows foundations/colors.md, "Choosing and applying
   a brand color": red already means error, so it is NOT used for actions.
   - Identity and errors: brand red.
   - Interactive elements (buttons, links, focus, selected): the darkest neutral,
     fill.strong / text.strong, via the Button component's "neutral" tone.
   Dark values are the red lightened for dark backgrounds (#FF7470, 7.04:1 on
   the dark surface), following the system's light/dark pairs. */

:root, [data-theme="light"] {
  /* Brand: identity only */
  --color-text-brand: rgba(220, 37, 35, 1.0);
  --color-fill-brand-strong: rgba(220, 37, 35, 1.0);
  --color-fill-brand-weak: rgba(220, 37, 35, 0.05);
  --color-stroke-brand-strong: rgba(220, 37, 35, 0.8);
  --color-stroke-brand-weak: rgba(220, 37, 35, 0.2);
  --color-icon-brand: rgba(220, 37, 35, 0.8);

  /* Errors: the one red on the page, so red keeps a single meaning */
  --color-text-error: rgba(220, 37, 35, 1.0);
  --color-fill-error-strong: rgba(220, 37, 35, 1.0);
  --color-fill-error-weak: rgba(220, 37, 35, 0.05);
  --color-stroke-error-strong: rgba(220, 37, 35, 0.8);
  --color-stroke-error-weak: rgba(220, 37, 35, 0.14);
  --color-icon-error: rgba(220, 37, 35, 0.8);

  /* Interaction: darkest neutral instead of the brand colour */
  --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-brand: rgba(255, 116, 112, 1.0);
  --color-fill-brand-strong: rgba(255, 116, 112, 1.0);
  --color-fill-brand-weak: rgba(255, 116, 112, 0.06);
  --color-stroke-brand-strong: rgba(255, 116, 112, 0.8);
  --color-stroke-brand-weak: rgba(255, 116, 112, 0.2);
  --color-icon-brand: rgba(255, 116, 112, 0.8);

  --color-text-error: rgba(255, 116, 112, 1.0);
  --color-fill-error-strong: rgba(255, 116, 112, 1.0);
  --color-fill-error-weak: rgba(255, 116, 112, 0.08);
  --color-stroke-error-strong: rgba(255, 116, 112, 0.8);
  --color-stroke-error-weak: rgba(255, 116, 112, 0.2);
  --color-icon-error: rgba(255, 116, 112, 0.8);

  --color-stroke-focus: var(--color-fill-strong);
  --color-stroke-selected: var(--color-fill-strong);
  --color-fill-selected: var(--color-fill-strong);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text-brand: rgba(255, 116, 112, 1.0);
    --color-fill-brand-strong: rgba(255, 116, 112, 1.0);
    --color-fill-brand-weak: rgba(255, 116, 112, 0.06);
    --color-stroke-brand-strong: rgba(255, 116, 112, 0.8);
    --color-stroke-brand-weak: rgba(255, 116, 112, 0.2);
    --color-icon-brand: rgba(255, 116, 112, 0.8);

    --color-text-error: rgba(255, 116, 112, 1.0);
    --color-fill-error-strong: rgba(255, 116, 112, 1.0);
    --color-fill-error-weak: rgba(255, 116, 112, 0.08);
    --color-stroke-error-strong: rgba(255, 116, 112, 0.8);
    --color-stroke-error-weak: rgba(255, 116, 112, 0.2);
    --color-icon-error: rgba(255, 116, 112, 0.8);

    --color-stroke-focus: var(--color-fill-strong);
    --color-stroke-selected: var(--color-fill-strong);
    --color-fill-selected: var(--color-fill-strong);
  }
}