/* v2-refresh-tokens.css — Tokens für den Claude-Design-Refresh * ---------------------------------------------------------------- * Basis: `app.css` aus dem Handoff-Bundle (Light-Mode + Amber-Akzent). * Ableitung: Dark-Mode + 4 weitere Akzente (purple/mint/cyan/rose) * rekonstruieren die bestehenden v2-Varianten im neuen Stil. * * Wird VOR v2-refresh.css geladen — nur :root/[data-theme]/[data-v2-accent] * Variablen, keine Element-Regeln. */ /* ===== LIGHT + AMBER (Bundle-Default) ===== */ :root { /* Surfaces */ --bg: #faf3dd; /* Cream-Beige Hauptfläche (Default — warmes Markenfeeling) */ --bg-warm: #faf3dd; /* alternierender Stripe, aktuell gleich */ --surface: #ffffff; /* Karten, Panels, Tabellen-Rows */ --surface-2: #f6f3ee; /* dezent gehobene Flächen (Table-Head, Hover) */ --border: rgba(10,11,16,0.12); --border-2: rgba(10,11,16,0.18); /* Typography colours */ --ink: #0a0b10; --ink-2: #544a5f; --mute: #877c8f; /* Accent + Brand */ --amber: #d97706; --amber-2: #ea580c; --amber-soft: #fef3e2; --purple: #251e4b; --purple-2: #2f2657; /* Status */ --success: #059669; --warning: #ca8a04; --danger: #ff5e7e; /* 4px spacing grid */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* Radii */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(.2,0,.2,1); --t-fast: 120ms; --t-mid: 180ms; --t-slow: 280ms; /* Shadow layer */ --sh-sm: 0 1px 2px rgba(10,11,16,.04), 0 1px 1px rgba(10,11,16,.03); --sh-md: 0 4px 12px rgba(10,11,16,.06), 0 2px 4px rgba(10,11,16,.04); --sh-lg: 0 16px 40px rgba(10,11,16,.08), 0 4px 12px rgba(10,11,16,.05); /* Layout */ --sb-w: 260px; --sb-w-compact: 68px; --topbar-h: 60px; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-mid: 0ms; --t-slow: 0ms; } } /* ===== DARK-MODE OVERRIDE ===== */ :root[data-theme="dark"] { --bg: #0e0b1c; /* Deep-Purple-Ink Grundfläche */ --bg-warm: #120d1f; --surface: #18132e; --surface-2: #201a3a; --border: rgba(255,255,255,0.10); --border-2: rgba(255,255,255,0.18); --ink: #e8e2f4; --ink-2: #a099b8; --mute: #6b6379; --amber-soft: rgba(217,119,6,0.18); --purple: #12102a; /* Sidebar noch dunkler, damit Kontrast bleibt */ --purple-2: #1c1840; --sh-sm: 0 1px 2px rgba(0,0,0,.32), 0 1px 1px rgba(0,0,0,.24); --sh-md: 0 4px 12px rgba(0,0,0,.42), 0 2px 4px rgba(0,0,0,.28); --sh-lg: 0 16px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35); } /* ===== ACCENT VARIANTS ===== * Regel: nur Akzent-Trio (--amber, --amber-2, --amber-soft) tauschen. * Background/Surface bleiben vom Base-Theme — einheitlicher als beim alten v2. */ /* Purple (ClassCards Classic) */ :root[data-v2-accent="purple"] { --amber: #5d4c9a; --amber-2: #7a6bb5; --amber-soft: #ede9fe; } :root[data-v2-accent="purple"][data-theme="dark"] { --amber: #9a82ff; --amber-2: #c48aff; --amber-soft: rgba(154,130,255,0.18); } /* Mint */ :root[data-v2-accent="mint"] { --amber: #059669; --amber-2: #14b8a6; --amber-soft: #d1fae5; } :root[data-v2-accent="mint"][data-theme="dark"] { --amber: #3ddc97; --amber-2: #5eead4; --amber-soft: rgba(61,220,151,0.20); } /* Cyan */ :root[data-v2-accent="cyan"] { --amber: #0891b2; --amber-2: #06b6d4; --amber-soft: #cffafe; } :root[data-v2-accent="cyan"][data-theme="dark"] { --amber: #00d4ff; --amber-2: #22d3ee; --amber-soft: rgba(0,212,255,0.20); } /* Rose */ :root[data-v2-accent="rose"] { --amber: #e11d48; --amber-2: #f43f5e; --amber-soft: #ffe4e6; } :root[data-v2-accent="rose"][data-theme="dark"] { --amber: #ff5e9c; --amber-2: #ff85a2; --amber-soft: rgba(255,94,156,0.20); } /* ===== POOL & TERRAZZO (sommerlich blau-peach) ===== * Drittes Theme aus dem v2-Claude-Design-Handoff (Classcards v2 ergaenzung). * Eigenes Set von Surface-Farben + Peach-Amber + Blue-Purple. Wird unabhängig * von der Akzent-Auswahl aktiviert (data-theme="pool") — d.h. Pool ersetzt das * gesamte Farb-System, nicht nur den Akzent. Purple Cream + Dark Mode bleiben * wie gehabt. */ :root[data-theme="pool"] { --bg: #ffffff; /* Main-Area weiß (User-Wunsch) — Pool-Blau bleibt nur in Sidebar/Akzenten */ --bg-warm: #f5fafd; /* Subtil blau-weiß für Alternierung */ --surface: #ffffff; --surface-2: #dce8f2; /* terrazzo-ish, blau statt cream */ --border: rgba(10,11,16,0.12); --border-2: rgba(10,11,16,0.18); --ink: #0a0b10; --ink-2: #445570; --mute: #7c8a9e; --amber: #ff9068; /* Peach-Akzent */ --amber-2: #ff7a4c; --amber-soft: #ffe8dc; --purple: #2563a8; /* Pool-Blau für Sidebar/Header */ --purple-2: #2f72bd; --success: #18a67a; --warning: #e08a2e; --danger: #ff5570; } /* Sommer-Effekte: der App-Hintergrund bekommt subtile Wasser-Caustics — * zwei radiale Gradients in Cyan und Peach, die fast unsichtbar durchscheinen. */ :root[data-theme="pool"] body { background-image: radial-gradient(ellipse 1200px 600px at 15% -10%, rgba(37,99,168,0.07), transparent 60%), radial-gradient(ellipse 900px 500px at 110% 15%, rgba(255,144,104,0.06), transparent 55%), radial-gradient(ellipse 1000px 500px at 50% 120%, rgba(24,166,122,0.04), transparent 60%); background-attachment: fixed; } /* Pool-Theme: Cards bekommen einen Hauch Sonnen-Highlight oben */ :root[data-theme="pool"] .card { box-shadow: 0 1px 2px rgba(37,99,168,0.04), 0 4px 12px rgba(37,99,168,0.06), inset 0 1px 0 rgba(255,255,255,0.6); } /* Pool + Akzent-Override: Akzent überschreibt den Peach-Default falls gewählt. * So kann der Nutzer auch im Pool-Theme noch zwischen den fünf Akzenten wählen. */ :root[data-theme="pool"][data-v2-accent="purple"] { --amber: #5d4c9a; --amber-2: #7a6bb5; --amber-soft: #ede9fe; } :root[data-theme="pool"][data-v2-accent="mint"] { --amber: #18a67a; --amber-2: #14b8a6; --amber-soft: #d1fae5; } :root[data-theme="pool"][data-v2-accent="cyan"] { --amber: #0891b2; --amber-2: #06b6d4; --amber-soft: #cffafe; } :root[data-theme="pool"][data-v2-accent="rose"] { --amber: #e11d48; --amber-2: #f43f5e; --amber-soft: #ffe4e6; } /* Default-Accent (amber) im Pool-Theme = Peach (siehe Haupt-Block oben) */