/* ============================================================ Antwora — Design Tokens v1.0 (2026-07-13) KI-Chatbot-Plattform für Websites · antwora.com Richtung: freundlich-professionell (B2B, Schweiz/DACH) Alle Text-/Hintergrund-Kombinationen WCAG-geprüft, siehe kontrast-check.md im selben Verzeichnis. Chart-Palette validiert (CVD + Lightness-Band, Light & Dark). Nutzung Dark-Mode: - automatisch via prefers-color-scheme - erzwungen via bzw. data-theme="light" ============================================================ */ :root { /* ---------- Rohpalette: Primary (Blau — Vertrauen, Interaktion) ---------- */ --blue-50: #EDF4FE; --blue-100: #D6E6FC; --blue-300: #7CADF2; --blue-500: #2070E5; /* Markenblau */ --blue-600: #1A5CC4; /* Hover / Linktext */ --blue-700: #164A9E; /* Active / Text auf Blau-Tints */ /* ---------- Rohpalette: Secondary (Grün — Erfolg, Bestätigung) ---------- */ --green-50: #F0F9E8; --green-100: #DDF1CB; --green-300: #94D45E; --green-500: #62B62A; /* Markengrün — nur Icons/Illustration/Marker, NIE Text */ --green-600: #4C9420; --green-700: #3A7517; /* Erfolgs-Text, Erfolgs-Buttons */ /* ---------- Rohpalette: Accent (Orange — Akzent, sparsam) ---------- */ --orange-50: #FEF4E6; --orange-100: #FCE4C2; --orange-300: #F7BC6E; --orange-500: #F0921E; /* Markenorange — Flächen nur mit Navy-Text */ --orange-600: #C97410; --orange-700: #9C5A0C; /* Warn-Text auf hellem Grund */ /* ---------- Rohpalette: Neutral (aus Navy #1E3454 abgeleitet) ---------- */ --navy-0: #FFFFFF; --navy-50: #F7F9FC; --navy-100: #EEF2F7; --navy-200: #DCE3EC; --navy-300: #C2CCD9; --navy-400: #7E8FA6; /* hellste UI-taugliche Stufe (3.3:1 auf Weiss) */ --navy-500: #5D6B82; --navy-700: #3A4A63; --navy-900: #1E3454; /* Marken-Navy = Textfarbe */ --navy-950: #16233A; --navy-1000: #0F1B2E; /* ---------- Rohpalette: Rot (nur semantisch, kein Markenrot) ---------- */ --red-50: #FBEAE9; --red-500: #C22F28; --red-400: #F2706A; /* Dark-Mode-Variante */ /* ============================================================ Semantische Tokens — LIGHT (Default) ============================================================ */ color-scheme: light; --color-background: var(--navy-0); /* Seite */ --color-surface: var(--navy-50); /* Karten, Panels, Chat-Verlauf */ --color-surface-raised: var(--navy-0); /* Karten mit Schatten, Popover */ --color-foreground: var(--navy-900); /* Fliesstext, Headlines */ --color-foreground-soft: var(--navy-700); /* Sekundärtext */ --color-muted: var(--navy-500); /* Meta, Captions, Placeholder */ --color-border: var(--navy-200); /* Trennlinien, dekorativ */ --color-border-strong: var(--navy-400); /* Input-Rahmen (>=3:1) */ --color-primary: var(--blue-500); --color-primary-hover: var(--blue-600); --color-primary-active: var(--blue-700); --color-primary-foreground: #FFFFFF; --color-primary-soft: var(--blue-50); /* Tint-Flächen, Bot-Bubble */ --color-primary-soft-fg: var(--blue-700); --color-link: var(--blue-600); --color-secondary: var(--green-500); /* dekorativ/Icon */ --color-secondary-soft: var(--green-50); --color-success: var(--green-700); /* Text + solide Fläche */ --color-success-soft: var(--green-50); --color-success-foreground: #FFFFFF; --color-accent: var(--orange-500); /* CTA-Highlight, Badges */ --color-accent-foreground: var(--navy-900); /* NIE Weiss auf Orange */ --color-accent-hover: var(--orange-600); --color-accent-soft: var(--orange-50); --color-warning: var(--orange-700); /* Warn-Text */ --color-warning-soft: var(--orange-50); --color-warning-solid: var(--orange-500); /* Fläche, mit Navy-Text */ --color-destructive: var(--red-500); --color-destructive-foreground: #FFFFFF; --color-destructive-soft: var(--red-50); --color-focus-ring: var(--blue-500); /* ---------- Chart-Farben (dataviz-validiert, feste Reihenfolge!) ---------- */ --chart-1: #2070E5; /* Blau */ --chart-2: #F0921E; /* Orange — braucht Direct-Label/Gap (Kontrast-Relief) */ --chart-3: #7C5CD6; /* Violett */ --chart-4: #4C9420; /* Grün */ --chart-grid: var(--navy-100); --chart-axis: var(--navy-500); /* ============================================================ Typografie ============================================================ */ --font-display: 'Nunito', 'Segoe UI', system-ui, sans-serif; /* Headlines, Zahlen, Marke */ --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif; /* Fliesstext, UI */ --text-xs: 0.75rem; /* 12px — Meta, Labels */ --text-sm: 0.875rem; /* 14px — UI-Text, Captions */ --text-base: 1rem; /* 16px — Fliesstext */ --text-lg: 1.125rem; /* 18px — Lead, grosse UI */ --text-xl: 1.25rem; /* 20px — Card-Titel */ --text-2xl: 1.5rem; /* 24px — H3 */ --text-3xl: 1.875rem; /* 30px — H2 */ --text-4xl: 2.25rem; /* 36px — H1 Produkt */ --text-5xl: 3rem; /* 48px — Hero Landing */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Headlines Nunito */ --weight-heavy: 800; /* Hero / Marke Nunito */ --leading-tight: 1.15; /* Hero, grosse Headlines */ --leading-snug: 1.3; /* H2/H3, Card-Titel */ --leading-normal: 1.5; /* UI-Text */ --leading-relaxed: 1.65; /* Fliesstext, längere Absätze */ /* ============================================================ Spacing (4er-Raster) ============================================================ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ /* ============================================================ Radius — Antwora ist deutlich gerundet ============================================================ */ --radius-sm: 10px; /* Inputs, Chips, kleine Buttons */ --radius-md: 14px; /* Buttons, Chat-Bubbles */ --radius-lg: 20px; /* Karten, Panels, Dialoge */ --radius-pill: 9999px; /* Tags, Avatare, Toggle, CTA-Pill */ /* ============================================================ Schatten (dezent, navy-getönt statt schwarz) ============================================================ */ --shadow-sm: 0 1px 2px rgba(30, 52, 84, 0.06), 0 1px 3px rgba(30, 52, 84, 0.08); --shadow-md: 0 4px 10px rgba(30, 52, 84, 0.08), 0 10px 28px rgba(30, 52, 84, 0.10); } /* ============================================================ DARK MODE — eigene, validierte Werte (kein automatischer Flip) ============================================================ */ /* 1) Systempräferenz, solange kein explizites data-theme="light" gesetzt ist */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-background: var(--navy-1000); /* #0F1B2E */ --color-surface: var(--navy-950); /* #16233A */ --color-surface-raised: #1C2B45; --color-foreground: #E8EEF6; --color-foreground-soft: #C4D0E0; --color-muted: #94A3BB; --color-border: #2A3B57; --color-border-strong: #576D92; --color-primary: var(--blue-500); /* Button-Fläche bleibt Markenblau */ --color-primary-hover: #3B82EC; --color-primary-active: var(--blue-600); --color-primary-foreground: #FFFFFF; --color-primary-soft: #1B3050; --color-primary-soft-fg: #9CC0F5; --color-link: #6FA0F0; --color-secondary: #7BC94A; --color-secondary-soft: #1D3220; --color-success: #7BC94A; --color-success-soft: #1D3220; --color-success-foreground: var(--navy-1000); --color-accent: #F5A94B; --color-accent-foreground: var(--navy-1000); --color-accent-hover: var(--orange-300); --color-accent-soft: #3A2B14; --color-warning: #F5A94B; --color-warning-soft: #3A2B14; --color-warning-solid: #F5A94B; --color-destructive: var(--red-400); /* Text/Icon auf dunkel */ --color-destructive-foreground: var(--navy-1000); --color-destructive-soft: #3B1F1E; --color-focus-ring: #6FA0F0; /* Chart-Farben Dark (eigene Stufen, validiert auf #16233A) */ --chart-1: #3B82EC; --chart-2: #D2790D; --chart-3: #8A66D9; --chart-4: #55A32A; --chart-grid: #223350; --chart-axis: #94A3BB; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.40), 0 10px 28px rgba(0, 0, 0, 0.35); } } /* 2) Explizit erzwungen — gewinnt immer (identische Werte wie oben) */ [data-theme="dark"] { color-scheme: dark; --color-background: var(--navy-1000); --color-surface: var(--navy-950); --color-surface-raised: #1C2B45; --color-foreground: #E8EEF6; --color-foreground-soft: #C4D0E0; --color-muted: #94A3BB; --color-border: #2A3B57; --color-border-strong: #576D92; --color-primary: var(--blue-500); --color-primary-hover: #3B82EC; --color-primary-active: var(--blue-600); --color-primary-foreground: #FFFFFF; --color-primary-soft: #1B3050; --color-primary-soft-fg: #9CC0F5; --color-link: #6FA0F0; --color-secondary: #7BC94A; --color-secondary-soft: #1D3220; --color-success: #7BC94A; --color-success-soft: #1D3220; --color-success-foreground: var(--navy-1000); --color-accent: #F5A94B; --color-accent-foreground: var(--navy-1000); --color-accent-hover: var(--orange-300); --color-accent-soft: #3A2B14; --color-warning: #F5A94B; --color-warning-soft: #3A2B14; --color-warning-solid: #F5A94B; --color-destructive: var(--red-400); --color-destructive-foreground: var(--navy-1000); --color-destructive-soft: #3B1F1E; --color-focus-ring: #6FA0F0; --chart-1: #3B82EC; --chart-2: #D2790D; --chart-3: #8A66D9; --chart-4: #55A32A; --chart-grid: #223350; --chart-axis: #94A3BB; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.40), 0 10px 28px rgba(0, 0, 0, 0.35); }