/* OrdrePortal — design tokens Lys/mørk-tema + 4 accents (mint, orange, blue, violet) Tema sættes via [data-theme="dark|light"] og [data-accent="mint|orange|blue|violet"] på . */ :root { /* Typografi */ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-serif: 'Instrument Serif', Georgia, serif; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 16px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 48px; --fs-4xl: 72px; /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-pill: 999px; /* Touch-target hardblock */ --touch-min: 44px; } /* ─── Accents ─────────────────────────────────────────── */ :root[data-accent="mint"] { --accent-solid: #3DD9B2; --accent-hover: #2FC89F; --accent-soft: rgba(61,217,178,0.14); --accent-ink: #FFFFFF; } :root[data-accent="orange"], :root:not([data-accent]) { --accent-solid: #F97316; --accent-hover: #E86209; --accent-soft: rgba(249,115,22,0.14); --accent-ink: #FFFFFF; } :root[data-accent="blue"] { --accent-solid: #4F7DF2; --accent-hover: #3E6BDC; --accent-soft: rgba(79,125,242,0.14); --accent-ink: #FFFFFF; } :root[data-accent="violet"] { --accent-solid: #A855F7; --accent-hover: #8F3EE0; --accent-soft: rgba(168,85,247,0.14); --accent-ink: #FFFFFF; } /* ─── Light mode (default) ────────────────────────────── */ :root, :root[data-theme="light"] { --bg: #F6F4EE; --surface: #FFFFFF; --surface-2: #FBFAF6; --surface-3: #F2EFE6; --line: rgba(12,20,36,0.08); --line-strong: rgba(12,20,36,0.16); --ink: #0B1220; --ink-muted: rgba(11,18,32,0.64); --ink-dim: rgba(11,18,32,0.4); --ok: #059669; --warn: #D97706; --danger: #DC2626; --info: #2563EB; --shadow-card: 0 1px 2px rgba(12,20,36,0.04), 0 2px 8px rgba(12,20,36,0.04); --shadow-lift: 0 24px 48px rgba(12,20,36,0.12), 0 2px 6px rgba(12,20,36,0.06); --bg-ambient: radial-gradient(800px 600px at 30% 20%, color-mix(in srgb, var(--accent-solid) 7%, transparent), transparent), radial-gradient(600px 500px at 80% 90%, color-mix(in srgb, var(--accent-solid) 4%, transparent), transparent); } /* ─── Dark mode ───────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #0B1220; --surface: #121A2B; --surface-2: #182134; --surface-3: #1E2940; --line: rgba(255,255,255,0.07); --line-strong: rgba(255,255,255,0.12); --ink: #F3F5FA; --ink-muted: rgba(243,245,250,0.62); --ink-dim: rgba(243,245,250,0.38); --ok: #34D399; --warn: #F59E0B; --danger: #F87171; --info: #60A5FA; --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 3px rgba(0,0,0,0.4); --shadow-lift: 0 18px 40px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25); --bg-ambient: radial-gradient(800px 600px at 30% 20%, color-mix(in srgb, var(--accent-solid) 15%, transparent), transparent), radial-gradient(600px 500px at 80% 90%, color-mix(in srgb, var(--accent-solid) 8%, transparent), transparent); }