/* PokeVarsler – design tokens. Generert fra designsystemet (tokens.json). Mørkt tema er standard.
   Lyst tema: sett data-theme="light" på <html> (brukes til e-post/utskrift ved behov). */

:root {
  color-scheme: dark;
  --pv-bg: #080c14;
  --pv-surface: #0e1520;
  --pv-surface-2: #121b29;
  --pv-border: #1e2a3b;
  --pv-border-strong: #2a3a52;
  --pv-text: #e8eef6;
  --pv-text-strong: #ffffff;
  --pv-text-nav: #c9d4e3;
  --pv-text-muted: #a3b1c4;
  --pv-text-faint: #8a99ad;
  --pv-accent: #4fc3f7;
  --pv-on-accent: #08121f;
  --pv-accent-text: #4fc3f7;
  --pv-light-tile: #f4f7fb;
  --pv-restock: #22c55e;
  --pv-new: #7dd3fc;
  --pv-pricedrop: #fb923c;
  --pv-added: #cbd5e1;
  --pv-soldout: #f87171;
  --pv-live-bg: #0f2a1c;
  --pv-live-text: #86efac;
  --pv-discord: #5865f2;
  --pv-discord-bg: #121a33;
  --pv-discord-border: #2b3566;
  --pv-discord-text: #b8c2e8;
  --pv-brand-wave: #2aa7dc;
  --pv-brand-ember: #e0572f;
  --pv-brand-stone: #8e99a6;
  --pv-brand-deep: #16325c;
  --pv-focus: 0 0 0 3px #4fc3f7;
}

[data-theme="light"] {
  color-scheme: light;
  --pv-bg: #f5f7fb;
  --pv-surface: #ffffff;
  --pv-surface-2: #eef2f7;
  --pv-border: #d9e1ec;
  --pv-border-strong: #b9c6d8;
  --pv-text: #1b2433;
  --pv-text-strong: #0b1220;
  --pv-text-nav: #2f3c50;
  --pv-text-muted: #4a5a70;
  --pv-text-faint: #5a6a80;
  --pv-accent: #4fc3f7;
  --pv-on-accent: #08121f;
  --pv-accent-text: #0369a1;
  --pv-light-tile: #f1f4f9;
  --pv-restock: #22c55e;
  --pv-new: #7dd3fc;
  --pv-pricedrop: #fb923c;
  --pv-added: #cbd5e1;
  --pv-soldout: #dc2626;
  --pv-live-bg: #dcfce7;
  --pv-live-text: #15803d;
  --pv-discord: #5865f2;
  --pv-discord-bg: #eef0ff;
  --pv-discord-border: #c7ccf5;
  --pv-discord-text: #3b3f73;
  --pv-brand-wave: #2aa7dc;
  --pv-brand-ember: #e0572f;
  --pv-brand-stone: #8e99a6;
  --pv-brand-deep: #16325c;
  --pv-focus: 0 0 0 3px #0369a1;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-11: 44px;
  --space-14: 56px;
  --pv-radius-sm: 10px;
  --pv-radius-btn: 12px;
  --pv-radius: 14px;
  --pv-radius-lg: 20px;
  --pv-radius-xl: 24px;
  --pv-radius-pill: 999px;
  --font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pv-font-display: var(--font-display);
  --pv-font-body: var(--font-body);
  --pv-container: 1180px;
  --pv-gutter: 20px;
}