/**
 * datamynt-ui design tokens — HÅND-AUTORERT KILDE (ikke generert).
 *
 * Til forskjell fra peck-ui (Style Dictionary + Node) er denne fila
 * sannhetskilden direkte. node finnes ikke på maskinen, og hele flåten
 * er Python — så vi dropper JS-byggesteget. Rediger her, kjør build.py
 * for å kopiere inn i datamynt_ui/static/, så sync.sh ut til appene.
 *
 * To akser, holdt adskilt med vilje:
 *   [data-dm-theme="dark"]  → styrer bg/fg/surface/border (lys/mørk)
 *   [data-dm-app="<navn>"]  → styrer KUN aksent + font (per-produkt merke)
 * Default er LYS (varmt papir) — flertallet av Datamynt-appene er lyse.
 */

:root {
  /* ── Nøytraler (varm gråskala) ─────────────────────────────── */
  --dm-black: #161310;
  --dm-gray-50: #faf8f3;   /* varmt papir */
  --dm-gray-100: #f2efe8;
  --dm-gray-200: #e7e2d8;
  --dm-gray-300: #d4cdbf;
  --dm-gray-400: #a99f8d;
  --dm-gray-500: #807666;
  --dm-gray-600: #5e5648;
  --dm-gray-700: #423c32;
  --dm-gray-800: #2a261f;
  --dm-gray-900: #1a1714;
  --dm-gray-950: #110f0c;
  --dm-white: #ffffff;

  /* ── Navngitte hues (per-app + semantisk basis) ────────────── */
  --dm-terracotta: #c8542a;  /* merdata */
  --dm-gold: #b8742e;        /* hus / datamynt-web */
  --dm-ochre: #b68534;       /* beviset */
  --dm-green: #1f9d6b;       /* kvittert */
  --dm-blue: #2f6fed;        /* sporløs / vinket */
  --dm-teal: #14b8a6;        /* kvitteringen */
  --dm-navy: #0b1d35;        /* heltenig blekk */
  --dm-purple: #7c6af7;
  --dm-orange: #f97316;
  --dm-cyan: #4a90d9;
  --dm-earth: #92714a;

  /* ── Radius ────────────────────────────────────────────────── */
  --dm-r-sm: 6px;
  --dm-r-md: 10px;
  --dm-r-lg: 14px;
  --dm-r-xl: 20px;
  --dm-r-pill: 999px;

  /* ── Skygger (lys: varme, myke) ────────────────────────────── */
  --dm-shadow-sm: 0 1px 2px rgba(22, 19, 16, 0.06);
  --dm-shadow-md: 0 4px 16px rgba(22, 19, 16, 0.08);
  --dm-shadow-lg: 0 12px 40px rgba(22, 19, 16, 0.12);

  /* ── Z-index ───────────────────────────────────────────────── */
  --dm-z-base: 1;
  --dm-z-float: 100;
  --dm-z-nav: 500;
  --dm-z-overlay: 1000;
  --dm-z-modal: 2000;
  --dm-z-toast: 3000;

  /* ── Spacing ───────────────────────────────────────────────── */
  --dm-sp-1: 0.25rem;
  --dm-sp-2: 0.5rem;
  --dm-sp-3: 0.75rem;
  --dm-sp-4: 1rem;
  --dm-sp-5: 1.25rem;
  --dm-sp-6: 1.5rem;
  --dm-sp-8: 2rem;
  --dm-sp-10: 2.5rem;
  --dm-sp-12: 3rem;
  --dm-sp-16: 4rem;
  --dm-sp-xs: 0.5rem;
  --dm-sp-sm: 0.75rem;
  --dm-sp-md: 1rem;
  --dm-sp-lg: 1.5rem;
  --dm-sp-xl: 2rem;

  /* ── Typografi ─────────────────────────────────────────────── */
  --dm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dm-font-display: 'General Sans', Georgia, 'Times New Roman', serif;
  --dm-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', ui-monospace, monospace;
  --dm-leading: 1.6;
  --dm-leading-tight: 1.2;
  --dm-text-xs: 0.75rem;
  --dm-text-sm: 0.875rem;
  --dm-text-base: 1rem;
  --dm-text-lg: 1.25rem;
  --dm-text-xl: 1.5rem;
  --dm-text-2xl: 2rem;
  --dm-text-3xl: 2.5rem;

  /* ── Semantiske farger (LYS default) ───────────────────────── */
  --dm-accent: var(--dm-gold);
  --dm-accent-hover: color-mix(in srgb, var(--dm-accent) 82%, black);
  --dm-accent-glow: color-mix(in srgb, var(--dm-accent) 16%, transparent);
  --dm-success: #2d6a4f;
  --dm-warning: #b08900;
  --dm-danger: #c0392b;
  --dm-info: #2f6fed;
  --dm-glass: rgba(250, 248, 243, 0.82);
  --dm-glass-light: rgba(255, 255, 255, 0.9);
  --dm-glass-border: rgba(22, 19, 16, 0.06);
  --dm-border: rgba(22, 19, 16, 0.1);
  --dm-border-light: rgba(22, 19, 16, 0.06);
  --dm-bg: var(--dm-gray-50);
  --dm-fg: var(--dm-gray-900);
  --dm-muted: var(--dm-gray-500);
  --dm-surface: var(--dm-white);
  --dm-on-accent: #ffffff;

  /* ── Overganger ────────────────────────────────────────────── */
  --dm-t-fast: 0.15s ease;
  --dm-t-mid: 0.25s ease;
  --dm-t-slow: 0.4s ease;
  --dm-shadow-glow: 0 0 0 4px var(--dm-accent-glow);
}

/* ── Mørk modus ───────────────────────────────────────────────
   Styrer KUN flate-farger. Aksent/font kommer fra [data-dm-app]. */
.dm-dark,
:root[data-dm-theme="dark"] {
  --dm-bg: #16130f;
  --dm-fg: #ece7dd;
  --dm-muted: #9b9384;
  --dm-surface: #201c16;
  --dm-border: rgba(255, 255, 255, 0.08);
  --dm-border-light: rgba(255, 255, 255, 0.12);
  --dm-glass: rgba(22, 19, 15, 0.82);
  --dm-glass-light: rgba(32, 28, 22, 0.92);
  --dm-glass-border: rgba(255, 255, 255, 0.07);
  --dm-accent-hover: color-mix(in srgb, var(--dm-accent) 80%, white);
  --dm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --dm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --dm-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* ── Auto-mørk for apper som følger systemet ──────────────────
   Opt-in: sett <html class="dm-auto"> så følger temaet OS-valget. */
@media (prefers-color-scheme: dark) {
  :root.dm-auto {
    --dm-bg: #16130f;
    --dm-fg: #ece7dd;
    --dm-muted: #9b9384;
    --dm-surface: #201c16;
    --dm-border: rgba(255, 255, 255, 0.08);
    --dm-border-light: rgba(255, 255, 255, 0.12);
    --dm-glass: rgba(22, 19, 15, 0.82);
    --dm-glass-light: rgba(32, 28, 22, 0.92);
    --dm-glass-border: rgba(255, 255, 255, 0.07);
    --dm-accent-hover: color-mix(in srgb, var(--dm-accent) 80%, white);
    --dm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --dm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --dm-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  }
}

/* ── Per-app merker — KUN aksent + font ───────────────────────
   Font-family settes her, men appen MÅ selv laste fonten
   (@font-face / Google Fonts). Verdiene er hentet fra appenes
   eksisterende paletter (design-survey 2026-06-18).

   A11y-regel (kontrast): tekst på aksent-flate (primærknapp) bruker
   --dm-on-accent. Default er hvit (#fff) — gyldig for de MØRKE aksentene
   (blå #2f6fed ≈ 4.55:1, regnskap #176639 ≈ 7:1). De LYSE aksentene
   (gold/ochre/green/teal/heltenig/pekt/arena) feiler 4.5:1 mot hvit, så
   de overstyrer --dm-on-accent til mørk tekst (≈ 5–9:1) og lysner
   hover-flaten (mix mot hvit) i stedet for å mørkne — ellers faller
   den mørke teksten under terskel på hover.
   MERKNAD: merdata/terracotta (#c8542a) ligger i dødsonen — verken hvit
   (4.42) eller mørk (4.35) når 4.5:1 ved vekt 500. Beholdt hvit (merkets
   etablerte uttrykk); ekte fiks = nudge hue litt mørkere = Thomas' merke-valg. */
[data-dm-app="datamynt"]     { --dm-accent: var(--dm-gold);
                               --dm-on-accent: var(--dm-black);
                               --dm-accent-hover: color-mix(in srgb, var(--dm-accent) 86%, white);
                               --dm-font: 'Inter Tight', Inter, sans-serif;
                               --dm-font-display: 'Instrument Serif', Georgia, serif; }
[data-dm-app="merdata"]      { --dm-accent: var(--dm-terracotta);
                               --dm-font-display: 'General Sans', Georgia, serif; }
[data-dm-app="beviset"]      { --dm-accent: var(--dm-ochre);
                               --dm-on-accent: var(--dm-black);
                               --dm-accent-hover: color-mix(in srgb, var(--dm-accent) 86%, white);
                               --dm-font: 'Inter Tight', Inter, sans-serif;
                               --dm-font-display: 'Fraunces', Georgia, serif; }
[data-dm-app="sporlos"]      { --dm-accent: var(--dm-blue);
                               --dm-font: 'Schibsted Grotesk', system-ui, sans-serif;
                               --dm-font-display: 'Schibsted Grotesk', system-ui, sans-serif; }
[data-dm-app="heltenig"]     { --dm-accent: #d4af37;
                               --dm-on-accent: var(--dm-black);
                               --dm-accent-hover: color-mix(in srgb, var(--dm-accent) 86%, white);
                               --dm-font: 'Outfit', system-ui, sans-serif;
                               --dm-font-display: 'Outfit', system-ui, sans-serif; }
[data-dm-app="kvittert"]     { --dm-accent: var(--dm-green);
                               --dm-on-accent: var(--dm-black);
                               --dm-accent-hover: color-mix(in srgb, var(--dm-accent) 86%, white);
                               --dm-font-display: Georgia, 'Times New Roman', serif; }
[data-dm-app="kvitteringen"] { --dm-accent: var(--dm-teal);
                               --dm-on-accent: var(--dm-black);
                               --dm-accent-hover: color-mix(in srgb, var(--dm-accent) 86%, white); }
[data-dm-app="vinket"]       { --dm-accent: var(--dm-blue); }
[data-dm-app="pekt"]         { --dm-accent: #5b8cff;
                               --dm-on-accent: var(--dm-black);
                               --dm-accent-hover: color-mix(in srgb, var(--dm-accent) 86%, white); }
[data-dm-app="regnskap"]     { --dm-accent: #176639; }
[data-dm-app="leadgen"]      { --dm-accent: var(--dm-blue); }
[data-dm-app="arena"]        { --dm-accent: #daa520;
                               --dm-on-accent: var(--dm-black);
                               --dm-accent-hover: color-mix(in srgb, var(--dm-accent) 86%, white); }

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes dm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dm-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dm-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@keyframes dm-pecking {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(15deg); }
  50%      { transform: rotate(-5deg); }
  75%      { transform: rotate(10deg); }
}