/* tokens.css — TillyGen Design-Tokens (1:1 aus styles/tokens.css der App portiert) * Dark ist Default (:root). Light per oder data-theme="light". * Regeln aus dem CD: * - Primary = Emerald #10b981. Nova-Purple / Terra-Teal sind AI-Provider- * Identität, NIE als Primary verwenden. * - Drei Surfaces: --background / --card / --popover. Keine vierte. */ :root, :root[data-theme="dark"], .dark { /* Surfaces */ --background: #0a0a0b; --card: #111113; --popover: #1a1a1a; --muted: rgba(255, 255, 255, 0.04); --accent: rgba(255, 255, 255, 0.06); --overlay: rgba(0, 0, 0, 0.72); /* Borders (opak + neutral, R=G=B) */ --border: #2a2a2a; --border-strong: #3a3a3a; --input: #333333; /* Foreground-Stufen */ --foreground: #fafafa; --muted-foreground: #bfbfbf; --subtle-foreground: #9e9e9e; --disabled: rgba(255, 255, 255, 0.2); /* Icons */ --icon: #bfbfbf; --icon-strong: #ffffff; --icon-subtle: #9e9e9e; /* Brand: Emerald */ --primary: #10b981; --primary-hover: #34d399; --primary-pressed: #059669; --primary-foreground: #022c22; --primary-soft: rgba(16, 185, 129, 0.12); --primary-soft-strong: rgba(16, 185, 129, 0.2); --ring: rgba(16, 185, 129, 0.4); --secondary: #1f1f1f; --secondary-foreground: #fafafa; /* AI-Provider-Identität (nie Primary) */ --nova: #6c5ce7; --nova-soft: rgba(108, 92, 231, 0.14); --terra: #5dcaa5; --terra-soft: rgba(93, 202, 165, 0.14); /* Semantic */ --destructive: #e5484d; --destructive-soft: rgba(229, 72, 77, 0.12); --destructive-foreground: #ffffff; --success: #30a46c; --success-soft: rgba(48, 164, 108, 0.14); /* Kit-Ergänzung: Textfarbe auf success-soft (App nutzt Utility-Cascade) */ --success-foreground: #7bdcb0; --warning: #f5a524; --warning-soft: rgba(245, 165, 36, 0.14); --info: #0f93ff; --info-soft: rgba(15, 147, 255, 0.14); /* Radii */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-popover: 0 0 0 1px var(--border), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 4px 10px -4px rgba(0, 0, 0, 0.32); /* Layout-Konstanten der App-Shell */ --topbar-h: 56px; --sidebar-w: 240px; --sidebar-w-min: 56px; --row-h: 36px; --control-h: 32px; --control-h-sm: 28px; /* Motion (Power-Tool: kurz, kein Bounce) */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; /* Typo-Skala (text-base = 14px, Notion-Dichte) */ --text-3xs: 10px; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --tracking-tight: -0.01em; --tracking-wide: 0.04em; --tracking-mono: -0.005em; /* Fonts — App nutzt Geist (next/font) + Prompt für Seitentitel */ --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-page-title: "Prompt", var(--font-sans); /* Scrollbar */ --scrollbar-thumb: rgba(255, 255, 255, 0.1); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.18); } /* Light-Mode: nur die Farb-Tokens ändern sich, Brand-Emerald bleibt. */ :root[data-theme="light"], .light { --background: #ffffff; --card: #fafafa; --popover: #ffffff; --muted: rgba(0, 0, 0, 0.04); --accent: rgba(0, 0, 0, 0.06); --overlay: rgba(0, 0, 0, 0.45); --border: #e5e5e5; --border-strong: #d1d1d1; --input: #d9d9d9; --foreground: #0a0a0b; --muted-foreground: #595959; --subtle-foreground: #7a7a7a; --disabled: rgba(0, 0, 0, 0.2); --icon: #595959; --icon-strong: #0a0a0b; --icon-subtle: #7a7a7a; --primary-soft: rgba(16, 185, 129, 0.1); --primary-soft-strong: rgba(16, 185, 129, 0.18); --secondary: #f4f4f5; --secondary-foreground: #0a0a0b; --success-foreground: #157f4f; --scrollbar-thumb: rgba(0, 0, 0, 0.1); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.18); }