/** * TALYNOR.AI — CSS Custom Properties * Version 1.1 · April 2026 * * Verwendung: * @import url('talynor-tokens.css'); * → Dark Mode (Standard) * → Light Mode * * ─── LIME-SYSTEM ────────────────────────────────────────────────────────────── * * Dark Mode: * --accent2 #AAFF4D → Text, Zahlen, Bordüren (alles) * --accent2-deco #AAFF4D → Alias, identisch * * Light Mode: * --accent2 #5F9400 → Text/Zahlen auf hellem Hintergrund (Kontrast ~5.2:1 ✓) * --accent2-deco #AAFF4D → Nur dekorativ: Bordüren, Balken, Gradient-Ends * * Merkhilfe: Immer `var(--accent2)` für Text, `var(--accent2-deco)` für Linien/Flächen. */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ─── DARK MODE (Standard) ───────────────────────────────────────────────── */ :root { /* Backgrounds */ --bg-base: #06080F; --bg-surface: #0B0F1C; --bg-elevated: #121827; --bg-overlay: #1A2238; /* Borders */ --border: #1C2540; --border-subtle: #0D1018; /* Primary — Indigo */ --primary: #635BFF; --primary-hover: #7A74FF; --primary-muted: rgba(99, 91, 255, 0.12); --primary-glow: rgba(99, 91, 255, 0.20); /* Accent 1 — Electric Ice — KI-Agenten */ --accent1: #00F5FF; --accent1-hover: #40F8FF; --accent1-muted: rgba(0, 245, 255, 0.12); --accent1-glow: rgba(0, 245, 255, 0.18); /* Accent 2 — Lime — Erfolg (Dark: #AAFF4D überall) */ --accent2: #AAFF4D; --accent2-hover: #CCFF66; --accent2-muted: rgba(170, 255, 77, 0.12); --accent2-glow: rgba(170, 255, 77, 0.16); --accent2-deco: #AAFF4D; /* Alias — identisch im Dark Mode */ /* Feedback */ --success: #AAFF4D; --warning: #FFC837; --danger: #FF4F6D; --info: #00F5FF; /* Text */ --text-primary: #EEF2FF; --text-secondary: #7080AA; --text-muted: #2E3D60; --text-inverse: #06080F; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); --shadow-lg: 0 8px 24px rgba(0,0,0,0.40); --shadow-primary: 0 4px 20px rgba(99,91,255,0.25); --shadow-accent1: 0 4px 20px rgba(0,245,255,0.20); --shadow-accent2: 0 4px 20px rgba(170,255,77,0.18); --shadow-glow-sm: 0 0 12px rgba(0,245,255,0.15); --shadow-glow-md: 0 0 24px rgba(0,245,255,0.20); /* Typography */ --font-display: 'Syne', sans-serif; --font-body: 'Instrument Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Radii */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 20px; --radius-full: 9999px; /* Animation */ --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 350ms; --ease-default: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ─── LIGHT MODE ─────────────────────────────────────────────────────────── */ [data-theme="light"], .light { /* Backgrounds — lavendel-getönt, kein neutrales Weiß */ --bg-base: #F5F3FF; --bg-surface: #FFFFFF; --bg-elevated: #EDE8FF; --bg-overlay: #E4DFFF; /* Borders */ --border: #CFC8FF; --border-subtle: #E8E4FF; /* Primary — Indigo */ --primary: #4F46E5; --primary-hover: #3730A3; --primary-muted: rgba(79, 70, 229, 0.08); --primary-glow: rgba(79, 70, 229, 0.16); /* Accent 1 — Electric Ice (gedämpft) */ --accent1: #0284C7; --accent1-hover: #0369A1; --accent1-muted: rgba(2, 132, 199, 0.10); --accent1-glow: rgba(2, 132, 199, 0.16); /* Accent 2 — Lime (ZWEISTUFIG im Light Mode) */ --accent2: #5F9400; /* TEXT auf hellem Hintergrund — Kontrast ~5.2:1 ✓ */ --accent2-hover: #4D7C0F; --accent2-muted: rgba(95, 148, 0, 0.10); --accent2-glow: rgba(95, 148, 0, 0.14); --accent2-deco: #AAFF4D; /* DEKORATIV — Bordüren, Balken, Gradient-Ends */ /* Feedback */ --success: #5F9400; --warning: #D97706; --danger: #DC2626; --info: #0284C7; /* Text */ --text-primary: #08051A; --text-secondary: #3D3870; --text-muted: #8C88B8; --text-inverse: #FFFFFF; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --shadow-primary: 0 4px 20px rgba(79,70,229,0.18); --shadow-accent1: 0 4px 20px rgba(2,132,199,0.15); --shadow-accent2: 0 4px 20px rgba(95,148,0,0.15); --shadow-glow-sm: 0 0 12px rgba(2,132,199,0.12); --shadow-glow-md: 0 0 24px rgba(2,132,199,0.16); } /* ─── BASE STYLES ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── TYPOGRAPHY UTILITIES ───────────────────────────────────────────────── */ .t-display-2xl { font-family: var(--font-display); font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; } .t-display-xl { font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: 1.08; letter-spacing: -0.020em; } .t-display-lg { font-family: var(--font-display); font-size: 36px; font-weight: 700; line-height: 1.10; letter-spacing: -0.018em; } .t-heading-xl { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.20; letter-spacing: -0.015em; } .t-heading-lg { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.010em; } .t-heading-md { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.30; letter-spacing: -0.005em; } .t-heading-sm { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.35; } .t-body-lg { font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1.65; } .t-body-md { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.60; } .t-body-sm { font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.55; } .t-label-lg { font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.40; letter-spacing: 0.02em; } .t-label-md { font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1.40; letter-spacing: 0.08em; text-transform: uppercase; } .t-label-sm { font-family: var(--font-body); font-size: 10px; font-weight: 600; line-height: 1.40; letter-spacing: 0.12em; text-transform: uppercase; } .t-mono-md { font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.50; } .t-mono-sm { font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.50; } .t-mono-xs { font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.50; } /* ─── COLOR UTILITIES ────────────────────────────────────────────────────── */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-brand { color: var(--primary); } .text-agent { color: var(--accent1); } .text-success { color: var(--accent2); } /* Lime — kontraststark in beiden Modes */ .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .bg-base { background: var(--bg-base); } .bg-surface { background: var(--bg-surface); } .bg-elevated { background: var(--bg-elevated); } .bg-primary { background: var(--primary); color: var(--text-inverse); } .bg-accent1 { background: var(--accent1); color: var(--bg-base); } .bg-accent2-deco { background: var(--accent2-deco); color: var(--bg-base); } /* #AAFF4D Fläche */ .bg-primary-muted { background: var(--primary-muted); } .bg-accent1-muted { background: var(--accent1-muted); } .bg-accent2-muted { background: var(--accent2-muted); } /* ─── COMPONENT BASE STYLES ──────────────────────────────────────────────── */ /* Card */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-normal) var(--ease-default); } .card-elevated { background: var(--bg-elevated); } .card-agent { border-color: rgba(0,245,255,0.30); box-shadow: var(--shadow-glow-sm); } .card-success { border-color: rgba(170,255,77,0.30); } /* Accent top bar — Lime dekorativ */ .card-lime-top { border-top: 4px solid var(--accent2-deco); /* #AAFF4D in beiden Modes */ } /* Badge */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.4; } .badge-primary { background: var(--primary-muted); color: var(--primary); border: 1px solid rgba(99,91,255,0.30); } .badge-agent { background: var(--accent1-muted); color: var(--accent1); border: 1px solid rgba(0,245,255,0.30); } .badge-success { background: var(--accent2-muted); color: var(--accent2); border: 1px solid rgba(95,148,0,0.30); } .badge-warning { background: rgba(255,200,55,0.12); color: var(--warning); border: 1px solid rgba(255,200,55,0.30); } .badge-danger { background: rgba(255,79,109,0.10); color: var(--danger); border: 1px solid rgba(255,79,109,0.30); } /* Button */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border: 1px solid transparent; transition: all var(--duration-normal) var(--ease-default); white-space: nowrap; } .btn-sm { padding: 6px 14px; font-size: 13px; } .btn-lg { padding: 14px 32px; font-size: 15px; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); } .btn-secondary { background: var(--primary-muted); color: var(--primary); border-color: var(--primary); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-elevated); } .btn-agent { background: var(--accent1-muted); color: var(--accent1); border-color: rgba(0,245,255,0.35); } .btn-agent:hover { background: rgba(0,245,255,0.18); } /* Gradient text utilities */ .gradient-brand { background: linear-gradient(135deg, var(--primary), var(--accent1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-full { /* Nutzt --accent2-deco (#AAFF4D) als Gradient-End — dekorativer Einsatz ✓ */ background: linear-gradient(135deg, var(--primary), var(--accent1), var(--accent2-deco)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Gradient bar — dekorativ (z.B. unter Hero, auf Slides) */ .gradient-bar { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--accent1), var(--accent2-deco)); } /* Agent pulse animation */ @keyframes talynor-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .agent-pulse { animation: talynor-pulse 2s ease-in-out infinite; } /* Scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }