/* Zen Family – design tokens. Generert fra tokens.json. */
:root,
[data-theme="light"] {
  --ground: #F3F1EB;
  --surface: #FBFAF7;
  --surface-sunk: #EAE7DF;
  --line: #D7D3C8;
  --ink: #24302B;
  --ink-muted: #5A6760;
  --moss: #34493F;
  --on-moss: #F3F1EB;
  --stone-moss: #34493F;
  --stone-sage: #7C9686;
  --stone-sand: #BFA37A;
  --stone-mist: #6F8BA1;
  --stone-sage-soft: #DCE4DE;
  --stone-sand-soft: #ECE3D2;
  --stone-mist-soft: #DAE2E8;
  --stone-moss-soft: #D6DDD9;
  --attention: #965F33;
}

[data-theme="dark"] {
  --ground: #1B211E;
  --surface: #232A27;
  --surface-sunk: #151A18;
  --line: #36413C;
  --ink: #ECE9E1;
  --ink-muted: #A5B0A9;
  --moss: #A9C0B1;
  --on-moss: #1B211E;
  --stone-moss: #ECE9E1;
  --stone-sage: #A9C0B1;
  --stone-sand: #D9C6A2;
  --stone-mist: #9BB1C3;
  --stone-sage-soft: #2D3A33;
  --stone-sand-soft: #3A352B;
  --stone-mist-soft: #2B3640;
  --stone-moss-soft: #313A36;
  --attention: #D9A374;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1B211E;
    --surface: #232A27;
    --surface-sunk: #151A18;
    --line: #36413C;
    --ink: #ECE9E1;
    --ink-muted: #A5B0A9;
    --moss: #A9C0B1;
    --on-moss: #1B211E;
    --stone-moss: #ECE9E1;
    --stone-sage: #A9C0B1;
    --stone-sand: #D9C6A2;
    --stone-mist: #9BB1C3;
    --stone-sage-soft: #2D3A33;
    --stone-sand-soft: #3A352B;
    --stone-mist-soft: #2B3640;
    --stone-moss-soft: #313A36;
    --attention: #D9A374;
  }
}

:root {
  --font-sans: "Yu Gothic UI", "Yu Gothic", YuGothic, "Zen Kaku Gothic New", system-ui, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* De fire søylene (Helse, Hjem, Hverdag, Hjerte). Fargen betyr ALLTID område, aldri person. */
  --area-helse: var(--stone-mist);
  --area-helse-soft: var(--stone-mist-soft);
  --area-hjem: var(--stone-sand);
  --area-hjem-soft: var(--stone-sand-soft);
  --area-hverdag: var(--stone-sage);
  --area-hverdag-soft: var(--stone-sage-soft);
  --area-hjerte: var(--stone-moss);
  --area-hjerte-soft: var(--stone-moss-soft);
}

.text-display { font-family: var(--font-sans); font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.5px; }
.text-title { font-family: var(--font-sans); font-size: 26px; line-height: 32px; font-weight: 700; }
.text-heading { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 700; }
.text-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.text-body-light { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 300; }
.text-small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.text-label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.3px; }