/* ============================================================================
* Iron-Labs Core — Design System Foundation
* ============================================================================
*
* Author: Thomas (with Claude)
* Version: 1.0.0
* Date: 2026-05-28
*
* Materialisierung der ADRs 0001-0005. Alle Foundation-Tokens als CSS Custom
* Properties, Theme-Switch via [data-theme="dark"], Helper-Klassen für Type
* und Layout, prefers-reduced-motion als Default-Reset.
*
* Usage:
*
* (oder andere App-Accent)
*
* Dark Mode aktivieren:
*
*
* Verweise:
* ADR-0001 Semantic Colors ADR-0004 Typo-Skala
* ADR-0002 Surface/Border/Text ADR-0005 Spacing/Radii/Shadows/Motion
* ADR-0003 App-Accent-Pattern usage-notes.md
* ============================================================================ */
/* ----- Font-Loading -------------------------------------------------------
* TECH DEBT (ADR-0004): Google Fonts CDN überträgt Nutzer-IP an Google.
* In DE seit OLG München 2022 (3 O 17493/20) als DSGVO-Verstoß eingestuft.
* Migration zu Self-Host (WOFF2 lokal + @font-face) sobald Iron-Labs-Infra-
* Umbau abgeschlossen ist. Trigger steht in claude-state.md.
* --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');
/* ----- Tokens · Light Mode (Default) -------------------------------------- */
:root {
/* ----- Brand · Iron-Familie (ADR-0003 context) ----- */
--color-iron: #C45028;
--color-iron-hot: #FF7849;
--color-iron-print: #8A3018;
/* ----- Surfaces (ADR-0002) ----- */
--surface-page: #F4F5F8; /* Canvas / body bg */
--surface-1: #FFFFFF; /* Cards, Panels */
--surface-2: #F0F2F7; /* Elevated · Popovers, Hover-States */
/* ----- Borders (ADR-0002 revised) ----- */
--border-subtle: #E5E8EE; /* Interne Dividers innerhalb Cards */
--border: #C2CAD3; /* Card-Frames, Input-Borders */
--border-strong: #98A0AB; /* Emphasis, focus rings */
/* ----- Text (ADR-0002) ----- */
--text-primary: #13161E; /* Body, Headlines */
--text-secondary: #4A5060; /* Sekundär, längere Beschreibungen */
--text-tertiary: #6E727A; /* Labels, Captions, ALL-CAPS-Header */
--text-disabled: #A8AEB8; /* Inaktive UI-Komponenten (WCAG-exempt) */
/* ----- Semantic Colors (ADR-0001) ----- */
--color-success: #6B8E2F; /* olive */
--color-warning: #C2A02E; /* senf */
--color-error: #8B2A3F; /* burgund */
--color-info: #3D8580; /* teal-dim */
/* ----- Typo · Fonts (ADR-0004) ----- */
--font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'DM Mono', 'SF Mono', Menlo, Consolas, monospace;
/* ----- Typo · Sizes (ADR-0004) ----- */
--text-size-display: clamp(28px, 5vw + 1rem, 48px);
--text-size-h1: clamp(22px, 3vw + 0.8rem, 32px);
--text-size-h2: 24px;
--text-size-h3: 18px;
--text-size-body: 15px;
--text-size-small: 13px;
--text-size-label: 11px;
--text-size-code: 14px;
--text-size-code-inline: 13px;
/* ----- Typo · Line-Heights (ADR-0004) ----- */
--leading-tight: 1.1;
--leading-heading: 1.3;
--leading-snug: 1.4;
--leading-body: 1.6;
/* ----- Spacing (ADR-0005) ----- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
/* ----- Radii (ADR-0005) ----- */
--radius-sm: 4px; /* Buttons, Inputs, kleine Badges */
--radius-md: 6px; /* Cards, Modal */
--radius-lg: 8px; /* Große Container, App-Sections */
--radius-pill: 9999px; /* Pills, Avatare, Tags */
/* ----- Shadows · Light (ADR-0005) ----- */
--shadow-sm: 0 1px 2px rgba(15,15,15,0.06), 0 1px 1px rgba(15,15,15,0.04);
--shadow-md: 0 4px 12px rgba(15,15,15,0.10), 0 1px 3px rgba(15,15,15,0.05);
--shadow-lg: 0 12px 32px rgba(15,15,15,0.14), 0 4px 8px rgba(15,15,15,0.08);
/* ----- Motion · Durations (ADR-0005) ----- */
--motion-instant: 75ms;
--motion-fast: 150ms;
--motion-medium: 250ms;
--motion-slow: 400ms;
/* ----- Motion · Easings (ADR-0005) ----- */
--ease-out: cubic-bezier(0, 0, 0.2, 1); /* Standard für Erscheinen */
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* Verschwinden, selten */
}
/* ----- Tokens · Dark Mode --------------------------------------------------- */
[data-theme="dark"] {
/* ----- Surfaces ----- */
--surface-page: #080A0F;
--surface-1: #1A1D27;
--surface-2: #242836;
/* ----- Borders ----- */
--border-subtle: #2A2E3E;
--border: #424859;
--border-strong: #5C6376;
/* ----- Text ----- */
--text-primary: #E8EAF0;
--text-secondary: #B0B7CA;
--text-tertiary: #8A9BB0;
--text-disabled: #4F5567;
/* ----- Semantic Colors · Tonal Pairs (ADR-0001) ----- */
--color-success: #9BC759;
--color-warning: #E8C557;
--color-error: #D96B82;
--color-info: #6FB8B2;
/* ----- Shadows · Dark = Shadow + 0.5px inner ring (Linear-Pattern) ----- */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.05);
--shadow-md: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.05);
--shadow-lg: 0 20px 48px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.08);
}
/* ----- Accessibility · prefers-reduced-motion (ADR-0005) -------------------- */
/* WCAG SC 2.3.3 — User-Setting respektieren ist Pflicht, nicht Opt-in. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ----- Minimal Reset -------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
background: var(--surface-page);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-size-body);
line-height: var(--leading-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre {
margin: 0;
}
/* ----- Native Element Defaults --------------------------------------------- */
h1 {
font-family: var(--font-display);
font-size: var(--text-size-h1);
line-height: 1.2;
font-weight: 700;
color: var(--text-primary);
}
h2 {
font-family: var(--font-sans);
font-size: var(--text-size-h2);
line-height: var(--leading-heading);
font-weight: 600;
color: var(--text-primary);
}
h3 {
font-family: var(--font-sans);
font-size: var(--text-size-h3);
line-height: var(--leading-snug);
font-weight: 500;
color: var(--text-primary);
}
code {
font-family: var(--font-mono);
font-size: var(--text-size-code-inline);
background: var(--surface-2);
padding: 1px 5px;
border-radius: var(--radius-sm);
}
pre {
font-family: var(--font-mono);
font-size: var(--text-size-code);
line-height: 1.55;
background: var(--surface-2);
color: var(--text-primary);
padding: var(--space-3);
border-radius: var(--radius-md);
overflow-x: auto;
}
pre code {
background: transparent;
padding: 0;
border-radius: 0;
}
hr {
border: 0;
border-top: 0.5px solid var(--border-subtle);
margin: var(--space-6) 0;
}
/* ----- Helper-Klassen · Typo ------------------------------------------------ */
.display {
font-family: var(--font-display);
font-size: var(--text-size-display);
line-height: var(--leading-tight);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.h1 { font-family: var(--font-display); font-size: var(--text-size-h1); line-height: 1.2; font-weight: 700; color: var(--text-primary); }
.h2 { font-family: var(--font-sans); font-size: var(--text-size-h2); line-height: var(--leading-heading); font-weight: 600; color: var(--text-primary); }
.h3 { font-family: var(--font-sans); font-size: var(--text-size-h3); line-height: var(--leading-snug); font-weight: 500; color: var(--text-primary); }
.body { font-size: var(--text-size-body); line-height: var(--leading-body); color: var(--text-primary); }
.small { font-size: var(--text-size-small); line-height: var(--leading-snug); color: var(--text-secondary); }
.label {
font-family: var(--font-mono);
font-size: var(--text-size-label);
line-height: var(--leading-snug);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-tertiary);
}
/* ----- Helper-Klassen · Layout --------------------------------------------- */
.prose {
max-width: 38em; /* ~65 Zeichen pro Zeile (ADR-0004) */
line-height: var(--leading-body);
}
.surface-1 { background: var(--surface-1); }
.surface-2 { background: var(--surface-2); }
.card {
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
}
/* ----- Helper · Selection · Focus ------------------------------------------ */
::selection {
background: var(--color-iron);
color: #FFFFFF;
}
:focus-visible {
outline: 2px solid var(--border-strong);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ----- Tabler Icon Sizing Helpers (ADR-0008) -------------------------------- */
.ti-sm { font-size: 12px; }
.ti-md { font-size: 14px; }
.ti-lg { font-size: 16px; }
.ti-xl { font-size: 20px; }
.ti-2xl { font-size: 24px; }