/* ============================================================ TROCKENWIEN · Design Tokens Colors + Typography + Semantic CSS Variables ============================================================ */ /* ---- Fonts (Google Fonts) ---- These are loaded via in HTML : https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800 &family=Manrope:wght@300;400;500;600;700;800 &family=JetBrains+Mono:wght@400;500;600 &display=swap ------------------------------------------------- */ :root { /* ============================================================ COLOR PRIMITIVES ============================================================ */ /* Brand */ --bau-orange-50: #FFF1E5; --bau-orange-100: #FFD9B8; --bau-orange-200: #FFB073; --bau-orange-300: #FF8530; --bau-orange-400: #FF6B00; /* primary */ --bau-orange-500: #E55E00; --bau-orange-600: #B84A00; --bau-orange-700: #803300; /* Petrol (secondary accent — info, trust, links) */ --petrol-50: #E6F4F6; --petrol-100: #B3DEE3; --petrol-200: #66B9C2; --petrol-300: #0FA4B0; /* primary petrol */ --petrol-400: #0E7C86; --petrol-500: #0B5A62; --petrol-600: #073C42; /* Asphalt (dark surfaces) */ --asphalt-950: #08090B; --asphalt-900: #0E0F12; /* default dark bg */ --asphalt-850: #121419; --asphalt-800: #16181D; /* panel */ --asphalt-700: #1F2228; /* elevated panel */ --asphalt-600: #2A2E36; /* border / divider */ --asphalt-500: #3D434D; /* Steel (neutral grays) */ --steel-400: #6B7280; --steel-300: #9CA3AF; --steel-200: #C7CBD1; --steel-100: #E4E6EA; /* Kalk (warm off-white) */ --kalk-50: #FBFAF7; --kalk-100: #F5F4EF; /* default light bg */ --kalk-200: #ECEAE2; --kalk-300: #D9D6CB; /* Semantic */ --success: #3CB371; --success-bg: rgba(60, 179, 113, 0.12); --warning: #FFB020; --warning-bg: rgba(255, 176, 32, 0.12); --danger: #FF4D4D; --danger-bg: rgba(255, 77, 77, 0.12); --info: var(--petrol-300); --info-bg: rgba(15, 164, 176, 0.12); /* ============================================================ SEMANTIC TOKENS — dark mode default ============================================================ */ /* Surfaces */ --bg: var(--asphalt-900); --bg-elevated: var(--asphalt-800); --bg-panel: var(--asphalt-700); --bg-inverse: var(--kalk-100); /* Glass */ --glass-bg: rgba(22, 24, 29, 0.62); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: blur(18px) saturate(140%); /* Foreground */ --fg: var(--kalk-100); --fg-strong: #FFFFFF; --fg-muted: #e8e8ea; --fg-subtle: #d1d5db; --fg-inverse: var(--asphalt-900); /* Brand fg shortcuts */ --fg-brand: var(--bau-orange-400); --fg-petrol: #ffffff; /* Borders */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-subtle: rgba(255, 255, 255, 0.04); --border-brand: var(--bau-orange-400); /* Focus ring */ --ring: 0 0 0 2px rgba(255, 107, 0, 0.55); --ring-light: 0 0 0 2px rgba(255, 107, 0, 1); /* ============================================================ TYPOGRAPHY ============================================================ */ --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Type scale (rem-based, 1rem = 16px) */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 4rem; /* 64px */ --text-6xl: 5.25rem; /* 84px */ --text-7xl: 6.75rem; /* 108px */ /* Line heights */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.55; --lh-loose: 1.7; /* Tracking */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-base: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.18em; /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ============================================================ SPACING (8-pt grid) ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; --space-10: 96px; --space-11: 128px; /* ============================================================ RADII ============================================================ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 999px; /* ============================================================ SHADOWS / ELEVATION ============================================================ */ --shadow-inset-highlight: inset 0 1px 0 rgba(255,255,255,0.06); --shadow-card-light: 0 1px 2px rgba(14,15,18,0.06), 0 8px 24px -12px rgba(14,15,18,0.12); --shadow-card-hover: 0 2px 4px rgba(14,15,18,0.08), 0 18px 40px -16px rgba(14,15,18,0.22); --shadow-popover: 0 12px 40px -8px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35); --shadow-glow-brand: 0 0 0 1px rgba(255,107,0,0.35), 0 8px 30px -6px rgba(255,107,0,0.35); } /* ============================================================ SEMANTIC ELEMENT STYLES Drop-in defaults: use these classes OR raw HTML elements. ============================================================ */ body { font-family: var(--font-body); background: var(--bg); color: var(--fg); font-size: var(--text-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .tw-h1, h1 { font-family: var(--font-display); font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl)); font-weight: var(--weight-semibold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-strong); text-wrap: balance; } .tw-h2, h2 { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); font-weight: var(--weight-semibold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-strong); text-wrap: balance; } .tw-h3, h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg-strong); } .tw-h4, h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--lh-snug); color: var(--fg-strong); } .tw-eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #ffffff; } .tw-lead { font-size: var(--text-lg); line-height: var(--lh-base); color: var(--fg-muted); text-wrap: pretty; max-width: 60ch; } .tw-p, p { font-size: var(--text-base); line-height: var(--lh-base); color: var(--fg); text-wrap: pretty; } .tw-small, small { font-size: var(--text-sm); color: var(--fg-muted); } .tw-mono, code, .tw-num { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: 0; } .tw-num--lg { font-size: var(--text-2xl); font-weight: var(--weight-medium); } a { color: #ffffff; text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--fg-brand); } a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 2px; } ::selection { background: var(--bau-orange-400); color: var(--asphalt-900); }