/* Malve design tokens. Källa: design/system/project/tokens.json (kör check-tokens.py efter ändring). Mörkt är standard, ljust följer systemet eller [data-theme="light"]. */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;800&family=IBM+Plex+Mono:wght@400;500&family=Audiowide&display=swap");

:root {
  color-scheme: dark;

  --bg: #111013;
  --surface: #19171D;
  --surface-2: #221F27;
  --line: #302C36;
  --text: #ECE8E2;
  --muted: #A09BA6;
  --faint: #6F6A76;

  --leaf: #8CC49B;
  --on-leaf: #0F1A13;
  --leaf-soft: rgb(140 196 155 / .14);
  --mallow: #B99AEB;
  --on-mallow: #17111F;
  --mallow-soft: rgb(185 154 235 / .16);
  --amber: #E3AD6A;
  --danger: #EE7F72;

  --data-leaf: #8CC49B;
  --data-mallow: #B99AEB;
  --data-amber: #E3AD6A;
  --data-sky: #7FB3E6;
  --data-rose: #E58FA8;
  --data-teal: #6CC5BF;
  --data-sand: #CDB98A;
  --data-clay: #E08A6A;
  --on-data: #111013;

  --font-ui: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mark: "Audiowide", var(--font-ui);

  --text-12: .75rem; --text-14: .875rem; --text-16: 1rem; --text-18: 1.125rem;
  --text-22: 1.375rem; --text-28: 1.75rem; --text-36: 2.25rem; --text-48: 3rem;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  --radius-tag: 6px; --radius-control: 10px; --radius-card: 14px;
  --radius-sheet: 22px; --radius-pill: 999px;

  --shadow-overlay: 0 24px 64px rgb(0 0 0 / .5);
  --scrim: rgb(8 7 10 / .6);

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-press: 120ms; --dur-fade: 150ms; --dur-sheet: 220ms;

  --tap: 44px;
  --sidebar: 232px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F2F0F3; --surface: #FBFAFC; --surface-2: #E9E6EC; --line: #DAD5DE;
    --text: #19171C; --muted: #615C67; --faint: #8E8994;
    --leaf: #2D6B45; --on-leaf: #FFFFFF; --leaf-soft: rgb(45 107 69 / .12);
    --mallow: #6B49A8; --on-mallow: #FFFFFF; --mallow-soft: rgb(107 73 168 / .12);
    --amber: #94600F; --danger: #B53B30;
    --shadow-overlay: 0 24px 64px rgb(25 23 28 / .18);
    --scrim: rgb(25 23 28 / .4);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F0F3; --surface: #FBFAFC; --surface-2: #E9E6EC; --line: #DAD5DE;
  --text: #19171C; --muted: #615C67; --faint: #8E8994;
  --leaf: #2D6B45; --on-leaf: #FFFFFF; --leaf-soft: rgb(45 107 69 / .12);
  --mallow: #6B49A8; --on-mallow: #FFFFFF; --mallow-soft: rgb(107 73 168 / .12);
  --amber: #94600F; --danger: #B53B30;
  --shadow-overlay: 0 24px 64px rgb(25 23 28 / .18);
  --scrim: rgb(25 23 28 / .4);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-sheet: 150ms; }
}