/* ============================================================================ IT-Husets Arkitekturprogram — Design Tokens Canonical CSS export of docs/design-system/DESIGN.md front matter. One brand ("Professional"), two core modes — gold anchors both: [data-theme="light"] Professional (light) — warm, trustworthy, daylight [data-theme="dark"] Professional (dark) — elegant near-black + gold, geometric Plus one opt-in creative theme (not in the FR8 toggle; see arch-deco.css): [data-theme="arch-deco"] "Arch Deco" — neon synthwave homage to the original prototype (NOT WCAG AA-guaranteed) Set the theme on before first paint (no FOUC). Light is the default (applies to :root) per PRD FR8. ============================================================================ */ /* --------------------------------------------------------------------------- SHARED PRIMITIVES (theme-independent) --------------------------------------------------------------------------- */ :root { /* Type families — PRD NFR: Outfit headings / Nunito Sans body */ --font-heading: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type scale (1rem = 16px) */ --text-xs: 0.75rem; /* 12 — caption, badges */ --text-sm: 0.875rem; /* 14 — meta, small */ --text-base: 1rem; /* 16 — body */ --text-lg: 1.125rem; /* 18 — lead */ --text-xl: 1.25rem; /* 20 — h5 */ --text-2xl: 1.5rem; /* 24 — h4/h3 */ --text-3xl: 1.875rem; /* 30 — h3/h2 */ --text-4xl: 2.5rem; /* 40 — h2/h1 */ --text-5xl: 3.25rem; /* 52 — h1 */ --text-6xl: 4.5rem; /* 72 — display */ /* Weights (both families ship these) */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Letter spacing — display headings use generous tracking */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.12em; /* uppercase eyebrows / display */ /* Spacing — 8px base grid (4px half-step) */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* Radius — crisp, geometric (bias toward tighter corners) */ --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-full: 999px; /* Layout */ --container: 1200px; --container-narrow: 768px; --gutter: var(--space-6); --header-h: 72px; --header-h-mobile: 60px; /* Breakpoints (reference values; use in @media directly) */ --bp-mobile: 640px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1280px; /* Motion */ --transition-fast: 120ms ease; --transition: 200ms ease; --transition-slow: 360ms cubic-bezier(0.22, 1, 0.36, 1); /* Z-index ladder */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; /* Min touch target (WCAG 2.1 AA / mobile) */ --tap: 44px; --tap-compact: 36px; /* Gold hairline — resolves to the active theme's --color-primary at use-time (CSS vars are late-bound), so one definition serves both themes. */ --gradient-gold-line: linear-gradient(90deg, transparent, var(--color-primary), transparent); --gradient-gold-line-v: linear-gradient(180deg, transparent, var(--color-primary), transparent); } /* --------------------------------------------------------------------------- LIGHT MODE — Professional (light) (default) Warm off-white surfaces, near-black ink, gold accent, navy depth. --------------------------------------------------------------------------- */ :root, [data-theme="light"] { color-scheme: light; /* Surface ladder (0 = sunken … 5 = overlay, 6 = inverse band) */ --surface-0: #ECE5D6; /* sunken: input wells, progress track, code */ --surface-1: #FAF8F3; /* page background */ --surface-2: #FFFFFF; /* primary card / raised */ --surface-3: #FFFDF8; /* card hover / secondary raised */ --surface-4: #F4EFE4; /* tinted section band */ --surface-5: #FFFFFF; /* modal / popover (elevation via shadow) */ --surface-6: #26303C; /* inverse panel: footer, dark CTA band */ /* Ink */ --ink-strong: #14130E; /* emphasis headings */ --ink: #2A271F; /* body */ --ink-muted: #5C594E; /* secondary text, meta */ --ink-subtle: #787469; /* placeholders, meta — AA 4.5:1 on white */ --ink-on-primary: #1A1606; /* text on gold fills */ --ink-on-inverse: #F4EFE2; /* text on --surface-6 */ /* Brand — gold anchors the system */ --color-primary: #C8A02E; /* fills, accents, focus glints */ --color-primary-hover: #AE881E; --color-primary-ink: #836311; /* AA-safe gold for text/links on light */ --color-primary-soft: #F4EACB; /* gold tint background */ --color-secondary: #2C3E50; /* navy depth */ --color-secondary-soft: #E6EAEE; --ink-on-secondary: #F4EFE2; /* cream text on the navy secondary fill */ /* Lines & focus */ --border: rgba(20, 18, 10, 0.12); --border-strong: rgba(20, 18, 10, 0.24); /* On-brand focus indicator: a crisp near-black ring reads as intentional on the warm cream/white/gold surfaces (the bright system blue looked off-brand). Dark surfaces (the footer) override this to gold — see .site-footer. */ --focus-ring: var(--ink-strong); /* Native-select caret (appearance:none) — tinted to ink-muted #5C594E */ --field-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C594E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Semantic */ --color-success: #2B764D; --color-success-soft: #DEF0E6; --color-warning: #975B00; --color-warning-soft: #F8EBD0; --color-error: #B43628; --color-error-soft: #F7DDD9; --color-info: #2968AA; --color-info-soft: #DCE8F4; /* Level badges — Grundläggande / Mellanliggande / Avancerad (text AA on -soft) */ --level-1: #2B764D; --level-1-soft: #DEF0E6; /* Grundläggande */ --level-2: #2968AA; --level-2-soft: #DCE8F4; /* Mellanliggande */ --level-3: #7A3B6B; --level-3-soft: #F0E1EC; /* Avancerad */ /* Path badges — Utvecklare / Arkitekt / Ledare (text AA on -soft) */ --path-dev: #1D69A9; --path-dev-soft: #DBEAF6; --path-arch: #5B4BBE; --path-arch-soft: #E6E2F7; --path-lead: #A34B29; --path-lead-soft: #F7E2D8; /* Elevation */ --shadow-sm: 0 1px 2px rgba(28, 24, 12, 0.06), 0 1px 3px rgba(28, 24, 12, 0.08); --shadow-md: 0 4px 12px rgba(28, 24, 12, 0.10), 0 2px 4px rgba(28, 24, 12, 0.06); --shadow-lg: 0 16px 40px rgba(28, 24, 12, 0.16), 0 4px 10px rgba(28, 24, 12, 0.08); /* Brand gradient (used sparingly — hero accent, CTA) */ --gradient-brand: linear-gradient(135deg, #E2C25A 0%, #C8A02E 45%, #2C3E50 100%); } /* --------------------------------------------------------------------------- DARK MODE — Professional (dark) Deep near-black surfaces, warm off-white ink, gold accent + gold hairlines. Elegant and geometric — deliberately NOT neon/cyberpunk (that's the opt-in "Arch Deco" creative theme in arch-deco.css). --------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --surface-0: #08080B; /* deepest void */ --surface-1: #0E0E13; /* page background */ --surface-2: #16161F; /* primary card */ --surface-3: #1E1E2A; /* card hover / raised */ --surface-4: #262635; /* tinted band / popover */ --surface-5: #1A1A24; /* modal (shadow + gold hairline) */ --surface-6: #0A0A0E; /* inverse-deep: footer */ --ink-strong: #FFFFFF; --ink: #ECEAF2; --ink-muted: #A8A6B8; --ink-subtle: #7C7A93; /* meta — AA 4.5:1 on surface-1 */ --ink-on-primary: #1A1606; /* dark text on gold (consistent w/ light) */ --ink-on-inverse: #ECEAF2; --color-primary: #D9B441; /* gold, slightly brighter to read on black */ --color-primary-hover: #E8C766; --color-primary-ink: #E2C25A; /* gold text/links — strong contrast on dark */ --color-primary-soft: rgba(217, 180, 65, 0.14); /* Confident slate-navy secondary (mirrors light theme's navy intent) so the button reads as an enabled action on the near-black header, not a pale "disabled" chip. */ --color-secondary: #3C455C; --color-secondary-soft: rgba(201, 206, 218, 0.10); --ink-on-secondary: #ECEAF2; /* light ink on the slate-navy secondary fill */ --border: rgba(217, 180, 65, 0.16); /* gold hairline */ --border-strong: rgba(217, 180, 65, 0.34); /* Gold focus ring on the near-black surfaces (high contrast + on-brand). */ --focus-ring: var(--color-primary); /* Native-select caret — tinted to ink-muted #A8A6B8 */ --field-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A6B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --color-success: #46C48A; --color-success-soft: rgba(70, 196, 138, 0.14); --color-warning: #E0A93A; --color-warning-soft: rgba(224, 169, 58, 0.14); --color-error: #F2685C; --color-error-soft: rgba(242, 104, 92, 0.16); --color-info: #6FA8E6; --color-info-soft: rgba(111, 168, 230, 0.16); --level-1: #4FC58D; --level-1-soft: rgba(79, 197, 141, 0.16); --level-2: #6FA8E6; --level-2-soft: rgba(111, 168, 230, 0.16); --level-3: #C77FB4; --level-3-soft: rgba(199, 127, 180, 0.16); --path-dev: #5FA3DE; --path-dev-soft: rgba(95, 163, 222, 0.16); --path-arch: #9385E6; --path-arch-soft: rgba(147, 133, 230, 0.16); --path-lead: #E08862; --path-lead-soft: rgba(224, 136, 98, 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.65); --gradient-brand: linear-gradient(135deg, #E8C766 0%, #D9B441 40%, #4A4636 100%); } /* Respect reduced-motion globally */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition: 0ms; --transition-slow: 0ms; } } /* Brand token overrides: boostportalen. Source: brands/boostportalen/tokens.override.css. */ :root, [data-theme="light"] { --surface-0: #E4EEF0; --surface-1: #F4F8F8; --surface-2: #FFFFFF; --surface-3: #EEF6F7; --surface-4: #E8F1F2; --surface-5: #FFFFFF; --surface-6: #0D1B20; --ink-strong: #0D1B20; --ink: #173038; --ink-muted: #4D6870; --ink-subtle: #5E747A; --ink-on-primary: #FFFFFF; --ink-on-inverse: #F4F8F8; --color-primary: #185C65; --color-primary-hover: #12464D; --color-primary-ink: #185C65; --color-primary-soft: #DDEDEF; --color-secondary: #0D1B20; --color-secondary-soft: #E2E8EA; --ink-on-secondary: #F4F8F8; --border: rgba(13, 27, 32, 0.14); --border-strong: rgba(13, 27, 32, 0.28); --focus-ring: #0D1B20; --color-warning: #865D00; --color-warning-soft: #F6E7BE; --level-1: #185C65; --level-1-soft: #DDEDEF; --level-2: #2A5F9E; --level-2-soft: #DFEBF6; --level-3: #7D5A10; --level-3-soft: #F4E7C1; --path-dev: #185C65; --path-dev-soft: #DDEDEF; --path-arch: #1F4A7A; --path-arch-soft: #DFEAF4; --path-lead: #7D5A10; --path-lead-soft: #F4E7C1; --shadow-sm: 0 1px 2px rgba(13, 27, 32, 0.06), 0 1px 3px rgba(13, 27, 32, 0.08); --shadow-md: 0 4px 12px rgba(13, 27, 32, 0.10), 0 2px 4px rgba(13, 27, 32, 0.06); --shadow-lg: 0 16px 40px rgba(13, 27, 32, 0.16), 0 4px 10px rgba(13, 27, 32, 0.08); --gradient-brand: linear-gradient(135deg, #185C65 0%, #D9B45A 52%, #0D1B20 100%); --gradient-brand-mark: linear-gradient(135deg, #09363C 0%, #335B40 42%, #D17716 74%, #11100E 100%); } [data-theme="dark"] { --surface-0: #071114; --surface-1: #0A161A; --surface-2: #102329; --surface-3: #143039; --surface-4: #183B43; --surface-5: #102329; --surface-6: #050C0F; --ink-strong: #FFFFFF; --ink: #ECF5F3; --ink-muted: #B4C8C5; --ink-subtle: #94AAA8; --ink-on-primary: #081013; --ink-on-inverse: #ECF5F3; --color-primary: #57C3BD; --color-primary-hover: #7DD6D0; --color-primary-ink: #7DD6D0; --color-primary-soft: rgba(87, 195, 189, 0.16); --color-secondary: #D9B45A; --color-secondary-soft: rgba(217, 180, 90, 0.16); --ink-on-secondary: #081013; --border: rgba(87, 195, 189, 0.18); --border-strong: rgba(217, 180, 90, 0.34); --focus-ring: #D9B45A; --color-warning: #F0C96A; --color-warning-soft: rgba(217, 180, 90, 0.18); --level-1: #7DD6D0; --level-1-soft: rgba(87, 195, 189, 0.18); --level-2: #86B8F2; --level-2-soft: rgba(134, 184, 242, 0.18); --level-3: #F0C96A; --level-3-soft: rgba(217, 180, 90, 0.18); --path-dev: #7DD6D0; --path-dev-soft: rgba(87, 195, 189, 0.18); --path-arch: #86B8F2; --path-arch-soft: rgba(134, 184, 242, 0.18); --path-lead: #F0C96A; --path-lead-soft: rgba(217, 180, 90, 0.18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.52); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.58); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.68); --gradient-brand: linear-gradient(135deg, #D9B45A 0%, #57C3BD 54%, #071114 100%); --gradient-brand-mark: linear-gradient(135deg, #D17716 0%, #335B40 40%, #09363C 70%, #050607 100%); }