/* quiply — generert fra design/tokens.json med «npm run tokens». Ikke rediger for hånd. */
:root {
  --aubergine-900: #2e0d26;
  --aubergine-800: #3b1432;
  --aubergine-600: #4a1d3f;
  --aubergine-400: #844373;
  --aubergine-300: #be8daf;
  --fersken-900: #ae4633;
  --fersken-800: #de6a54;
  --fersken-600: #ff9e8a;
  --fersken-400: #ffc4b7;
  --fersken-200: #fee7e2;
  --neutral-500: #848081;
  --neutral-300: #b6b3b2;
  --cream: #f8f8f4;
  --ink: #161619;
  --neutral-800: #383638;
  --neutral-700: #5a5758;
  --bg: var(--cream);
  --surface: var(--fersken-200);
  --surface-2: var(--cream);
  --surface-3: var(--fersken-400);
  --border: var(--cream);
  --text: var(--ink);
  --text-2: var(--neutral-800);
  --text-3: var(--neutral-800);
  --accent: var(--aubergine-600);
  --accent-hover: var(--aubergine-800);
  --accent-ink: var(--cream);
  --accent-soft: var(--fersken-400);
  --accent-soft-ink: var(--ink);
  --danger: var(--fersken-900);
  --danger-ink: var(--cream);
  --danger-soft: var(--cream);
  --warn: var(--fersken-900);
  --warn-soft: var(--cream);
  --ok: var(--aubergine-600);
  --on-bg: var(--ink);
  --on-bg-2: var(--neutral-800);
  --brand: var(--aubergine-600);
  --brand-deco: var(--aubergine-400);
  --icon-tile: var(--aubergine-600);
  --icon-mark: var(--cream);
  --bubble: var(--fersken-200);
  --bubble-ink: var(--ink);
  --bubble-mine: var(--fersken-400);
  --bubble-mine-ink: var(--ink);
  --header-bg: rgba(248, 248, 244, 0.9);
  --backdrop: rgba(248, 248, 244, 0.6);
  --shadow: 0 1px 2px rgba(46, 13, 38, 0.05), 0 4px 16px rgba(46, 13, 38, 0.06);
  --shadow-lg: 0 -8px 40px rgba(22, 22, 25, 0.18);
  --focus-ring: 0 0 0 3px #4a1d3f;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --tap: 44px;
  --control: 48px;
  --control-sm: 40px;
  --content-width: 620px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-bubble: 26px;
  --radius-pill: 999px;
  --font-display: "Red Hat Display", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fs-display: 2.375rem;
  --fs-display-sm: 1.8125rem;
  --fs-title: 1.75rem;
  --fs-heading: 1.25rem;
  --fs-heading-sm: 1.0625rem;
  --fs-overline: 0.8125rem;
  --fs-large: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-code: 1.0625rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--aubergine-900);
    --surface: var(--aubergine-800);
    --surface-2: var(--aubergine-900);
    --surface-3: var(--aubergine-600);
    --border: var(--aubergine-900);
    --text: var(--cream);
    --text-2: var(--neutral-300);
    --text-3: var(--neutral-300);
    --accent: var(--fersken-600);
    --accent-hover: var(--fersken-800);
    --accent-ink: var(--ink);
    --accent-soft: var(--aubergine-400);
    --accent-soft-ink: var(--cream);
    --danger: var(--fersken-400);
    --danger-ink: var(--ink);
    --danger-soft: var(--aubergine-900);
    --warn: var(--fersken-200);
    --warn-soft: var(--aubergine-900);
    --ok: var(--aubergine-300);
    --on-bg: var(--cream);
    --on-bg-2: var(--neutral-300);
    --brand: var(--fersken-600);
    --brand-deco: var(--aubergine-300);
    --icon-tile: var(--ink);
    --icon-mark: var(--fersken-600);
    --bubble: var(--aubergine-800);
    --bubble-ink: var(--cream);
    --bubble-mine: var(--aubergine-600);
    --bubble-mine-ink: var(--cream);
    --header-bg: rgba(46, 13, 38, 0.9);
    --backdrop: rgba(22, 22, 25, 0.6);
    --shadow: 0 1px 2px rgba(22, 22, 25, 0.3);
    --shadow-lg: 0 -8px 40px rgba(22, 22, 25, 0.6);
    --focus-ring: 0 0 0 3px #ff9e8a;
    color-scheme: dark;
  }
}