/* Kugghuset design tokens — single source of truth (ADR-008). All colours are HSL channel triplets, consumed as hsl(var(--token)). Skins are .skin- classes toggled on ; every skin overrides all tokens. This file is framework-agnostic (plain CSS, no Tailwind directives) so the vanilla dotiverse page and the React apps share the exact same tokens. Ported from KonradLNarte/snack-verkstad-intranet src/index.css. The vanilla copy at services/dotiverse/static/vendor/kugghuset/tokens.css is generated from this file — edit here, then re-vendor. Fonts are NOT @import-ed here (a CSS @import is render-blocking and chains an extra round-trip). Each surface links them in its with preconnect. */ /* ── Default skin: Snack & Verkstad — warm Scandinavian palette ── */ :root, .skin-default { --background: 34 21% 92%; --foreground: 218 36% 31%; --card: 34 21% 92%; --card-foreground: 218 36% 31%; --popover: 0 0% 100%; --popover-foreground: 218 36% 31%; --primary: 218 36% 31%; --primary-foreground: 0 0% 100%; --secondary: 220 47% 86%; --secondary-foreground: 218 36% 31%; --muted: 220 47% 86%; --muted-foreground: 0 0% 24%; --accent: 28 67% 73%; --accent-foreground: 218 36% 31%; --destructive: 15 58% 48%; --destructive-foreground: 0 0% 100%; --border: 220 20% 82%; --input: 220 20% 82%; --ring: 218 36% 31%; --radius: 0; --sidebar-background: 0 0% 98%; --sidebar-foreground: 218 36% 31%; --sidebar-primary: 218 36% 31%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 220 47% 86%; --sidebar-accent-foreground: 218 36% 31%; --sidebar-border: 220 20% 82%; --sidebar-ring: 218 36% 31%; --sidebar: 0 0% 98%; --chart-1: 218 36% 31%; --chart-2: 28 67% 73%; --chart-3: 220 47% 86%; --chart-4: 15 58% 48%; --chart-5: 0 0% 45%; --font-sans: 'Reddit Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; --font-display: 'Reddit Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1); --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1); --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); --tracking-normal: 0em; --spacing: 0.25rem; --success: 152 44% 34%; --success-subtle: 152 38% 87%; --warning: 35 82% 42%; --warning-subtle: 35 80% 88%; --info: 212 52% 42%; --info-subtle: 212 48% 88%; --destructive-subtle: 15 58% 89%; --surface-raised: 0 0% 100%; --surface-sunken: 34 20% 87%; --surface-warm: 28 42% 90%; --surface-inverse: 218 38% 17%; --surface-inverse-foreground: 40 30% 94%; --text-headline: 218 42% 20%; --text-muted: 218 14% 44%; --text-subtle: 218 11% 57%; } /* ── Kugghuset skin — dark editorial, navy + glow blue ── */ .skin-kugghuset { --background: 228 55% 12%; --foreground: 246 52% 96%; --card: 232 46% 19%; /* navy-deep #1A2046 */ --card-foreground: 246 52% 96%; --popover: 232 46% 16%; --popover-foreground: 246 52% 96%; --primary: 205 68% 62%; /* glow #5BA8E0 */ --primary-foreground: 228 55% 12%; --secondary: 208 41% 79%; /* powder #B5CCE0 */ --secondary-foreground: 228 55% 12%; --muted: 231 40% 24%; --muted-foreground: 240 30% 68%; --accent: 335 46% 81%; /* pink #E5B8CB */ --accent-foreground: 228 55% 12%; --destructive: 0 65% 55%; --destructive-foreground: 0 0% 100%; --border: 231 39% 28%; /* navy #2C3464 */ --input: 231 39% 28%; --ring: 205 68% 62%; --radius: 0; --sidebar-background: 232 42% 15%; --sidebar-foreground: 246 52% 90%; --sidebar-primary: 205 68% 62%; --sidebar-primary-foreground: 228 55% 12%; --sidebar-accent: 232 42% 26%; --sidebar-accent-foreground: 246 52% 96%; --sidebar-border: 231 39% 28%; --sidebar-ring: 205 68% 62%; --sidebar: 232 42% 15%; --chart-1: 205 68% 62%; --chart-2: 335 46% 81%; --chart-3: 208 41% 79%; --chart-4: 0 65% 60%; --chart-5: 240 30% 68%; --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.2); --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.2); --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 1px 2px -1px hsl(0 0% 0% / 0.3); --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 1px 2px -1px hsl(0 0% 0% / 0.3); --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 2px 4px -1px hsl(0 0% 0% / 0.3); --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 4px 6px -1px hsl(0 0% 0% / 0.3); --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 8px 10px -1px hsl(0 0% 0% / 0.3); --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.5); --tracking-normal: 0em; --spacing: 0.25rem; --success: 152 48% 56%; --success-subtle: 152 36% 20%; --warning: 38 86% 62%; --warning-subtle: 38 55% 22%; --info: 205 68% 62%; --info-subtle: 205 50% 24%; --destructive-subtle: 0 50% 26%; --surface-raised: 232 46% 19%; --surface-sunken: 232 42% 14%; --surface-warm: 232 40% 21%; --surface-inverse: 230 60% 7%; --surface-inverse-foreground: 246 52% 96%; --text-headline: 246 52% 96%; --text-muted: 240 28% 70%; --text-subtle: 240 18% 55%; } /* ── Kugghuset Dag skin — the light sibling of Kugghuset ── */ .skin-kugghuset-day { --background: 222 40% 97%; --foreground: 226 41% 18%; --card: 0 0% 100%; --card-foreground: 226 41% 18%; --popover: 0 0% 100%; --popover-foreground: 226 41% 18%; --primary: 205 70% 42%; --primary-foreground: 0 0% 100%; --secondary: 215 52% 91%; --secondary-foreground: 226 41% 18%; --muted: 222 33% 95%; --muted-foreground: 222 16% 46%; --accent: 333 48% 84%; --accent-foreground: 226 41% 18%; --destructive: 9 62% 47%; --destructive-foreground: 0 0% 100%; --border: 219 30% 88%; --input: 219 30% 88%; --ring: 205 70% 42%; --radius: 0; --sidebar-background: 0 0% 100%; --sidebar-foreground: 226 41% 18%; --sidebar-primary: 205 70% 42%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 215 52% 91%; --sidebar-accent-foreground: 226 41% 18%; --sidebar-border: 219 30% 88%; --sidebar-ring: 205 70% 42%; --sidebar: 0 0% 100%; --chart-1: 205 70% 42%; --chart-2: 333 48% 70%; --chart-3: 215 52% 70%; --chart-4: 9 62% 52%; --chart-5: 222 16% 55%; --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --shadow-2xs: 0 1px 3px 0px hsl(222 30% 20% / 0.05); --shadow-xs: 0 1px 3px 0px hsl(222 30% 20% / 0.05); --shadow-sm: 0 1px 3px 0px hsl(222 30% 20% / 0.1), 0 1px 2px -1px hsl(222 30% 20% / 0.1); --shadow: 0 1px 3px 0px hsl(222 30% 20% / 0.1), 0 1px 2px -1px hsl(222 30% 20% / 0.1); --shadow-md: 0 1px 3px 0px hsl(222 30% 20% / 0.1), 0 2px 4px -1px hsl(222 30% 20% / 0.1); --shadow-lg: 0 1px 3px 0px hsl(222 30% 20% / 0.1), 0 4px 6px -1px hsl(222 30% 20% / 0.1); --shadow-xl: 0 1px 3px 0px hsl(222 30% 20% / 0.1), 0 8px 10px -1px hsl(222 30% 20% / 0.1); --shadow-2xl: 0 1px 3px 0px hsl(222 30% 20% / 0.25); --tracking-normal: 0em; --spacing: 0.25rem; --success: 152 46% 38%; --success-subtle: 152 40% 90%; --warning: 35 84% 44%; --warning-subtle: 35 82% 90%; --info: 205 70% 42%; --info-subtle: 205 60% 90%; --destructive-subtle: 9 62% 92%; --surface-raised: 0 0% 100%; --surface-sunken: 222 33% 94%; --surface-warm: 215 45% 95%; --surface-inverse: 228 55% 12%; --surface-inverse-foreground: 246 52% 96%; --text-headline: 226 45% 14%; --text-muted: 222 16% 46%; --text-subtle: 222 12% 58%; } /* The Kugghuset family uses its display serif for headings (dark + day). */ .skin-kugghuset h1, .skin-kugghuset h2, .skin-kugghuset h3, .skin-kugghuset-day h1, .skin-kugghuset-day h2, .skin-kugghuset-day h3 { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em; }