/* ═══════════════════════════════════════════════════════════════════════════ alike Design System · TOKENS Single source of truth — Apple "Liquid Glass" Sprache (iOS/macOS 26). Light + Dark. Default = dark. Umschalten via . Aufbau: 1) System-Farben (Apple, je Modus eigene Variante) 2) Label-/Text-Stufen 3) Flächen & Glas-Material (chrome, card, popover, specular, schatten) 4) Komponenten-Tokens (selection, segmented, status-pills) 5) Radien · Spacing (8pt-Raster) · Typo-Skala (SF) · Motion (Springs) Glas-Regel: Glas nur fürs CHROME & CONTROLS (sidebar, toolbar, buttons, segmented, sheets, popover). INHALT bleibt opak & lesbar (Apples Deference). Liquid Glass liest nur gegen dunkel/farbe — daher der dezente Farb-Glow im bg. ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { color-scheme: dark; /* 1 · System-Farben (Apple dark-Varianten) */ --blue:#0a84ff; --green:#30d158; --orange:#ff9f0a; --red:#ff453a; --yellow:#ffd60a; --purple:#bf5af2; --pink:#ff375f; --indigo:#5e5ce6; --teal:#40cbe0; /* 2 · Text / Label-Stufen */ --label:#f2f2f7; --label-secondary:rgba(235,235,245,.62); --label-tertiary:rgba(235,235,245,.38); --label-quaternary:rgba(235,235,245,.20); --on-accent:#ffffff; /* 3 · Flächen & Glas-Material */ --bg:#0c0c0f; /* near-black graphite (Apple), neutral */ --bg-glow-1:rgba(132,136,156,.15); /* neutral-grauer schimmer (glas-brechung) */ --bg-glow-2:rgba(120,108,132,.11); /* hauch warm-neutral */ --bg-glow-3:rgba(96,118,124,.08); /* minimaler kühler akzent */ --hairline:rgba(255,255,255,.10); --hairline-soft:rgba(255,255,255,.06); --fill:rgba(255,255,255,.07); /* recessed control track / chips */ --fill-strong:rgba(255,255,255,.12); --glass-chrome:rgba(30,30,38,.42); /* sidebar, toolbar — deutlich GLAS, frostig */ --glass-card:rgba(50,50,60,.55); /* inhalts-karten — glasig, lesbar */ --glass-popover:rgba(46,46,56,.6); /* menüs — glasig */ --glass-modal:rgba(44,44,54,.86); /* modals/sheets/dialoge — crisp, definiert */ --glass-blur:saturate(200%) blur(36px); --glass-blur-card:saturate(210%) blur(32px); /* Specular: heller glas-saum oben + dünne innere lichtkante = Liquid-Glass-look */ --specular:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(255,255,255,.08); --specular-strong:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 .5px rgba(255,255,255,.18); --shadow-card:0 12px 34px -16px rgba(0,0,0,.78),0 2px 8px -4px rgba(0,0,0,.5); --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05); --shadow-pop:0 18px 50px -12px rgba(0,0,0,.7),0 4px 12px -6px rgba(0,0,0,.5); --shadow-float:0 10px 22px -8px rgba(0,0,0,.65); /* 4 · Komponenten-Tokens */ /* Auswahl (sidebar): frosted glas-kapsel */ --selection-bg:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.07)); --selection-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 .5px rgba(255,255,255,.10),0 4px 12px -5px rgba(0,0,0,.5); --selection-fg:#ffffff; /* Segmented control: vertiefte spur + schwebendes glas-pill */ --seg-track:rgba(255,255,255,.05); --seg-track-inset:inset 0 1px 2px rgba(0,0,0,.45),inset 0 0 0 .5px rgba(255,255,255,.05); --seg-pill:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.11)); --seg-pill-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 .5px rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.45),0 8px 18px -6px rgba(0,0,0,.6); --seg-fg:#ffffff; --seg-fg-off:var(--label-secondary); /* Status-pills (getönt) */ --status-todo-bg:rgba(10,132,255,.22); --status-todo-fg:#6cb6ff; --status-progress-bg:rgba(191,90,242,.20); --status-progress-fg:#d9a6ff; --status-done-bg:rgba(48,209,88,.20); --status-done-fg:#5be584; --status-backlog-bg:rgba(255,255,255,.10); --status-backlog-fg:var(--label-secondary); --status-review-bg:rgba(255,159,10,.20); --status-review-fg:#ffc24d; --due-overdue:#ff6961; --row-hover:rgba(255,255,255,.04); /* ── Legacy-Bridge (dark) ────────────────────────────────────────────────── Mapped die alten token-namen der noch-nicht-voll-redesignten seiten auf DS-werte, damit sie auf base_ds korrekt + im richtigen modus rendern. INHALTS-flächen bleiben hier bewusst opak (HIG: content ist deferent). */ --surface:#16161c; --surface-2:#1e1e25; --surface-3:#26262e; --surface-hover:rgba(255,255,255,.045); --text:var(--label); --text-2:var(--label-secondary); --text-3:var(--label-tertiary); --text-muted:var(--label-tertiary); --border:var(--hairline); --border-dark:rgba(255,255,255,.14); --accent:var(--blue); --accent-light:rgba(10,132,255,.18); --danger:var(--red); --success:var(--green); --warning:var(--orange); } [data-theme="light"] { color-scheme: light; /* 1 · System-Farben (Apple light-Varianten) */ --blue:#007aff; --green:#34c759; --orange:#ff9500; --red:#ff3b30; --yellow:#ffcc00; --purple:#af52de; --pink:#ff2d55; --indigo:#5856d6; --teal:#30b0c7; /* 2 · Text / Label-Stufen */ --label:#1d1d1f; --label-secondary:#86868b; --label-tertiary:#b0b0b5; --label-quaternary:#c7c7cc; --on-accent:#ffffff; /* 3 · Flächen & Glas-Material — präsente, elegante farbfläche, damit glas liest */ --bg:#e9ebef; /* sauberes hellgrau (Apple), neutral statt blau */ --bg-glow-1:rgba(150,156,172,.24); /* neutral-grauer schimmer (glas-brechung) */ --bg-glow-2:rgba(170,152,178,.15); /* hauch warm-neutral */ --bg-glow-3:rgba(140,168,168,.12); /* minimaler kühler akzent */ --hairline:rgba(60,60,67,.12); --hairline-soft:rgba(60,60,67,.08); --fill:rgba(118,118,128,.12); --fill-strong:rgba(118,118,128,.18); /* Light-glas DECKENDER als dark — sonst wäscht weiss-auf-hell aus (Apple-vibrancy) */ --glass-chrome:rgba(255,255,255,.62); --glass-card:rgba(255,255,255,.74); --glass-popover:rgba(252,252,253,.86); --glass-modal:rgba(255,255,255,.94); /* crisp weiss sheet (light) */ --specular:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 .5px rgba(255,255,255,.5); --specular-strong:inset 0 1px 0 #fff; --shadow-card:0 1px 2px rgba(30,40,80,.06),0 16px 36px -14px rgba(30,40,80,.26); --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.05); --shadow-pop:0 14px 40px -10px rgba(30,40,80,.22); --shadow-float:0 5px 12px -5px rgba(30,40,80,.22); /* 4 · Komponenten-Tokens */ --selection-bg:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.66)); --selection-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.08),0 5px 12px -5px rgba(30,40,80,.18); --selection-fg:#0066d6; --seg-track:rgba(118,118,128,.14); --seg-track-inset:inset 0 1px 2px rgba(0,0,0,.07),inset 0 0 0 .5px rgba(255,255,255,.4); --seg-pill:linear-gradient(180deg,rgba(255,255,255,1),rgba(255,255,255,.78)); --seg-pill-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.12),0 5px 12px -5px rgba(30,40,80,.22); --seg-fg:#1d1d1f; --seg-fg-off:#6e6e73; --status-todo-bg:rgba(0,122,255,.13); --status-todo-fg:#0066d6; --status-progress-bg:rgba(175,82,222,.14);--status-progress-fg:#9430c9; --status-done-bg:rgba(52,199,89,.16); --status-done-fg:#1f8a3b; --status-backlog-bg:rgba(118,118,128,.16);--status-backlog-fg:#6e6e73; --status-review-bg:rgba(255,149,0,.16); --status-review-fg:#b3690a; --due-overdue:#ff3b30; --row-hover:rgba(0,0,0,.03); /* ── Legacy-Bridge (light) ── */ --surface:#ffffff; --surface-2:#f4f6fb; --surface-3:#eaedf4; --surface-hover:rgba(0,0,0,.03); --text:var(--label); --text-2:var(--label-secondary); --text-3:var(--label-tertiary); --text-muted:var(--label-tertiary); --border:var(--hairline); --border-dark:rgba(60,60,67,.18); --accent:var(--blue); --accent-light:rgba(0,122,255,.12); --danger:var(--red); --success:var(--green); --warning:var(--orange); } /* ── Modus-unabhängig ──────────────────────────────────────────────────── */ :root { /* 5a · Radien */ --radius-xs:6px; --radius-sm:8px; --radius-md:11px; --radius-lg:16px; --radius-xl:22px; --radius-pill:980px; /* 5b · Spacing (8pt-raster, plus 2/4/6 für dichte controls) */ --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px; --sp-6:12px; --sp-7:14px; --sp-8:16px; --sp-9:18px; --sp-10:20px; --sp-12:24px; --sp-14:28px; --sp-16:32px; --sp-20:40px; --sp-24:48px; /* 5c · Typo — SF Pro via system-stack (echtes SF auf Apple-geräten) */ --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",sans-serif; --font-mono:"SF Mono",ui-monospace,"Geist Mono",monospace; /* size / weight / line-height / tracking — an HIG-textstilen orientiert */ --fs-large-title:34px; --fw-large-title:700; --lh-large-title:1.06; --tr-large-title:-.4px; --fs-title-1:28px; --fw-title-1:700; --tr-title-1:-.3px; --fs-title-2:22px; --fw-title-2:600; --tr-title-2:-.3px; --fs-title-3:20px; --fw-title-3:600; --tr-title-3:-.2px; --fs-headline:17px; --fw-headline:600; --tr-headline:-.3px; --fs-body:15px; --fw-body:400; --fs-callout:14px; --fw-callout:400; --fs-subhead:13px; --fw-subhead:400; --fs-footnote:12px; --fw-footnote:400; --fs-caption:11px; --fw-caption:400; /* 5d · Motion — Apple-spring-physik */ --spring:cubic-bezier(.34,1.45,.5,1); /* federnd, leichter overshoot (pill, popover) */ --spring-soft:cubic-bezier(.34,1.25,.6,1); /* sanfter overshoot (selection slide) */ --smooth:cubic-bezier(.32,.72,0,1); /* deceleration (fade, color) */ --dur-fast:.18s; --dur:.3s; --dur-slow:.45s; --dur-slower:.6s; --z-toolbar:20; --z-popover:50; --z-sheet:100; --z-toast:120; /* Legacy-bridge (modus-unabhängig) */ --radius:var(--radius-md); --transition:var(--dur-fast); --accent-rgb:10,132,255; } /* Barrierefreiheit: Bewegung reduzieren (wie Apple) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }