/* ============================================================================= tokens.css — DEN ENESTE FILEN ET TEMA TRENGER Å RØRE ----------------------------------------------------------------------------- Et tema = (1) denne filen overstyrt, (2) copy.toml, (3) logoer. Alt annet i systemet leser herfra. Hardkod aldri en farge, en avstand eller en font noe annet sted enn her. Lagdeling: 1. PRIMITIVES — rå skala (--paper-50, --space-4, --text-md ...) 2. ROLES — semantiske roller komponentene faktisk bruker (--bg, --ink, --action, --accent ...) Et tema bytter som regel bare ROLLENE. Skalaen ligger fast. ========================================================================== */ :root { /* --------------------------------------------------------------------------- 1 · PRIMITIVES --------------------------------------------------------------------------- */ /* Nøytraler — varm grå, ikke kald blågrå. "Papir og blekk". */ --paper-0: #ffffff; --paper-50: #faf9f6; --paper-100: #f4f2ed; --paper-200: #e9e6df; --paper-300: #d9d5cb; --paper-400: #b8b2a6; --paper-500: #8c867a; --paper-600: #635e54; --paper-700: #423f38; --paper-800: #2a2823; --paper-900: #1a1814; --paper-950: #110f0c; /* Aksent-primitiv — nøytral default er en dempet blekk-indigo. Et tema overstyrer disse fem stegene (eller bare --role-ene under). */ --brand-100: #e7e7f3; --brand-300: #b4b3df; --brand-500: #5b59a8; --brand-700: #3c3a78; --brand-900: #25244c; /* Status — rolig, ikke skrikende. */ --green-100: #e2f0e4; --green-600: #2f7d46; --green-800: #1f5630; --amber-100: #f7ecd6; --amber-600: #9a6a16; --amber-800: #6b4a0e; --red-100: #f6e0dd; --red-600: #b23b30; --red-800: #7e271f; /* Spacing — 4px-base, kvart-trinn i bunnen for hårfin justering. */ --space-0: 0; --space-1: 0.125rem; /* 2 */ --space-2: 0.25rem; /* 4 */ --space-3: 0.5rem; /* 8 */ --space-4: 0.75rem; /* 12 */ --space-5: 1rem; /* 16 */ --space-6: 1.5rem; /* 24 */ --space-7: 2rem; /* 32 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 6rem; /* 96 */ /* Type-skala — 1.20-ratio rundt 15px base. Tett og presist for B2B. */ --text-2xs: 0.6875rem; /* 11 */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-md: 0.9375rem; /* 15 ← base */ --text-lg: 1.0625rem; /* 17 */ --text-xl: 1.3125rem; /* 21 */ --text-2xl: 1.625rem; /* 26 */ --text-3xl: 2rem; /* 32 */ --text-4xl: 2.5rem; /* 40 */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-base: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-wide: 0.02em; --tracking-caps: 0.06em; /* for små versal-etiketter */ /* Typefamilier — også tokens, så et tema kan bytte font. */ --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* Radius — stramt. Hårfine linjer kler ikke runde hjørner. */ --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Linjevekt — hårfin er et designvalg, derfor egen variabel. */ --hairline: 1px; /* Skygger — varme, lave, lagdelte. Brukes sparsomt; hårlinje er førstevalg. */ --shadow-xs: 0 1px 1px rgba(26,24,20,0.04); --shadow-sm: 0 1px 2px rgba(26,24,20,0.06), 0 1px 1px rgba(26,24,20,0.04); --shadow-md: 0 4px 12px rgba(26,24,20,0.08), 0 1px 3px rgba(26,24,20,0.05); --shadow-lg: 0 12px 32px rgba(26,24,20,0.12), 0 3px 8px rgba(26,24,20,0.06); /* Motion — én snappy ease, tre varigheter. Mer enn dette blir støy. */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 300ms; /* Layout */ --shell-max: 1200px; --content-max: 760px; /* lesbar tekst / skjema */ --topbar-h: 60px; --sidebar-w: 248px; /* z-skala */ --z-base: 1; --z-sticky: 20; --z-overlay: 40; --z-toast: 60; /* --------------------------------------------------------------------------- 2 · ROLES ← et tema overstyrer som regel BARE herfra og ned --------------------------------------------------------------------------- */ /* Flater */ --bg: var(--paper-50); /* app-bakgrunn */ --surface: var(--paper-0); /* kort, paneler */ --surface-sunk: var(--paper-100); /* nedsenket felt (input-bunn, tomme felt) */ --surface-hover: var(--paper-100); /* Blekk (tekst) */ --ink: var(--paper-900); --ink-muted: var(--paper-600); --ink-subtle: var(--paper-500); --ink-faint: var(--paper-400); /* placeholdere, disabled-tekst */ --on-action: var(--paper-0); /* tekst oppå --action */ --on-accent: var(--paper-0); /* Linjer */ --line: var(--paper-200); /* hårfin standard */ --line-strong: var(--paper-300); /* skille, kanter som skal sees */ --line-ink: var(--paper-900); /* maks kontrast (f.eks. aktiv tab) */ /* Handling — primærknapp. NØYTRAL DEFAULT = blekk-svart, ikke en farge. Et tema setter typisk --action til merkefargen sin. */ --action: var(--paper-900); --action-hover: var(--paper-800); --action-active: var(--paper-950); /* Aksent — fokusring, lenker, små markører, aktiv tilstand. */ --accent: var(--brand-700); --accent-hover: var(--brand-900); --accent-weak: var(--brand-100); /* tonet bakgrunn */ --accent-line: var(--brand-300); /* Fokus — egen rolle, slik at et tema kan skille fokus fra aksent. */ --focus: var(--accent); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); /* Status-roller */ --positive: var(--green-600); --positive-weak: var(--green-100); --positive-ink: var(--green-800); --warning: var(--amber-600); --warning-weak: var(--amber-100); --warning-ink: var(--amber-800); --critical: var(--red-600); --critical-weak: var(--red-100); --critical-ink: var(--red-800); /* Felt-/komponent-roller */ --field-bg: var(--surface); --field-line: var(--line-strong); --field-ink: var(--ink); --field-radius: var(--radius-md); --control-h: 40px; /* standard kontrollhøyde (input, knapp) */ --control-h-sm: 32px; --control-h-lg: 48px; } /* Mørkt skall — valgfritt. Et tema kan velge å støtte dette eller la være. Roller flippes; primitives og skala står. */ @media (prefers-color-scheme: dark) { :root[data-theme-scheme="auto"], :root[data-theme-scheme="dark"] { --bg: var(--paper-950); --surface: var(--paper-900); --surface-sunk: var(--paper-800); --surface-hover: var(--paper-800); --ink: var(--paper-50); --ink-muted: var(--paper-400); --ink-subtle: var(--paper-500); --ink-faint: var(--paper-600); --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.14); --line-ink: var(--paper-50); --action: var(--paper-50); --action-hover: var(--paper-200); --action-active: var(--paper-0); --on-action: var(--paper-950); --accent: var(--brand-300); --accent-weak: rgba(91,89,168,0.18); --accent-line: var(--brand-500); --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5), 0 3px 8px rgba(0,0,0,0.35); } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }