/* ============================================================ sharemagazines — Design Tokens ------------------------------------------------------------ Quelle: Figma-Export vom 23.08.2026 · General/Mode 1 · Light Dark Mode Colors/Dark Mode + Light Mode · Typeface/Mobile + Tablet + Desktop NICHT VON HAND ÄNDERN. Bei Token-Änderungen in Figma neu exportieren und diese Datei neu erzeugen. Namensregel (1:1 rückverfolgbar zu Figma): Colors/Blue/Blue 500 → --blue-500 Radius/md → --radius-md Padding and gaps/space/lg → --space-lg Text/text-primary → --text-primary Tags Labels/label-fill → --label-fill Buttons/primary-fill → --button-primary-fill Surface/surface-card → --surface-card Navbar/bg-fill → --nav-bg-fill size/H1 → --font-size-h1 Alias-Ketten aus Figma bleiben als var() erhalten. Wenn in Figma primary-fill auf text-accent zeigt, steht hier ebenfalls var(--text-accent) — nicht der aufgelöste Hex-Wert. ============================================================ */ /* ------------------------------------------------------------ 1. PRIMITIVE · General/Colors Mode-unabhängig. Diese Werte nie direkt im Markup benutzen — immer über ein semantisches Token weiter unten gehen. ------------------------------------------------------------ */ :root { --black: #121A2D; --white: #FCFDFD; --red-50: #FFF1F1; --red-200: #F8B0B1; --red-300: #F14B4E; --red-500: #D14244; --red-600: #B63335; --red-700: #7A252A; --red-900: #2C1116; --blue-50: #E5F2FB; --blue-100: #D4E9F7; --blue-150: #BDE0F8; --blue-200: #56B2DD; --blue-300: #1B9BD8; --blue-400: #0084BF; --blue-500: #006D9F; --blue-600: #00538B; --blue-700: #073359; --blue-800: #132747; --blue-900: #101A31; /* Entsättigte Stops (43 % statt 58–100 %) für Informationsflächen. Blau ist die Akzentfarbe — eine gesättigte blaue Fläche liest sich als Bedienelement und ähnelt dem aktiven Chip (§5). Neu 27.08.2026. */ --blue-800-muted: #1C3147; --blue-600-muted: #2D5874; --gray-50: #ECEFF1; --gray-100: #DDE3E7; --gray-200: #D4DCE0; --gray-300: #B1BCC1; --gray-400: #8EA5B1; --gray-500: #78909C; --gray-600: #546E7A; --gray-700: #50626B; --gray-800: #2E3B4C; --gray-900: #212C3E; --gray-950: #1A2433; --green-50: #E4F5DD; /* geändert 27.08.2026, war #DDFAD0 */ --green-100: #B6E79F; --green-200: #93DD71; --green-300: #58BF28; --green-400: #40951B; --green-500: #327219; --green-600: #2C5A1A; --green-700: #203D17; --green-800: #1D332C; --green-900: #001600; --pink-400: #F062A0; --yellow-400: #FFEB3B; --orange-100: #FFE8C4; --orange-500: #F59E0B; --brown-200: #BB9159; --brown-400: #8A6A3F; --brown-600: #4D361A; /* Colors/Transparent */ --transparent-white-60: rgba(250, 251, 252, 0.6); --transparent-white-80: rgba(250, 251, 252, 0.8); --transparent-gray-10: rgba(120, 144, 156, 0.1); --transparent-gray-15: rgba(120, 144, 156, 0.15); --transparent-gray-30: rgba(120, 144, 156, 0.3); --transparent-gray-40: rgba(120, 144, 156, 0.4); --transparent-gray-60: rgba(120, 144, 156, 0.6); --transparent-black-15: rgba(18, 26, 45, 0.15); --transparent-scrim-black-50: rgba(18, 26, 45, 0.5); --transparent-scrim-full-black-60: rgba(6, 11, 22, 0.6); /* Radius · General/Radius --radius-full ist bewusst 300px (Figma-Wert), nicht 9999. Bei Elementen über 600px Höhe deshalb prüfen. */ --radius-full: 300px; --radius-md: 20px; --radius-sm: 10px; /* Randbreiten · General/Outline --outline-active trägt den Aktiv-Zustand von Chips und den Fokus-Ring. Ohne die 2px ist der Aktiv-Border in Dark kaum sichtbar. */ --outline-default: 1px; --outline-active: 2px; /* Spacing · General/Padding and gaps */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 36px; --space-2xl: 48px; --layout-screen-margin: 20px; } /* ------------------------------------------------------------ 2. TYPOGRAFIE · Typeface (Modes Mobile / Tablet / Desktop) Breakpoints 768 / 1200 — Begründung in den Design Rules §0. ------------------------------------------------------------ */ :root { --font-family-inter: 'Inter', system-ui, sans-serif; --font-family-display: 'Outfit', 'Inter', system-ui, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-extrabold: 800; /* nur H1 */ /* Mobile (Basis, bis 767px) */ --font-size-h1: 29px; --font-size-h2: 23px; --font-size-h3: 19px; --font-size-large-text: 22px; --font-size-medium-text: 18px; --font-size-title-text: 14px; --font-size-small-text: 14px; --font-size-extra-small-text: 12px; } @media (min-width: 768px) { /* Tablet */ :root { --font-size-h1: 34px; --font-size-h2: 27px; --font-size-h3: 22px; --font-size-large-text: 24px; --font-size-medium-text: 18px; --font-size-title-text: 14px; /* wie Mobil (Figma) */ --font-size-small-text: 14px; --font-size-extra-small-text: 12px; } } @media (min-width: 1200px) { /* Desktop */ :root { --font-size-h1: 44px; --font-size-h2: 31px; --font-size-h3: 25px; --font-size-large-text: 26px; --font-size-medium-text: 20px; --font-size-title-text: 20px; --font-size-small-text: 16px; --font-size-extra-small-text: 12px; } } /* ------------------------------------------------------------ 3. DARK MODE (Standard) ------------------------------------------------------------ */ [data-theme="dark"] { /* Text */ --text-primary: var(--white); --text-accent: var(--blue-200); --text-opposite-background: var(--black); --text-description: var(--gray-400); /* Tags Labels */ --label-fill: var(--gray-900); --label-outline: var(--gray-800); --label-fill-active: var(--button-secondary-fill); --label-outline-active: var(--text-accent); --label-text: var(--text-primary); --label-text-active: var(--text-primary); --label-icon: var(--text-primary); --label-fill-inverted: var(--surface-primary); --green-label-text: var(--green-300); --green-label-stroke: var(--green-600); --green-label-fill: var(--green-800); --blue-label-text: var(--text-accent); --blue-label-fill: var(--blue-800-muted); --blue-label-stroke: var(--blue-600-muted); --red-label-text: var(--red-300); --red-label-stroke: var(--red-700); --warning-red-fill: var(--red-900); --searchbar: var(--gray-800); --label-glow: var(--blue-200); /* Buttons */ --button-primary-fill: var(--text-accent); --button-primary-fill-hover: var(--text-accent); --button-primary-fill-press: var(--blue-300); --button-primary-text: var(--text-opposite-background); --button-primary-outline: var(--blue-150); --button-secondary-fill: var(--blue-700); --button-secondary-fill-hover: var(--blue-700); --button-secondary-fill-press: var(--blue-800); --button-secondary-text: var(--text-primary); --button-secondary-outline: var(--blue-600); --button-secondary-outline-hover-press: var(--text-accent); --button-ghost-fill-hover: var(--gray-900); --button-ghost-outline: var(--gray-700); --button-ghost-outline-press: var(--gray-500); --button-ghost-text: var(--text-primary); --button-disabled-fill: var(--gray-900); --button-disabled-outline: var(--gray-800); --button-disabled-text: var(--gray-500); --button-icon-button-fill: var(--gray-900); --button-icon-button-outline: var(--gray-800); --button-icon-button-text: var(--text-primary); --button-icon-button-fill-hover: var(--gray-800); --button-icon-button-fill-press: var(--gray-800); --button-icon-button-outline-press: var(--gray-700); --button-glow: var(--blue-200); /* Surface */ --surface-primary: var(--black); --surface-secondary: var(--blue-700); --surface-card: var(--gray-900); --surface-hintbox: rgba(33, 44, 62, 0.85); /* Navbar */ --nav-bg-fill: var(--transparent-gray-15); --nav-bg-fill-press: var(--transparent-black-15); --nav-outline: var(--transparent-gray-30); --nav-icon: var(--text-primary); --nav-icon-active: var(--surface-primary); --nav-icon-background-active: var(--text-accent); --nav-text: var(--text-primary); --nav-text-active: var(--text-accent); --surface-blur-gradient-0: rgba(18, 26, 45, 0); } /* ------------------------------------------------------------ 4. LIGHT MODE ------------------------------------------------------------ */ [data-theme="light"] { /* Text */ --text-primary: var(--black); --text-accent: var(--blue-400); --text-opposite-background: var(--white); --text-description: var(--gray-600); /* Tags Labels */ --label-fill: var(--white); --label-outline: var(--gray-200); /* Nicht mehr an button-secondary-fill gekoppelt (28.08.2026): der Chip ist deutlich kleiner als ein Button und sein Text ist nicht bold — er braucht eine hellere Fläche. Der 2-px-Rand des aktiven Chips trägt den Zustand ohnehin. Blue 50 statt Blue 100 hebt den Textkontrast von 4,55 auf 5,00:1. Siehe SKILL.md §5. */ --label-fill-active: var(--blue-50); --label-outline-active: var(--text-accent); --label-text: var(--text-primary); --label-text-active: var(--blue-500); --label-icon: var(--text-primary); --label-fill-inverted: var(--gray-50); --green-label-text: var(--green-500); --green-label-stroke: var(--green-200); --green-label-fill: var(--green-50); --blue-label-text: var(--button-secondary-text); --blue-label-fill: var(--blue-50); --blue-label-stroke: var(--blue-150); --red-label-text: var(--red-600); --red-label-stroke: var(--red-200); --warning-red-fill: var(--red-50); --searchbar: var(--white); --label-glow: rgba(255, 255, 255, 0); /* Chip-Glow ist in Light AUS */ /* Buttons */ --button-primary-fill: var(--text-accent); --button-primary-fill-hover: var(--text-accent); --button-primary-fill-press: var(--blue-500); --button-primary-text: var(--text-opposite-background); --button-primary-outline: var(--blue-100); --button-secondary-fill: var(--blue-100); --button-secondary-fill-hover: var(--blue-100); --button-secondary-fill-press: var(--blue-150); --button-secondary-text: var(--blue-500); --button-secondary-outline: var(--blue-150); --button-secondary-outline-hover-press: var(--blue-200); --button-ghost-fill-hover: var(--gray-100); --button-ghost-outline: var(--gray-200); --button-ghost-outline-press: var(--gray-300); --button-ghost-text: var(--text-primary); --button-disabled-fill: var(--gray-200); --button-disabled-outline: var(--gray-200); --button-disabled-text: var(--gray-400); --button-icon-button-fill: var(--white); --button-icon-button-outline: var(--gray-200); --button-icon-button-text: var(--text-primary); --button-icon-button-fill-hover: var(--gray-100); --button-icon-button-fill-press: var(--gray-100); --button-icon-button-outline-press: var(--gray-300); --button-glow: var(--blue-200); /* Surface */ --surface-primary: var(--gray-50); --surface-secondary: var(--white); --surface-card: var(--white); --surface-hintbox: rgba(33, 44, 62, 0.85); /* mode-invariant */ /* Navbar */ --nav-bg-fill: var(--surface-primary); --nav-bg-fill-press: var(--gray-100); --nav-outline: var(--transparent-gray-15); --nav-icon: var(--text-primary); --nav-icon-active: var(--text-accent); --nav-icon-background-active: var(--blue-100); --nav-text: var(--text-primary); --nav-text-active: var(--text-accent); --surface-blur-gradient-0: rgba(236, 239, 241, 0); } /* ============================================================ 5. NICHT IN FIGMA TOKENISIERT ------------------------------------------------------------ Die folgenden Werte stammen aus den Design Rules, nicht aus dem Token-Export. Sie stehen hier, damit Prototypen sie nicht erfinden müssen — sind aber KEINE Design-System-Wahrheit. Sobald sie in Figma Variablen werden, wandern sie nach oben. ============================================================ */ :root { /* Zeilenhöhen — Design Rules §1, als Faktor. Aus der Figma-Collection `Typeface` (Modes Mobile/Tablet/ Desktop, Export 02.09.2026). Figma hält px, hier steht der Faktor: px gilt nur für eine Schriftgröße, der Faktor gilt breakpoint-übergreifend — mit einer Ausnahme, title text, siehe unten. */ --line-height-h1: 1.1; /* 29 → 31,9 */ --line-height-h2: 1.1; /* 23 → 25,3 */ --line-height-h3: 1.2; /* 19 → 22,8 */ --line-height-large-text: 1.1; /* 22 → 24,2 */ --line-height-medium-text: 1.2; /* 18 → 21,6 */ --line-height-small-text: 1.5; /* 14 → 21 */ --line-height-extra-small-text: 1.5; /* 12 → 18 */ /* --line-height-nav entfällt: der Bottom-Nav-Textstil ist am 28.08.2026 aus Figma entfernt worden (SKILL.md §7). */ /* title text — DIE EINZIGE AUSNAHME: der Faktor wechselt mit dem Breakpoint. Mobil und Tablet 150 % (14 → 21), Desktop 120 % (20 → 24). Grund: auf Desktop IST title text medium text — gleiche Größe (20), gleiche Zeilenhöhe (24), also derselbe Stil. Entschieden 02.09.2026, aus dem Typeface- Export. Der Desktop-Wert steht direkt darunter. */ --line-height-title-text: 1.5; /* 14 → 21 */ } @media (min-width: 1200px) { /* Desktop */ :root { /* title text fällt hier mit medium text zusammen: 20 → 24. */ --line-height-title-text: 1.2; /* 20 → 24 */ } } :root { /* Touch-Target — Design Rules §11.2. 44px ist die harte Untergrenze (WCAG 2.5.5 AAA, Apple HIG), 48px der Zielwert für Hauptaktionen. Unsichtbares Padding erlaubt, zählt NIE als Layoutabstand. */ --touch-target-min: 44px; --touch-target-target: 48px; /* Letter-Spacing — aus den Figma-Textstilen, nicht aus dem Variablen-Export (der enthält nur Größe, Gewicht, Familie). Nur „small text bold" hat 1 %; medium und large haben 0. OFFEN: gilt die 1 % auch für „small text" in Regular? Wird deshalb NICHT global auf .small-text angewendet. */ --letter-spacing-small-text-bold: 0.01em; /* Fokus (Tastatur) — Entscheidung 23.08.2026, in Figma am 24.08.2026 an allen Button-Familien, Icon-Buttons und Links umgesetzt und dort gegengeprüft. Neutraler Ring statt Akzent: Blau ist mit „aktiv" belegt und wäre am aktiven Chip nicht vom Aktiv-Border zu unterscheiden. text-primary dreht mit dem Mode — Weiß in Dark, Schwarz in Light — und braucht deshalb kein eigenes Token. Der Abstand misst ab sichtbarer Außenkante: Figma setzt den Ring beim Primary auf -4 und beim Ghost auf -5, weil dort der 1px-Border dazukommt. outline-offset misst genauso. */ /* Bedienelemente über Inhalt — Design Rules §18. Für Komponenten, die auf Bildern liegen (Bedienhilfe, Favoriten-Stern auf Covern). Mode-Regeln gelten dort nicht: ein Cover ist hell oder dunkel, unabhängig vom Theme. Der Fill ist ein echtes Token. Blur und Icon-Saum sind Figma-Effekte ohne Variable — Werte am 25.08.2026 aus der Komponente übernommen. */ --overlay-blur: 4px; --overlay-icon-shadow: 0 0 2px 1px rgba(18, 26, 45, 0.8); /* Der Figma-Stil „card blur" — Verlauf plus Hintergrund-Blur. Den Verlauf tragen --surface-blur-gradient-0 und --surface-card; der Blur selbst ist ein Figma-Effekt ohne Variable, wie --overlay-blur darüber. Am Wurzelrahmen der Bottom Nav (11136:1400) ausgelesen am 09.09.2026: 10. Benutzt in components/nav.css. */ --card-blur: 10px; /* Motion: seit 28.08.2026 spezifiziert — in components/motion.css, nicht hier. Diese Datei ist ein Abbild des Figma-Exports; Motion existiert in Figma NICHT als Variablen, deshalb ist motion.css dafür die führende Quelle (SKILL.md §23, §17). Der frühere Satz „solange nichts vorliegt, bauen Prototypen statisch" ist damit überholt. */ } /* ------------------------------------------------------------ 6. ABGELEITETE TOKENS ------------------------------------------------------------ Diese Tokens verweisen auf Mode-abhängige Werte und müssen deshalb auf DEMSELBEN Element deklariert werden wie diese — also auf [data-theme], nicht auf :root. Grund: CSS löst var() innerhalb einer Custom Property auf dem Element auf, wo sie deklariert ist. Stünde --glow-hover auf :root (), wäre --button-glow dort unbekannt, die Deklaration würde ungültig, und box-shadow fiele ersatzlos weg — ohne Fehlermeldung. ------------------------------------------------------------ */ [data-theme] { /* Glow · Schlagschatten X0/Y0 — Design Rules §4/§5. Glow ist NIE alleiniges Zustands-Signal (WCAG 1.4.1). Die Radien sind seit 02.09.2026 Figma-Variablen: Glow-Blur/s | m | l in der Collection `General`. */ --glow-blur-s: 4px; --glow-blur-m: 10px; --glow-blur-l: 25px; --glow-chip: 0 0 var(--glow-blur-s) var(--label-glow); --glow-hover: 0 0 var(--glow-blur-m) var(--button-glow); --glow-press: 0 0 var(--glow-blur-l) var(--button-glow); /* Fokus-Ring — Design Rules §14. text-primary dreht mit dem Mode: weiß in Dark, schwarz in Light. Deshalb gehört auch der Ring hierher. */ --focus-ring-color: var(--text-primary); --focus-ring-width: var(--outline-active); --focus-ring-offset: var(--space-2xs); /* Bedienelemente über Inhalt — Design Rules §18 */ --overlay-nav-fill: var(--transparent-gray-15); --overlay-action-fill: var(--surface-hintbox); }