/**
 * Rolige Hænder — ALT hvad denne kunde ændrer.
 *
 * En ny kunde er en kopi af denne fil med andre farver. Intet andet.
 * Struktur, spacing og typeskala kommer fra shared/tokens/base.css.
 *
 * Farverne er Material 3-rollepar: hver baggrund har en tilhørende
 * on-farve med garanteret kontrast. Brug ALDRIG en on-farve på en anden
 * baggrund end sin egen.
 */

:root {
  --color-primary: #006a63;
  --color-on-primary: #ffffff;
  --color-primary-container: #4fd1c5;
  --color-on-primary-container: #005750;

  --color-secondary: #9f4035;
  --color-on-secondary: #ffffff;

  --color-surface: #f9f9ff;
  --color-on-surface: #121c2c;
  --color-surface-container: #e7eeff;
  --color-surface-container-high: #dee8ff;
  --color-on-surface-variant: #3c4947;

  --color-outline: #6c7a77;
  --color-outline-variant: #bbc9c7;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

/**
 * Mørk variant.
 *
 * Kun tokens skiftes; ingen komponent kender til temaet. Det er hele pointen
 * med rollepar-navngivningen.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #5adace;
    --color-on-primary: #00201d;
    --color-primary-container: #005750;
    --color-on-primary-container: #79f7ea;

    --color-secondary: #ffb4a9;
    --color-on-secondary: #410000;

    --color-surface: #101418;
    --color-on-surface: #e0e3e8;
    --color-surface-container: #1c2024;
    --color-surface-container-high: #262a2f;
    --color-on-surface-variant: #bfc8c6;

    --color-outline: #89938f;
    --color-outline-variant: #3f4947;

    --color-error: #ffb4ab;
    --color-on-error: #690005;
    --color-error-container: #93000a;
    --color-on-error-container: #ffdad6;
  }
}