/* COLOR PALETTES: edit these values, not the component styles below. */
:root {
  --light-background: #F7F2F5;
  --light-navigation: #FFFAFC;
  --light-card: #FFFAFC;
  --light-surface: #F3EAEF;
  --light-accent: #DF3F7B;
  --light-bright-accent: #DF3F7B;
  --light-action: #B32660; /* Stronger berry keeps white button text readable. */
  --light-on-action: #FFFFFF;
  --light-text: #2C1822;
  --light-muted: #7B6570;
  --light-border: #EADBE3;
  --light-error: #A0193A;
  --light-shadow: 0 4px 22px #2C182208;

  --dark-background: #170D14;
  --dark-navigation: #241520;
  --dark-card: #2B1924;
  --dark-surface: #35202C;
  --dark-accent: #E54887;
  --dark-bright-accent: #FF6AA2;
  --dark-action: #E54887;
  --dark-on-action: #170D14;
  --dark-text: #F8F2F6;
  --dark-muted: #BFAEB7;
  --dark-border: #4A2C3A;
  --dark-error: #FFA4B9;
  --dark-shadow: 0 4px 22px #00000012;

  /* ACTIVE TOKENS: shared by every page and component. */
  color-scheme: light;
  --background: var(--light-background);
  --navigation: var(--light-navigation);
  --card: var(--light-card);
  --surface: var(--light-surface);
  --accent: var(--light-accent);
  --bright-accent: var(--light-bright-accent);
  --action: var(--light-action);
  --on-action: var(--light-on-action);
  --text: var(--light-text);
  --muted: var(--light-muted);
  --border: var(--light-border);
  --error: var(--light-error);
  --shadow: var(--light-shadow);
  --link: var(--action);
  --radius: 1.15rem;
  --content-width: 72rem;
  --sidebar-width: 14.5rem;
  --mobile-nav-height: 4.5rem;
}
/* Without JavaScript (or with System selected), follow the device. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: var(--dark-background);
    --navigation: var(--dark-navigation);
    --card: var(--dark-card);
    --surface: var(--dark-surface);
    --accent: var(--dark-accent);
    --bright-accent: var(--dark-bright-accent);
    --action: var(--dark-action);
    --on-action: var(--dark-on-action);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --border: var(--dark-border);
    --error: var(--dark-error);
    --shadow: var(--dark-shadow);
    --link: var(--bright-accent);
  }
}
/* Explicit Dark also works when the device uses Light. Palettes stay defined once. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: var(--dark-background);
  --navigation: var(--dark-navigation);
  --card: var(--dark-card);
  --surface: var(--dark-surface);
  --accent: var(--dark-accent);
  --bright-accent: var(--dark-bright-accent);
  --action: var(--dark-action);
  --on-action: var(--dark-on-action);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --border: var(--dark-border);
  --error: var(--dark-error);
  --shadow: var(--dark-shadow);
  --link: var(--bright-accent);
}