/** * ARTISTFOLIO — UNIFIED DESIGN TOKENS ("Editorial Gallery OS") * =========================================================== * EINE geteilte Token-Schicht für alle drei Flächen (Admin · Frontend · Landing). * Spec: .claude/knowledge/DESIGN_IDENTITY.md (Jan-Freigabe 2026-06-15). * * Apple-Disziplin × Kunstinstitutions-Editorial: * EIN Akzent (Ultramarin #2D4A8B) · EINE Schrift (Inter, rein Sans) · EIN Raster (8pt). * "Das Werk ist die einzige Farbe." — UI neutral, Akzent < 10 % der Fläche. * * P0-STATUS (DESIGN-ID-001): Diese Datei DEFINIERT die kanonischen `--af-*`-Tokens * und wird auf jeder Fläche geladen — aber NOCH NICHT konsumiert. Kein bestehender * Selektor liest `--af-*`, daher ist die Einbindung VERHALTENSNEUTRAL (0 visuelle * Änderung, beweisbar). Die Aliasierung der Flächen-Variablen auf diese Tokens * ("dann angleichen") erfolgt in den gegateten Folge-Blöcken P1–P5. * * @package ArtistFolio * @contract DESIGN_IDENTITY_SSOT */ :root { /* ── Schrift — eine Familie, 4 Gewichte ───────────────────────────── */ --af-sans: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif; /* JAN 2026-06-15: REIN SANS, KEIN Serif — MoMA/Whitney-Klarheit. Drama aus Größe+Gewicht, nie aus Schriftmischung. */ --af-display: var(--af-sans); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Farbe — Tinte auf Papier + EIN Akzent (Ultramarin) ───────────── */ --af-ink: #141414; --af-ink-muted: #6B6B6B; --af-ink-faint: #9A9A9A; --af-paper: #FBFBF9; --af-surface: #FFFFFF; --af-hairline: #E4E4E4; --af-accent: #2D4A8B; /* Ultramarin (von der Landing) */ --af-accent-hover: #233A6E; /* dunkleres Ultramarin — Hover/Pressed */ --af-accent-tint: #EDF1FA; /* sehr helles Ultramarin — Auswahl/aktive Fläche */ --af-accent-ink: #FFFFFF; /* Text AUF Akzent-Fläche (Light: weiß auf #2D4A8B = 8.5:1). Künstler-Frontend default = --af-ink (monochrom) */ --af-success: #2E7D55; --af-danger: #B23A2E; --af-warning: #9A6A12; /* gedeckt, kein SaaS-Neon */ /* ── Raster / Raum (8pt-Skala, 4 als Halbschritt) ─────────────────── */ --af-s1: 4px; --af-s2: 8px; --af-s3: 12px; --af-s4: 16px; --af-s5: 24px; --af-s6: 32px; --af-s7: 48px; --af-s8: 64px; --af-s9: 96px; /* ── Radius (eine Skala — Konzentrizität anwenden) ────────────────── */ /* Editorial-Default Landing/Frontend: 0–4px (scharf = Galerie). Admin: 10–14px. */ --af-r-xs: 6px; --af-r-sm: 10px; --af-r-md: 14px; --af-r-lg: 20px; --af-r-pill: 9999px; /* ── Linien / Tiefe (subtil, mehrlagig, ≤0.12 alpha) ──────────────── */ --af-rule: 1px solid var(--af-hairline); --af-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .06); --af-shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04); /* ── Motion (DES-EXC-MOTION) ────────────────────────────────────────── Eine kohärente Familie unter der ≤240ms-Doktrin (Editorial = ruhige Crossfades, kein Bounce). Die Flächen-Agenten migrieren ihre rohen transition:-Literale auf diese Tokens (hier NUR Definition). `prefers- reduced-motion` wird je Fläche respektiert (00-base.css / landing.css). Doktrin-Namen (-base/-standard) als Alias der vorhandenen Werte, damit bestehende Konsumenten (--af-dur/--af-ease) NICHT brechen — verhaltens- neutral. --af-dur-slow:360ms ist die EINZIGE Ausnahme oberhalb 240ms und bewusst Chrome-/Overlay-Sonderfällen vorbehalten, nie Standard-Hover. */ --af-dur-fast: 160ms; /* schnelle Hover/Fokus-Reaktion */ --af-dur: 240ms; /* Standard-Übergang (Doktrin-Decke) */ --af-dur-base: var(--af-dur); /* Doktrin-Alias = --af-dur (Standard) */ --af-dur-slow: 360ms; /* nur Chrome/Overlay, NICHT Standard */ --af-dur-reveal: 600ms; /* EINZIGE bewusste Ausnahme >360ms: die langsame editoriale Werk-Bild-Enthüllung (.work img opacity). Vom 240ms-Crossfade-Cap ausgenommen — vertraglich gesichert in design_p5_motion.spec.ts (Werk-Fade=0.6s). */ --af-ease: cubic-bezier(.2, 0, 0, 1); --af-ease-standard: var(--af-ease); /* Doktrin-Alias = --af-ease */ --af-ease-emph: cubic-bezier(.32, .72, 0, 1); /* ── Typo-Skala (DES-EXC-TYPOSCALE) ─────────────────────────────────── Modulare Skala, Ratio 1.25 (Major Third), Basis 1rem (16px). EINE Quelle für Größensprünge — die Flächen-Agenten mappen ihre rohen font-sizes hierauf (hier NUR Definition, kein Konsum → verhaltensneutral). rem-basiert für Nutzer-Zoom; Display darf je Fläche zusätzlich fluide clampen. */ --af-step--2: 0.64rem; /* ~10.24px — Mikro-Label/Fineprint */ --af-step--1: 0.8rem; /* ~12.8px — Metadaten/Caption */ --af-step-0: 1rem; /* 16px — Fließtext-Basis */ --af-step-1: 1.25rem; /* 20px */ --af-step-2: 1.5625rem; /* ~25px */ --af-step-3: 1.953rem; /* ~31.25px */ --af-step-4: 2.441rem; /* ~39px */ --af-step-5: 3.052rem; /* ~48.8px — Display/Werk-Titel */ /* Hybrid-Adoption (Jan-Entscheid 2026-06-26, DESIGN-EXC-TYPOSCALE): „Überschriften auf Skala, Kleintext fluid lassen." Die diskreten Modul- Stufen oben (step-1..5, Ratio 1.25) tragen die ÜBERSCHRIFTEN. KLEINTEXT (Metadaten/Caption/Fineprint, ~11–13px) bleibt FLUID — die 1.25-Skala hat dort keine saubere Stufe (genau die sichtbare Mapping-Lücke bei 11/14px), fluides clamp() skaliert weich mit der Viewport statt auf eine Zufalls- stufe zu schnappen. Definition (verhaltensneutral, kein Konsum) — die Flächen mappen ihren Kleintext hierauf statt auf gestreute px-Literale. */ --af-step-fluid-sm: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem); /* ~12→13px Caption/Metadaten */ --af-step-fluid-xs: clamp(0.6875rem, 0.66rem + 0.13vw, 0.75rem); /* ~11→12px Mikro-Label/Fineprint */ /* ── Tracking (Versal-Label-Skala, DES-TYPO-TRACKING) ───────────────── VERHALTENSNEUTRAL: Werte == die vorhandenen letter-spacing-Literale, die sie ersetzen (0 Render-Änderung, vrqa byte-identisch). Gibt der bisher gestreuten Buchstaben-Sperrung EINE Quelle — globale Feinjustierung über diese Tokens statt Hunderter Einzelwerte. Seltene Einmal-Werte (Overlay- Sonderköpfe, px-Mikrotracking) bleiben bewusst literal. */ --af-track-display: -0.02em; /* Display eng (Werk-Titel groß) */ --af-track-tight: -0.01em; /* leicht negativ */ --af-track-xs: 0.02em; /* subtile Sperrung */ --af-track-sm: 0.03em; --af-track-snug: 0.04em; --af-track-md: 0.05em; /* Metadaten/Klein-Labels */ --af-track-wide: 0.06em; --af-track-caps: 0.08em; /* Standard-Versal-Label */ --af-track-caps-lg: 0.1em; /* weite Versal-Köpfe */ } /* OS-Dark (Künstler-Frontend folgt prefers-color-scheme). Mit :not([data-theme="light"]) gegen den Admin gesperrt: der Admin setzt data-theme IMMER explizit (server-seitig, index.php) — ein manuell auf hell gestellter Admin auf einem Dark-OS bleibt so hell. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --af-ink: #F5F5F4; --af-ink-muted: rgba(245, 245, 244, .62); --af-ink-faint: rgba(245, 245, 244, .34); --af-paper: #0F0F0E; --af-surface: #1A1A19; --af-hairline: rgba(245, 245, 244, .14); --af-accent: #6E8FD6; /* Ultramarin heller für Dark — optimiert als Text/Border auf dunkler Fläche (5.4:1) */ --af-accent-hover: #8AA6E0; --af-accent-tint: rgba(110, 143, 214, .16); /* Dark: der helle Akzent trägt KEIN weißes Text (nur 3.2:1). Filled-Controls setzen daher dunkle Tinte AUF den Akzent (#0F1830 auf #6E8FD6 = 5.5:1). */ --af-accent-ink: #0F1830; /* DES-P2-STATUSTOK: dark-gedeckte Status-Töne. Die hellen gedeckt-Werte (#2E7D55/#9A6A12) wären auf dunkler Fläche zu dunkel — ein naiver Alias bräche den Dark-Kontrast. Aufgehellte, weiter gedeckte (kein SaaS-Neon) Hue-Familie: als Icon/Text auf --af-surface success 6.7:1 · warning 7.5:1. */ --af-success: #59B187; --af-warning: #D2A24E; } } /* Manueller Dark-Toggle (Admin nutzt [data-theme="dark"], OS-unabhängig). Hält die --af-*-Akzente konsistent zum manuell gewählten Theme, egal was das OS bevorzugt. */ [data-theme="dark"] { --af-accent: #6E8FD6; --af-accent-hover: #8AA6E0; --af-accent-tint: rgba(110, 143, 214, .16); --af-accent-ink: #0F1830; /* dunkle Tinte auf hellem Dark-Akzent (5.5:1, statt weiß 3.2:1) */ /* DES-P2-STATUSTOK: dark-gedeckte Status-Töne (s.o.) auch im manuellen Toggle. */ --af-success: #59B187; --af-warning: #D2A24E; } /* DES-TYPO-OPSZ: Optische Achse der Variable-Schrift (InterVariable, opsz 14–32) explizit aktivieren. `auto` ist zwar CSS-Default, wird hier aber dokumentiert gesetzt, damit die opsz-Achse aus der font-size abgeleitet wird (Display eng-optisch, Body lesbar-optisch). Verhaltensneutral für nicht-variable Fonts. */ html { font-optical-sizing: auto; }