/* * Design-Tokens — Tour-Tagebuch * * Einzige Quelle der Wahrheit für alle Farben, Schriftgrößen, Abstände, * Radien und Schatten der App. Siehe DESIGN.md für die Begründung dahinter. * * Format-Entscheidung: CSS Custom Properties. * Begründung: nativer Web-Standard, funktioniert unabhängig davon, welches * Frontend-Framework später gewählt wird, unterstützt Live-Umschalten des * Modus per Attribut ohne Neu-Build, und ist in den Browser-DevTools direkt * inspizierbar — praktisch beim Debuggen unterwegs auf dem Gerät. * (Hinweis: für Nicht-CSS-Konsumenten wie Kartenbibliotheken wird später * ein separater Spiegel dieser Werte nötig — siehe DESIGN.md, technische * Hinweise. Nicht Teil dieser Datei.) * * Struktur: * 1. Primitive Tokens — reine Farb-/Maß-Werte, nie direkt in Komponenten * verwendet. * 2. Semantische Tokens — das, was Komponenten tatsächlich referenzieren. * Classic-Modus ist der Default unter :root, der Fahr-Modus überschreibt * per [data-mode="fahr"] auf einem Vorfahren-Element (z. B. ). * 3. Karten-Tokens — abhängig vom gewählten Kartenstil, separat schaltbar * per [data-map="dark"] / [data-map="light"], da Kartenstil und * UI-Modus nicht zwingend gekoppelt sind. * * Eiserne Regel (siehe DESIGN.md): Kein Element bekommt einen Wert direkt * zugewiesen — alles zieht ausschließlich aus den semantischen Tokens. */ :root { /* ------------------------------------------------------------------ */ /* 1. Primitive Tokens */ /* ------------------------------------------------------------------ */ /* Neutrale Basis */ --p-black: #000000; --p-white: #ffffff; /* Classic: Grautöne für Karteikarten auf Schwarz */ --p-grey-925: #1a1a1c; /* Karteikarte, Ebene 1 */ --p-grey-900: #232326; /* Karteikarte, Ebene 2 (z. B. Sheets/Modals) */ --p-grey-800: #2e2e32; /* dezente Trennlinien/Ränder */ --p-grey-500: #8a8a8e; /* gedämpftes Grau, Unterzeilen (Classic) */ --p-grey-400: #5c5c60; /* noch dezenter, Platzhaltertext (Classic) */ /* Classic: Textfarbe auf Schwarz — leicht warmes Weiß, kein reines #fff, das wirkt in großen Flächen kälter/härter als zum ruhigen Retro-Ton passt */ --p-offwhite: #f2f2f0; /* Fahr-Modus: heller Hintergrund, leicht warmes Off-White statt reinem Weiß, um Blendung/Halo-Effekt in praller Sonne zu reduzieren */ --p-warmwhite: #f4f3ee; --p-nearblack: #0a0a0a; /* Text auf hellem Grund, maximaler Kontrast */ --p-darkgrey: #47474a; /* Unterzeilen im Fahr-Modus, noch klar lesbar */ /* Akzent Classic: Sky Blue — RGB(108,171,221), Pantone 292 C */ --p-sky-blue: #6cabdd; --p-sky-blue-pressed: #5390c4; /* abgedunkelt für Press-/Active-State */ --p-sky-blue-subtle: rgba(108, 171, 221, 0.15); /* dezente Hintergrundfläche */ /* * Akzent Fahr-Modus: aus Sky Blue abgeleitet. * Sky Blue liegt bei HSL(206°, 62%, 65%). Für den Fahr-Modus wird bei * gleichem Farbton (206°) die Sättigung auf 75% erhöht und die Helligkeit * auf 42% gesenkt. Ergebnis: derselbe Blauton, aber kräftiger und dunkler * — er behält Kontrast (~4.8:1 auf hellem Grund) und "bleicht" in * praller Sonne nicht so leicht aus wie das helle Sky Blue. */ --p-deep-blue: #1b76bb; /* RGB(27,118,187) — Fahr-Modus-Akzent */ --p-deep-blue-pressed: #144f80; /* abgedunkelt für Press-/Active-State */ --p-deep-blue-subtle: rgba(27, 118, 187, 0.12); /* ------------------------------------------------------------------ */ /* 2. Semantische Tokens — Classic-Modus (Default) */ /* ------------------------------------------------------------------ */ --color-bg: var(--p-black); --color-surface: var(--p-grey-925); --color-surface-raised: var(--p-grey-900); --color-border: var(--p-grey-800); --color-text-primary: var(--p-offwhite); --color-text-secondary: var(--p-grey-500); --color-text-tertiary: var(--p-grey-400); --color-accent: var(--p-sky-blue); --color-accent-pressed: var(--p-sky-blue-pressed); --color-accent-subtle: var(--p-sky-blue-subtle); --color-accent-on: var(--p-black); /* Text/Icon auf Akzentflächen */ --color-accent-border: transparent; /* Classic: keine Umrandung nötig */ --shadow-float: 0 4px 20px rgba(0, 0, 0, 0.5); /* schwebende Tab-Leiste */ /* * Text-Rollen — dritte Ebene über den semantischen Tokens. * Komponenten referenzieren NIE --color-accent oder --color-text-primary * direkt für Text, sondern immer eine dieser vier Rollen. So ist die * Farbzuordnung an einer Stelle steuerbar und nie pro Element von Hand * vergeben (siehe DESIGN.md, „Text-Rollen"). * * Wichtig: Diese Rollen werden bewusst NICHT im [data-mode="fahr"]-Block * erneut deklariert. CSS-Variablen lösen ihre var()-Verweise erst dort auf, * wo sie tatsächlich benutzt werden — verweist eine Rolle auf * --color-accent, greift also automatisch der im Fahr-Modus geltende * Akzentwert, ohne dass die Rolle selbst dupliziert werden muss. */ --color-text-role-title: var(--color-accent); /* Seitentitel, oberste Ebene */ --color-text-role-metric: var(--color-accent); /* große Zahlen/Kennwerte */ --color-text-role-heading: var(--color-text-primary); /* Sektions-/Menü-Überschrift in Karten */ --color-text-role-subline: var(--color-text-secondary); /* Unterzeile/Hilfstext */ /* Schriftgrößen-Skala (Classic) */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.375rem; /* 22px */ --font-size-xl: 1.75rem; /* 28px */ --font-size-2xl: 2.25rem; /* 36px */ --font-size-3xl: 3rem; /* 48px — große Zahlen (Distanz, Dauer etc.) */ --touch-target: 44px; /* Apple-HIG-Minimum */ /* ------------------------------------------------------------------ */ /* 3. Karten-Tokens — dunkler Kartenstil (Default) */ /* ------------------------------------------------------------------ */ --color-map-route: var(--p-sky-blue); --color-map-waypoint-fill: var(--p-sky-blue); --color-map-waypoint-label-bg: var(--p-grey-925); --color-map-waypoint-label-text: var(--p-offwhite); /* Buchstabe (A/B/C) im Wegpunkt-Kreis. Eigener Token statt --color-accent-on: der Kreis-Hintergrund richtet sich nach dem Kartenstil (hell/dunkel), nicht nach dem UI-Modus (Classic/Fahr) — beide können unabhängig voneinander stehen (siehe DESIGN.md). */ --color-map-waypoint-letter: var(--p-black); } /* ---------------------------------------------------------------------- */ /* Fahr-Modus — überschreibt die semantischen Tokens */ /* Aktivierung: */ /* ---------------------------------------------------------------------- */ [data-mode="fahr"] { --color-bg: var(--p-warmwhite); --color-surface: var(--p-white); --color-surface-raised: var(--p-white); --color-border: var(--p-nearblack); --color-text-primary: var(--p-nearblack); --color-text-secondary: var(--p-darkgrey); --color-text-tertiary: var(--p-darkgrey); --color-accent: var(--p-deep-blue); --color-accent-pressed: var(--p-deep-blue-pressed); --color-accent-subtle: var(--p-deep-blue-subtle); --color-accent-on: var(--p-white); --color-accent-border: var(--p-nearblack); /* dunkle Umrandung, Pflicht im Fahr-Modus */ --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.18); /* Schriftgrößen-Skala (Fahr-Modus) — durchgängig größer für Ablesbarkeit bei Vibration, Distanz zum Auge und direkter Sonneneinstrahlung */ --font-size-xs: 0.875rem; /* 14px */ --font-size-sm: 1rem; /* 16px */ --font-size-base: 1.1875rem; /* 19px */ --font-size-md: 1.375rem; /* 22px */ --font-size-lg: 1.6875rem; /* 27px */ --font-size-xl: 2.125rem; /* 34px */ --font-size-2xl: 2.75rem; /* 44px */ --font-size-3xl: 3.625rem; /* 58px */ --touch-target: 64px; /* deutlich größer: Handschuhe, Vibration am Lenker */ } /* ---------------------------------------------------------------------- */ /* Heller Kartenstil — überschreibt die Karten-Tokens */ /* Aktivierung: (unabhängig von data-mode) */ /* ---------------------------------------------------------------------- */ [data-map="light"] { --color-map-route: var(--p-deep-blue); /* Kontrastgrund: helle Straßenkarte */ --color-map-waypoint-fill: var(--p-deep-blue); --color-map-waypoint-label-bg: var(--p-white); --color-map-waypoint-label-text: var(--p-nearblack); /* Weiß statt Schwarz: auf dem mittelhellen Deep-Blue-Kreis ist Weiß spürbar kontrastreicher lesbar (~4.8:1 statt ~4.4:1). */ --color-map-waypoint-letter: var(--p-white); } :root { /* ------------------------------------------------------------------ */ /* Schrift */ /* ------------------------------------------------------------------ */ /* * Space Grotesk — geometrische, serifenlose Schrift, frei verfügbar * (SIL Open Font License, über Google Fonts). Ihre leicht eckigen, * technisch anmutenden Formen tragen den Retro-Charakter der App, ohne * dekorativ zu wirken — genau die Balance aus DESIGN.md. In kräftigen * Schnitten wirkt sie bei großen Zahlen (Distanz, Dauer) markant und * gut lesbar, bleibt aber auch in kleinen Größen klar. Deckt einen * Schnittbereich von Regular bis Bold ab, den die App braucht. * Muss für Offline-Betrieb lokal eingebettet werden (siehe DESIGN.md). */ --font-family-base: "Space Grotesk", -apple-system, "SF Pro Text", system-ui, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --line-height-tight: 1.1; /* Überschriften, große Zahlen */ --line-height-normal: 1.4; /* Fließtext, Unterzeilen */ /* ------------------------------------------------------------------ */ /* Abstands-Skala (4px-Raster) */ /* ------------------------------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* ------------------------------------------------------------------ */ /* Eckenradien */ /* ------------------------------------------------------------------ */ --radius-sm: 6px; /* Chips, kleine Elemente */ --radius-md: 12px; /* Karteikarten, Buttons */ --radius-lg: 20px; /* große Karten, Sheets */ --radius-pill: 999px; /* Tab-Pille, runde Buttons */ }