/* ============================================================================ odin-tokens.css — KANONISK TOKEN-LAG (D-357, Etape 1 Foundation) ============================================================================ Single source of truth for farver, spacing, typografi, radii, shadows, motion. Løftet fra components/_tokens.html (system-B, Council-blessed) — den vokabular (LANGE navne: --font-size-*, --duration-*, --font-family) som komponent-makroerne (components/button.html m.fl.) og ~17 nyere sider allerede forbruger. VIGTIGT — hvorfor denne fil KUN indeholder :root (ingen html/body/scrollbar-reset): _tokens.html sætter også `html{font-family:Inter}` + `body{background;font-size}`. Inkluderes de globalt, skifter ALLE sider font/baggrund på én gang (skjult big-bang der reflower hvert tal). Variabler ALENE maler intet om — de er inerte indtil en klasse bruger dem → nul regression. Den globale Inter-body-switch (med self-hosted fonts + tabular-nums) er en separat, screenshot-gated wave. Load-rækkefølge (base.html ): odin-tokens.css FØRST, derefter app.css. Fordi app.css' egen :root loader bagefter, VINDER app.css' legacy-navne (--bg #0b0d12, --border #232936, --text-muted #6b7384, --radius 12px) på de ~110 legacy-sider → byte-identisk look. Denne fil "fylder kun" de NYE system-B-navne ud. ============================================================================ */ :root { /* === BAGGRUND (dark, Linear-inspireret) === */ --bg-base: #0B0D0E; --surface-1: #16191B; --surface-2: #1D2124; --surface-3: #242A2E; --surface-hover: #2A3034; /* === KANTLINJER === */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-focus: rgba(2, 163, 136, 0.5); /* === TEKST === AA på --bg-base: primary ~15.4:1, secondary ~5.5:1 (begge PASS). --text-muted #5C6166 ~2.8:1 = KUN dekorativ/disabled/border-ækvivalent. ALDRIG læsbar brødtekst, labels, captions eller placeholders → brug --text-secondary. */ --text-primary: #E8EAED; --text-secondary: #8B9197; --text-muted: #5C6166; --text-on-accent: #FFFFFF; /* === ACCENT (Sandgrav copper) === */ --accent: #02A388; --accent-hover: #03B898; --accent-text: #2DD4B0; /* lysere copper til AA-tekst/ikoner på dark surfaces */ --accent-soft: rgba(2, 163, 136, 0.12); --accent-glow: rgba(2, 163, 136, 0.4); /* === SEMANTISKE FARVER === Værdier fra design-manual.html (godkendt mål-state) — WCAG AA-bestået på dark. Bemærk: _tokens.html bruger stadig de gamle #10B981/#EF4444 m.fl. på de 17 selv-inkluderende sider; reconciliation dertil er en Etape-3-opgave. */ --pos: #34D399; --pos-soft: rgba(52, 211, 153, 0.12); --neg: #F87171; --neg-soft: rgba(248, 113, 113, 0.12); --warn: #FBBF24; --warn-soft: rgba(251, 191, 36, 0.12); --info: #60A5FA; --info-soft: rgba(96, 165, 250, 0.12); /* === FOKUS-RING (Erik/a11y) === --border-focus (0.5α copper) er usynlig copper-på-copper på .btn-primary. --focus-ring er en solid, høj-kontrast ring der ses på BÅDE dark surfaces og accent-flader. */ --focus-ring: var(--accent-hover); --focus-ring-halo: rgba(0, 0, 0, 0.6); /* === TYPOGRAFI === Stakkene er DEFINERET her (Frederiks "ny font-stack"); de APPLIKERES først globalt i body-switch-wave'en (self-hosted Inter+JetBrains, sammen med tabular-nums). Indtil da falder de tilbage til system-stacken = uændret look. rem-baseret → user-zoom-venligt. rem'erne resolver mod 16px root (browser-default; app.css sætter kun body 15px, ikke html). */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace; --font-size-xs: 0.72rem; /* ~11.5px */ --font-size-sm: 0.82rem; /* ~13.1px */ --font-size-base: 0.9rem; /* ~14.4px */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.15rem; /* ~18.4px */ --font-size-xl: 1.4rem; /* ~22.4px */ --font-size-2xl: 1.8rem; /* ~28.8px */ --font-size-3xl: 2.4rem; /* ~38.4px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* === SPACING (8px-baseret grid) === */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* === RADIUS === */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 9999px; /* === SHADOWS === */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 0 3px var(--accent-glow); /* === MOTION === */ --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* === Z-INDEX === */ --z-dropdown: 100; --z-sticky: 200; --z-modal: 1000; --z-toast: 2000; /* === STICKY-NAV (Etape 1) === --sticky-top offsettes til 44px når view-as-banneret (position:fixed, 44px spacer) er aktivt, så globale sticky-headers ikke skjules bag banneret. */ --sticky-top: 0px; }