/* * ╔══════════════════════════════════════════════════════════════════╗ * ║ DENTAL MUNICH UNION — DESIGN TOKEN SYSTEM ║ * ║ tokens.css · v1.0 · April 2026 ║ * ║ ║ * ║ Single source of truth for all visual decisions. ║ * ║ Import once in base.html, before Bootstrap and all other CSS. ║ * ╚══════════════════════════════════════════════════════════════════╝ */ /* ───────────────────────────────────────────────────────────────── 1. PRIMITIVE TOKENS Raw values. Never use these directly in components — always reference a semantic token instead. ───────────────────────────────────────────────────────────────── */ :root { /* Brand palette — primitives */ --color-navy-900: #0d2233; --color-navy-800: #152e44; --color-navy-700: #1f4459; /* PRIMARY BRAND */ --color-navy-600: #2a5a74; --color-navy-500: #366f8e; --color-navy-400: #5a90aa; --color-navy-300: #85b0c3; --color-navy-200: #b6d0dc; --color-navy-100: #deeaf0; --color-navy-50: #eef5f8; --color-amber-900: #7a4a1e; --color-amber-800: #9c5e26; --color-amber-700: #c07530; --color-amber-600: #d4913f; /* accent warm */ --color-amber-500: #D4A574; /* ACCENT */ --color-amber-400: #deb98d; --color-amber-300: #e8ceaa; --color-amber-200: #f0e0c8; --color-amber-100: #f7efdf; --color-amber-50: #fdf8f1; --color-cream-900: #3a3a36; --color-cream-800: #5c5c56; /* ≥ AAA body on --bg-page (6.44:1) */ --color-cream-700: #4d4d49; /* ≥ AAA body on --bg-page (8.12:1) */ --color-cream-600: #6a6a66; /* ≥ AA body on --bg-page (5.13:1) — text-muted */ --color-cream-500: #8a8a83; /* ≥ AA large/UI on --bg-page (3.49:1) */ --color-cream-400: #b5b5ae; /* ≥ AA UI-only on --bg-page (2.05:1 — exempt for decorative) */ --color-cream-300: #e0dfda; --color-cream-200: #eeede9; --color-cream-100: #f5f4f0; --color-cream-50: #FAFAF7; /* CREAM BASE */ /* Functional palette — primitives */ --color-green-700: #1e6644; --color-green-500: #2e9e68; --color-green-100: #d4f0e4; --color-green-50: #edf8f3; --color-yellow-700: #875f00; --color-yellow-500: #c49000; --color-yellow-100: #feefc3; --color-yellow-50: #fffbeb; --color-red-700: #921f1f; --color-red-500: #d63030; --color-red-100: #fcd8d8; --color-red-50: #fef5f5; /* Neutrals */ --color-white: #ffffff; --color-black: #0a0c0f; /* ───────────────────────────────────────────────────────────────── 2. SEMANTIC TOKENS — LIGHT MODE (default) These are what components consume. They map to primitives above. ───────────────────────────────────────────────────────────────── */ /* — Backgrounds — */ --bg-page: var(--color-cream-50); /* #FAFAF7 — page canvas */ --bg-surface: var(--color-white); /* cards, modals, panels */ --bg-sunken: var(--color-cream-100); /* inputs, code blocks */ --bg-raised: var(--color-white); /* floating dropdowns */ --bg-overlay: rgba(15, 20, 28, 0.45); /* modal backdrops */ --bg-brand: var(--color-navy-700); /* primary brand bg (#1f4459) */ --bg-brand-hover: var(--color-navy-800); --bg-brand-muted: var(--color-navy-50); /* tinted section backgrounds */ --bg-accent: var(--color-amber-500); /* #D4A574 */ --bg-accent-hover:var(--color-amber-600); --bg-accent-muted:var(--color-amber-50); /* — Text — */ --text-primary: var(--color-navy-900); /* body text — 15.5:1 on --bg-page */ --text-secondary: var(--color-cream-700); /* supporting text, captions — 8.1:1 (AAA) */ --text-muted: var(--color-cream-600); /* placeholders, timestamps — 5.1:1 (AA body) */ --text-disabled: var(--color-cream-500); /* UI-only, ≥3:1 large text */ --text-inverse: var(--color-cream-50); /* text on dark backgrounds */ --text-link: var(--color-navy-700); --text-link-hover:var(--color-navy-600); --text-accent: var(--color-amber-700); /* accent-colored labels */ --text-brand: var(--color-navy-700); /* — Borders — */ --border-subtle: var(--color-cream-200); /* hairline separators */ --border-default: var(--color-cream-300); /* standard card/input borders */ --border-strong: var(--color-cream-500); /* emphasized dividers */ --border-brand: var(--color-navy-700); --border-accent: var(--color-amber-500); --border-focus: var(--color-navy-600); /* :focus-visible outline */ /* — Status: Success — */ --color-success: var(--color-green-500); --color-success-emphasis: var(--color-green-700); --bg-success: var(--color-green-50); --bg-success-muted: var(--color-green-100); --border-success: var(--color-green-500); --text-success: var(--color-green-700); /* — Status: Warning — */ --color-warning: var(--color-yellow-500); --color-warning-emphasis: var(--color-yellow-700); --bg-warning: var(--color-yellow-50); --bg-warning-muted: var(--color-yellow-100); --border-warning: var(--color-yellow-500); --text-warning: var(--color-yellow-700); /* — Status: Error / Danger — */ --color-error: var(--color-red-500); --color-error-emphasis: var(--color-red-700); --bg-error: var(--color-red-50); --bg-error-muted: var(--color-red-100); --border-error: var(--color-red-500); --text-error: var(--color-red-700); /* — Status: Info — */ --color-info: var(--color-navy-500); --bg-info: var(--color-navy-50); --bg-info-muted: var(--color-navy-100); --border-info: var(--color-navy-300); --text-info: var(--color-navy-700); /* ───────────────────────────────────────────────────────────────── 3. TYPOGRAPHY TOKENS ───────────────────────────────────────────────────────────────── */ /* — Font families — */ --font-display: 'DM Serif Display', 'Georgia', serif; --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'DM Mono', 'Menlo', 'Consolas', monospace; /* — Type scale (4 levels + helpers) — Base: 16px. Scale ratio ≈ 1.25 (Major Third). */ --text-xs: 0.75rem; /* 12px — labels, badges, timestamps */ --text-sm: 0.875rem; /* 14px — secondary body, captions */ --text-base: 1rem; /* 16px — primary body copy */ --text-md: 1.125rem; /* 18px — lead paragraphs */ --text-lg: 1.25rem; /* 20px — small headings, card titles */ --text-xl: 1.5rem; /* 24px — H3 / section subheadings */ --text-2xl: 1.875rem; /* 30px — H2 / page section titles */ --text-3xl: 2.25rem; /* 36px — H1 / hero titles */ --text-4xl: 3rem; /* 48px — display / landing hero */ /* — Font weights — */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; /* — Line heights — */ --leading-none: 1; --leading-tight: 1.2; /* display headings */ --leading-snug: 1.35; /* h2, h3 */ --leading-normal: 1.5; /* UI labels, buttons */ --leading-relaxed:1.65; /* body copy — optimal for long reading */ --leading-loose: 1.8; /* body on dense content pages */ /* — Letter spacing — */ --tracking-tight: -0.02em; /* display type */ --tracking-normal: 0; --tracking-wide: 0.04em; /* all-caps labels */ --tracking-wider: 0.1em; /* mono labels */ /* ───────────────────────────────────────────────────────────────── 4. SPACING TOKENS 4px base grid. All spacing is a multiple of 4px. ───────────────────────────────────────────────────────────────── */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* — Component-specific spacing aliases — */ --padding-btn-sm: var(--space-1-5) var(--space-3); /* 6px 12px */ --padding-btn-md: var(--space-2) var(--space-5); /* 8px 20px */ --padding-btn-lg: var(--space-3) var(--space-6); /* 12px 24px */ --padding-card: var(--space-6); /* 24px */ --padding-card-sm: var(--space-4); /* 16px */ --padding-input: var(--space-2) var(--space-3); /* 8px 12px */ --padding-section: var(--space-16) var(--space-8); /* 64px 32px */ /* — Layout — */ --max-w-prose: 680px; /* optimal reading column width */ --max-w-content: 960px; /* content container */ --max-w-wide: 1200px; /* full-width layout */ --sidebar-w: 260px; /* learning platform sidebar */ /* ───────────────────────────────────────────────────────────────── 5. BORDER RADIUS TOKENS ───────────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 4px; /* badges, tags, small chips */ --radius-md: 6px; /* inputs, small buttons */ --radius-lg: 8px; /* cards, panels */ --radius-xl: 12px; /* modals, large cards */ --radius-2xl: 16px; /* hero panels, feature cards */ --radius-full: 9999px; /* pills, avatar circles */ /* ───────────────────────────────────────────────────────────────── 6. SHADOW TOKENS ───────────────────────────────────────────────────────────────── */ /* Elevation scale — use to communicate z-depth */ --shadow-none: none; --shadow-xs: /* barely lifted — nav items on hover */ 0 1px 2px rgba(15, 30, 45, 0.06); --shadow-sm: /* resting cards */ 0 1px 3px rgba(15, 30, 45, 0.08), 0 1px 2px rgba(15, 30, 45, 0.06); --shadow-md: /* course cards, dropdowns */ 0 4px 6px -1px rgba(15, 30, 45, 0.08), 0 2px 4px -1px rgba(15, 30, 45, 0.06); --shadow-lg: /* modals, popovers, floating panels */ 0 10px 15px -3px rgba(15, 30, 45, 0.10), 0 4px 6px -2px rgba(15, 30, 45, 0.06); --shadow-xl: /* sidebar, sticky headers */ 0 20px 25px -5px rgba(15, 30, 45, 0.10), 0 10px 10px -5px rgba(15, 30, 45, 0.04); --shadow-inner: /* inset — active/pressed states, input fields */ inset 0 2px 4px rgba(15, 30, 45, 0.08); --shadow-focus: /* :focus-visible ring */ 0 0 0 3px rgba(31, 68, 89, 0.25); /* navy at 25% */ --shadow-focus-error: 0 0 0 3px rgba(214, 48, 48, 0.25); /* Brand-colored glow — use sparingly on CTAs */ --shadow-brand: 0 4px 14px rgba(31, 68, 89, 0.30); --shadow-accent: 0 4px 14px rgba(212, 165, 116, 0.35); /* ───────────────────────────────────────────────────────────────── 7. TRANSITION TOKENS ───────────────────────────────────────────────────────────────── */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* standard */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle bounce */ --duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 250ms; --duration-slower: 400ms; --transition-base: var(--duration-base) var(--ease-default); --transition-slow: var(--duration-slow) var(--ease-default); /* ───────────────────────────────────────────────────────────────── 8. Z-INDEX SCALE ───────────────────────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; /* cards, inline UI */ --z-dropdown: 100; /* dropdowns, tooltips */ --z-sticky: 200; /* sticky nav, sidebar */ --z-modal: 300; /* modal overlays */ --z-toast: 400; /* notifications */ --z-max: 999; } /* ───────────────────────────────────────────────────────────────── 9. DARK MODE — MANUAL TOGGLE ONLY Kein automatisches Mitschalten mit prefers-color-scheme. Dark Mode wird ausschließlich durch data-theme="dark" auf aktiviert (gesetzt von static/js/theme.js und dem Anti-FOUC-Snippet in base.html). ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --bg-page: #0e1117; --bg-surface: #161b23; --bg-sunken: #0a0d12; --bg-raised: #1e2430; --bg-brand-muted: #0f1e2a; --bg-accent-muted: #2a1f10; --text-primary: #e8e5de; --text-secondary: #9a9890; --text-muted: #6e6c64; --text-disabled: #3a3a36; --text-inverse: #0e1117; --text-link: var(--color-navy-300); --text-link-hover: var(--color-navy-200); --text-brand: var(--color-navy-200); --text-accent: var(--color-amber-400); --border-subtle: rgba(255, 255, 255, 0.05); --border-default: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --border-brand: var(--color-navy-400); --border-accent: var(--color-amber-400); --border-focus: var(--color-navy-400); --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -2px rgba(0,0,0,0.3); /* — Dark-mode background overrides — */ --bg-overlay: rgba(0, 0, 0, 0.72); --bg-brand: #1a3347; --bg-brand-hover: #122637; --bg-accent: var(--color-amber-600); --bg-accent-hover: var(--color-amber-700); --bg-success: #0c2417; --bg-success-muted: #12301f; --bg-warning: #231905; --bg-warning-muted: #2d2108; --bg-error: #280e0e; --bg-error-muted: #321212; --bg-info: #0d1f2e; --bg-info-muted: #122537; } /* ───────────────────────────────────────────────────────────────── 10. BASE RESETS USING TOKENS Minimal resets to apply tokens globally. Do not add layout rules here — keep this file token-only. NOTE: p { max-width } intentionally NOT set globally — use .prose p or utility class where needed to avoid breaking existing layouts. ───────────────────────────────────────────────────────────────── */ body { background-color: var(--bg-page); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-regular); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-primary); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); line-height: var(--leading-snug); } h3 { font-size: var(--text-xl); line-height: var(--leading-snug); font-family: var(--font-body); font-weight: var(--weight-semibold); } h4 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: var(--weight-semibold); } h5 { font-size: var(--text-base); font-family: var(--font-body); font-weight: var(--weight-semibold); } h6 { font-size: var(--text-sm); font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* Opt-in prose container — apply to article bodies where an optimal reading width is desired. */ .prose p { max-width: var(--max-w-prose); } a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--transition-base); } a:hover { color: var(--text-link-hover); } code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-sunken); border-radius: var(--radius-sm); } *:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; box-shadow: var(--shadow-focus); }