/* * Design-Tokens – einzige Stelle für Farb- und Größenwerte (ADR-017, docs/design/README.md). * Alle anderen Stylesheets verwenden nur var(--…). Ein Test prüft das. * * Farben gelten für alle Themes; Größen hängen am Theme (data-theme am ). * Standard ist "best-ager" (LogoGym). Themes "standard" und "kids" folgen später. */ /* --- Farben (Kontrastwerte im Design-Leitfaden §2) ---------------------------- */ :root { --color-bg: #FDF7E3; --color-surface: #FEFAEC; --color-wash: #FDE2A8; --color-accent: #FCB856; /* nur mit Braun darauf, nie Weiß */ --color-decor: #ED7733; /* nie Textfarbe */ --color-heading-accent: #D65E1C; /* nur große Überschriften ≥ 24 px */ --color-primary: #B8480F; --color-primary-strong: #8F3A0C; --color-text: #4F2105; --color-text-muted: #6B4A36; --color-sage: #858458; /* Deko, kein Text */ --color-focus: #4F2105; --color-on-primary: #FFFFFF; /* Text/Icons auf primary und decor */ --shadow-card: 0 2px 12px rgb(79 33 5 / 0.08); --shadow-photo: 0 6px 22px rgb(79 33 5 / 0.16); --decor-opacity: 0.55; --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; --font-script: "Caveat Brush", "Segoe Print", "Bradley Hand", cursive; --font-weight-regular: 400; --font-weight-bold: 700; --font-weight-extrabold: 800; } /* --- Größen, Abstände, Formen: Theme best-ager (Standard) -------------------- */ :root, [data-theme="best-ager"] { --font-size-base: 1.25rem; /* 20 px */ --font-size-small: 1.125rem; /* 18 px – kleinste erlaubte Größe */ --font-size-h3: 1.5rem; --font-size-h2: 2rem; --font-size-h1: 2.5rem; --font-size-script: 2.25rem; /* Caveat Brush wirkt klein */ --font-size-script-hero: 3rem; --font-size-wordmark: 2rem; --line-height-base: 1.6; --line-height-heading: 1.2; --line-height-script: 1.05; --letter-spacing-label: 0.08em; --underline-offset: 0.18em; --measure: 65ch; /* max. Zeilenlänge */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --page-gutter: 1rem; /* Seitenrand mobil, mind. 16 px */ --page-max-width: 70rem; --column-min: 20rem; /* Spalten brechen darunter in eine Spalte um */ --radius-card: 1rem; --radius-button: 999px; --radius-round: 50%; --radius-small: 0.25rem; --size-hairline: 1px; --border-width: 2px; --border-width-strong: 3px; --tap-target-min: 48px; --button-min-height: 56px; --button-min-height-large: 64px; --button-brush-bleed-x: 1rem; /* Pinselkante ragt über die Pille hinaus */ --button-brush-bleed-y: 0.45rem; --button-brush-tilt: -1.5deg; --button-brush-tilt-large: -0.4deg; /* breite Buttons: Schräge wirkt sonst zu stark */ --focus-ring-width: 3px; --focus-ring-offset: 2px; --check-size: 2.25rem; --check-icon-size: 1.2rem; --icon-circle-size: 3.5rem; --icon-size: 1.75rem; --icon-inline-size: 1.2em; --wash-tilt: -1.5deg; --polaroid-tilt: -2deg; /* max. 3° (Leitfaden §5) */ --polaroid-max-width: 24rem; --leaf-width: 8rem; } /* Breitere Bildschirme: etwas mehr Luft und größere Hero-Schrift */ @media (min-width: 48rem) { :root, [data-theme="best-ager"] { --page-gutter: 3rem; --font-size-script-hero: 4rem; --leaf-width: 10rem; } }