/* ═══════════════════════════════════════════════════════ GladPote — designtokens Ændr farver, afstande og former HER. Aldrig i de andre filer. ═══════════════════════════════════════════════════════ */ :root { /* ── Brand ── */ --green-50: #ECFDF3; --green-100: #D1FADF; --green-500: #16A34A; --green-600: #15803D; --green-700: #166534; /* ── Accent — varme, dyrevenlige toner ── */ --sand-50: #FDF8F3; --sand-100: #F7EDE2; --clay-400: #D98E5F; --berry-500: #C2456B; /* ── Neutral ── */ --ink-900: #111827; --ink-700: #374151; --ink-500: #6B7280; --ink-300: #D1D5DB; --ink-100: #F3F4F6; --white: #FFFFFF; /* ── Semantisk ── */ --bg: var(--sand-50); --surface: var(--white); --surface-alt: var(--sand-100); --text: var(--ink-900); --text-soft: var(--ink-500); --border: var(--ink-300); --primary: var(--green-500); --primary-dark: var(--green-600); --primary-soft: var(--green-50); --on-primary: var(--white); --danger: #DC2626; --on-danger: var(--white); --warning: #D97706; --info: #2563EB; /* Modsat baggrund — toasts og boblen på vægtkurven. Den skal skille sig ud fra siden, så den vender med i mørk tilstand. */ --inverse: var(--ink-900); --on-inverse: var(--ink-100); /* ── Form ── */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(17 24 39 / .05); --shadow: 0 4px 16px rgb(17 24 39 / .08); --shadow-lg: 0 12px 32px rgb(17 24 39 / .12); --focus-ring: 0 0 0 3px rgb(22 163 74 / .35); /* ── Spacing — 4px-skala ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── Mål ── */ --container: 1180px; --nav-h: 68px; /* bundnavigation på mobil */ --sidebar-w: 248px; /* sidebar på desktop */ --transition: 160ms cubic-bezier(.4, 0, .2, 1); /* ── Typografi ── */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace; color-scheme: light; } /* Eksplicit mørk tilstand — sættes af inline-scriptet i . */ :root[data-theme="dark"] { --bg: #0F1512; --surface: #171F1B; --surface-alt: #1F2A24; --text: #F3F4F6; --text-soft: #9CA3AF; --border: #2A3630; --primary: #22C55E; --primary-dark: #16A34A; --primary-soft: #14261C; --on-primary: #06120C; --danger: #F87171; --on-danger: #1A0B0B; --warning: #FBBF24; --info: #60A5FA; /* Boblen og toasten vender om, så de stadig skiller sig ud. */ --inverse: #E8EFEA; --on-inverse: #0F1512; --shadow-sm: 0 1px 2px rgb(0 0 0 / .30); --shadow: 0 4px 16px rgb(0 0 0 / .40); --shadow-lg: 0 12px 32px rgb(0 0 0 / .50); --focus-ring: 0 0 0 3px rgb(34 197 94 / .45); color-scheme: dark; } /* Fallback hvis JS er slået fra og brugeren ikke har valgt tema. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F1512; --surface: #171F1B; --surface-alt: #1F2A24; --text: #F3F4F6; --text-soft: #9CA3AF; --border: #2A3630; --primary: #22C55E; --primary-dark: #16A34A; --primary-soft: #14261C; --on-primary: #06120C; --danger: #F87171; --on-danger: #1A0B0B; --warning: #FBBF24; --info: #60A5FA; --inverse: #E8EFEA; --on-inverse: #0F1512; --shadow-sm: 0 1px 2px rgb(0 0 0 / .30); --shadow: 0 4px 16px rgb(0 0 0 / .40); --shadow-lg: 0 12px 32px rgb(0 0 0 / .50); --focus-ring: 0 0 0 3px rgb(34 197 94 / .45); color-scheme: dark; } }