/* ============================================================
   SCHEMES — Relume Prompt
   Sections opt into a color scheme. Every nested element inherits
   text / surface / border / button colors automatically.

   Scheme Light (.scheme-light / .scheme-1) — PRIMARY. White ground,
     near-black ink. This is what the live portfolio uses everywhere.
   Scheme Dark  (.scheme-dark / .scheme-2)  — inverted, for contrast
     sections (footers, full-bleed statements).

   Note: the source export's globals.css implements its `.scheme-1`
   utility as the LIGHT scheme, so .scheme-1 here = Light to stay
   faithful to the rendered product.
   ============================================================ */

:root {
  /* default = Light */
  --background: var(--color-white);
  --surface: var(--color-white);
  --surface-sunken: var(--color-neutral-lightest);
  --text: var(--color-neutral-darkest);
  --text-muted: var(--color-neutral);
  --border: var(--color-ink-15);
  --border-strong: var(--color-ink-30);
  --btn-bg: var(--color-woodsmoke);
  --btn-bg-hover: var(--color-woodsmoke-dark);
  --btn-text: var(--color-white);
  --btn-secondary-border: var(--color-ink-15);
  --btn-secondary-hover: var(--color-ink-5);
  --overlay: var(--color-ink-50);
  --accent: var(--color-neon-carrot);
}

.scheme-light,
.scheme-1 {
  --background: var(--color-white);
  --surface: var(--color-white);
  --surface-sunken: var(--color-neutral-lightest);
  --text: var(--color-neutral-darkest);
  --text-muted: var(--color-neutral);
  --border: var(--color-ink-15);
  --border-strong: var(--color-ink-30);
  --btn-bg: var(--color-woodsmoke);
  --btn-bg-hover: var(--color-woodsmoke-dark);
  --btn-text: var(--color-white);
  --btn-secondary-border: var(--color-ink-15);
  --btn-secondary-hover: var(--color-ink-5);
  --overlay: var(--color-ink-50);
  --accent: var(--color-neon-carrot);

  background-color: var(--background);
  color: var(--text);
}

.scheme-dark,
.scheme-2 {
  --background: var(--color-neutral-darkest);
  --surface: var(--color-neutral-darker);
  --surface-sunken: var(--color-woodsmoke);
  --text: var(--color-white);
  --text-muted: var(--color-neutral-light);
  --border: var(--color-white-15);
  --border-strong: var(--color-white-30);
  --btn-bg: var(--color-white);
  --btn-bg-hover: var(--color-neutral-lighter);
  --btn-text: var(--color-neutral-darkest);
  --btn-secondary-border: var(--color-white-20);
  --btn-secondary-hover: var(--color-white-10);
  --overlay: rgba(0, 0, 0, 0.6);
  --accent: var(--color-neon-carrot);

  background-color: var(--background);
  color: var(--text);
}