/* ========================================================================== Rankeo — Design Tokens Siehe docs/06_DESIGN_SYSTEM.md — Abschnitte 2–4 ========================================================================== */ :root { /* ---- Neutral scale ---- */ --gray-25: #FCFCFD; --gray-50: #FAFAFA; --gray-100: #F4F4F5; --gray-200: #E4E4E7; --gray-300: #D4D4D8; --gray-400: #A1A1AA; --gray-500: #71717A; --gray-600: #52525B; --gray-700: #3F3F46; --gray-900: #18181B; --gray-950: #09090B; /* Konstante Tinte für Elemente, die in JEDEM Theme dunkel bleiben sollen (Avatare, Marken-Badge, Bulk-Bar) — bewusst NICHT --gray-900, weil --gray-900 im Dark Mode invertiert wird (siehe Theme-Block unten). */ --ink: #18181B; /* ---- Semantic ---- */ --color-bg: var(--gray-25); --color-surface: #FFFFFF; --color-border: var(--gray-200); --color-border-strong: var(--gray-300); --color-text: var(--gray-900); --color-text-muted: var(--gray-500); --color-text-subtle: var(--gray-400); --color-accent: var(--gray-900); --color-accent-hover: var(--gray-950); --color-accent-fg: #FFFFFF; --color-focus: #3B82F6; /* ---- States ---- */ --color-positive: #0D9488; --color-positive-bg: #F0FDFA; --color-positive-border: #CCFBF1; --color-negative: #E11D48; --color-negative-bg: #FFF1F2; --color-negative-border: #FFE4E6; --color-warning: #D97706; --color-warning-bg: #FFFBEB; --color-warning-border: #FEF3C7; /* ---- Chart series ---- */ /* Nutzer-Vorgabe 11.09.2026: Verlaufscharts (Sichtbarkeit/Traffic/Keywords) sollen genau die gleichen Wettbewerber wie "Wettbewerber im Blick" zeigen, nicht nur die ersten 3 — daher auf die volle abonnementabhängige Obergrenze (competitor_display_limit(), Standard 5) erweitert, chart-5/chart-6 ergänzt (chart-1 = eigene Domain, chart-2..6 = bis zu 5 Wettbewerber). */ --chart-1: var(--gray-900); --chart-2: #0D9488; --chart-3: #8B5CF6; --chart-4: #F59E0B; --chart-5: #DB2777; --chart-6: #2563EB; --chart-fill-opacity: 0.12; /* ---- Typography ---- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --text-xs: 12px; --text-xs-lh: 16px; --text-sm: 13px; --text-sm-lh: 18px; --text-base: 14px; --text-base-lh: 20px; --text-md: 15px; --text-md-lh: 22px; --text-lg: 18px; --text-lg-lh: 26px; --text-xl: 26px; --text-xl-lh: 32px; --text-2xl: 30px; --text-2xl-lh: 36px; /* ---- Spacing (4px grid) ---- */ --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-16: 64px; /* ---- Radius ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px; /* ---- Shadow ---- */ --shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.04); --shadow-md: 0 1px 3px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04); --shadow-lg: 0 4px 12px rgba(9, 9, 11, 0.08); /* ---- Layout ---- */ --sidebar-width: 256px; --sidebar-width-collapsed: 64px; --topbar-height: 60px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-base: 180ms; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; } } /* ========================================================================== Dark Mode — via [data-theme="dark"] auf , gesetzt/persistiert in app.js. Überschreibt nur die Neutralskala 25–300 (Flächen/Hover) und --gray-900/950 (davon leiten sich --color-text, --color-accent, --chart-1 automatisch ab, siehe var()-Verkettung oben). --ink bleibt bewusst unverändert, damit fest dunkle Elemente (Avatare, Marken-Badge, Bulk-Bar) in beiden Themes lesbar sind. ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --gray-25: #0A0A0C; --gray-50: #161618; --gray-100: #1E1E21; --gray-200: #29292D; --gray-300: #3A3A3F; --gray-900: #F4F4F5; --gray-950: #FFFFFF; --color-bg: var(--gray-25); --color-surface: #131316; --color-border: var(--gray-200); --color-border-strong: var(--gray-300); --color-text: var(--gray-900); --color-text-muted: #A1A1AA; --color-text-subtle: #71717A; --color-accent: var(--gray-900); --color-accent-hover: var(--gray-950); --color-accent-fg: var(--ink); --color-focus: #60A5FA; --color-positive: #2DD4BF; --color-positive-bg: rgba(45, 212, 191, 0.12); --color-positive-border: rgba(45, 212, 191, 0.28); --color-negative: #FB7185; --color-negative-bg: rgba(251, 113, 133, 0.12); --color-negative-border: rgba(251, 113, 133, 0.28); --color-warning: #FBBF24; --color-warning-bg: rgba(251, 191, 36, 0.12); --color-warning-border: rgba(251, 191, 36, 0.28); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6); }