/* Premium Tattoocare — Tokens Alle Werte aus Tattoocare_Catalogue_EN.pdf gemessen (A4 hoch, 595.92 × 842.88 pt). Größen und Abstände in pt — das System ist ein Print-System. Für Screen: --tc-scale hochsetzen (siehe unten), nie einzelne Werte überschreiben. */ :root { /* ---- Farbe: Kern ---- */ --tc-black: #0D0D0D; /* Hintergrund dunkle Seiten — 2026-09-07 von #0A0B0B auf den Startseiten-Wert retargetet, siehe "Farbe: Dunkel-Abstufungen" */ --tc-black-ink: #151411; /* Headline auf hellem Grund */ --tc-black-text: #030404; /* Fließtext / Labels auf hellem Grund */ --tc-bone: #F3F3EC; /* Hintergrund helle Seiten */ --tc-white: #FFFFFF; /* Text auf dunklem Grund, maximaler Kontrast — reiner Wert, reserviert für Datenwerte. Für Fließtext/Wortmarke auf dunklem Grund stattdessen --tc-bone-100 */ --tc-gold: #CAA84A; /* Markenfarbe: Display, Akzentkursive, Taglines */ /* ---- Farbe: Dunkel-Abstufungen ---- Drei Tiefenstufen für Fläche auf dunklen Screens, aus der Startseite übernommen (dort --jet-black/--black/--charcoal). Kein Print-Äquivalent, weil der Katalog nur einen dunklen Grund kennt — das Digitale braucht Schichtung, das Gedruckte nicht. */ --tc-black-void: #000000; /* tiefstes Schwarz — Vollbild-Overlays, Preloader */ --tc-black-elevated: #1A1A1A; /* erhöhte Fläche auf dunklem Grund — Panels, Karten */ /* ---- Farbe: Abstufungen ---- */ --tc-bone-100: #F2F0EB; /* Text auf dunklem Grund, primäre Farbe (Startseite, Wortmarke) — bewusst kein reines Weiß, siehe --tc-white */ --tc-bone-300: #DCD8CE; /* große Headlines auf dunklem Grund */ --tc-bone-500: #C8C4BB; /* Fließtext / sekundär auf dunklem Grund */ --tc-gold-300: #E0C879; /* Highlight-Variante Gold */ --tc-gold-600: #BA9D52; /* kleine Meta-Labels in Gold (6 pt) */ --tc-grey-500: #8A857B; /* Tabellen-Zeilenlabels auf hellem Grund */ --tc-grey-700: #3A3933; /* Tabellen-Werte auf hellem Grund */ /* ---- Farbe: Button-Zustände ---- Deaktivierte Buttons bleiben eine gefüllte Fläche, nie ein Rahmen — siehe "Button" unter Formularelemente in AGENTS.md. */ --tc-gold-disabled: #3A3529; /* Fläche, deaktivierter .tcu-btn--primary */ --tc-gold-disabled-text: #8A857B; /* Text/Icon auf --tc-gold-disabled */ /* ---- Schriftfamilien ---- */ --tc-font-display: "PP Monument", "Helvetica Neue", Arial, sans-serif; --tc-font-accent: "PP Editorial Old", Georgia, "Times New Roman", serif; --tc-font-mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Maßstab ---- 1 = Originalgröße im Katalog. Für Bildschirmansicht z. B. 1.6 setzen. Alle Größen- und Abstands-Tokens hängen daran. */ --tc-scale: 1; --tc-pt: calc(1pt * var(--tc-scale)); /* ---- Schriftgrößen ---- */ --tc-size-display-xl: calc(106.5 * var(--tc-pt)); --tc-size-display-lg: calc(100 * var(--tc-pt)); --tc-size-display-md: calc(42 * var(--tc-pt)); --tc-size-headline: calc(40 * var(--tc-pt)); --tc-size-title-lg: calc(30 * var(--tc-pt)); --tc-size-title-md: calc(20 * var(--tc-pt)); --tc-size-title-sm: calc(15 * var(--tc-pt)); --tc-size-title-xs: calc(13 * var(--tc-pt)); --tc-size-lead: calc(11 * var(--tc-pt)); --tc-size-body: calc(8 * var(--tc-pt)); --tc-size-body-sm: calc(7 * var(--tc-pt)); /* Hinweise, Hilfetexte, Bildunterschriften */ --tc-size-label: calc(7 * var(--tc-pt)); --tc-size-label-gold: calc(6 * var(--tc-pt)); --tc-size-label-xs: calc(5.6 * var(--tc-pt)); --tc-size-label-2xs: calc(5 * var(--tc-pt)); /* ---- Zeilenhöhen (Verhältnis zur Schriftgröße) ---- */ --tc-lh-flat: 1; --tc-lh-snug: 1.2; --tc-lh-body: 1.625; /* ---- Laufweite ---- Gemessen leicht negativ. Der gesperrte Eindruck der Labels entsteht durch Versalien und kleine Grade, nicht durch Tracking. Niemals über 0 gehen. */ --tc-track-tight: -0.015em; --tc-track-micro: -0.029em; --tc-track-nano: -0.05em; /* ---- Raster: Basis 4 pt ---- */ --tc-sp-1: calc(4 * var(--tc-pt)); --tc-sp-2: calc(8 * var(--tc-pt)); --tc-sp-3: calc(12 * var(--tc-pt)); --tc-sp-4: calc(16 * var(--tc-pt)); --tc-sp-6: calc(24 * var(--tc-pt)); --tc-sp-8: calc(32 * var(--tc-pt)); --tc-sp-9: calc(36 * var(--tc-pt)); /* Seitenrand */ --tc-sp-12: calc(48 * var(--tc-pt)); --tc-sp-16: calc(64 * var(--tc-pt)); --tc-sp-24: calc(96 * var(--tc-pt)); /* ---- Seitenaufbau A4 hoch ---- */ --tc-page-w: calc(595.92 * var(--tc-pt)); --tc-page-h: calc(842.88 * var(--tc-pt)); --tc-page-margin: var(--tc-sp-9); /* 36 pt, alle Seiten */ --tc-page-inner: calc(523.92 * var(--tc-pt)); /* Satzspiegel-Breite */ --tc-measure: calc(340 * var(--tc-pt)); /* max. Textspaltenbreite */ --tc-gap-eyebrow: calc(15.5 * var(--tc-pt)); /* Sektionsmarke → Headline */ --tc-gap-headline: calc(42 * var(--tc-pt)); /* Headline → Fließtext (40–43) */ --tc-bleed: 3mm; /* ---- Linien ---- */ --tc-rule: 1px solid rgba(0, 0, 0, 0.12); /* nur horizontal, nie vertikal */ /* ---- Gold-Glow: nur auf dunklem Grund ---- Im Druck immer als gerastertes Hintergrundbild platzieren, nicht als Vektorverlauf — sonst Magenta-/Pink-Artefakte im PDF-Export. */ --tc-glow: radial-gradient(ellipse at 50% 60%, rgba(202, 168, 74, 0.28) 0%, rgba(202, 168, 74, 0) 62%); }