/* ============================================================ diewarenwirtschaft — Design Tokens Claude-Style Redesign ------------------------------------------------------------ Single Source of Truth für Farben, Radien, Schriften, Abstände. Alle weiteren CSS-Dateien nutzen diese Variablen. ============================================================ */ :root { /* -------------------------------------------------------- Farben — Basis (neutral) -------------------------------------------------------- */ --color-bg-primary: #ffffff; /* Haupthintergrund */ --color-bg-secondary: #faf9f5; /* Surfaces, Metric-Cards (Creme) */ --color-bg-tertiary: #f3f1ea; /* Page-Background */ --color-bg-inverse: #1c1b19; /* Dark-Mode-Vorbereitung */ --color-text-primary: #1c1b19; /* Haupttext */ --color-text-secondary: #5f5e5a; /* Gedämpfter Text, Labels */ --color-text-tertiary: #888780; /* Hinweise, Placeholders */ --color-text-inverse: #faf9f5; --color-border-primary: rgba(28, 27, 25, 0.40); --color-border-secondary: rgba(28, 27, 25, 0.30); --color-border-tertiary: rgba(28, 27, 25, 0.15); /* -------------------------------------------------------- Akzentfarbe — "Crail" (Claude-Orange/Terrakotta) -------------------------------------------------------- */ --color-accent-50: #faece7; --color-accent-100: #f5c4b3; --color-accent-200: #f0997b; --color-accent-400: #d85a30; /* Primäre Akzentfarbe */ --color-accent-600: #993c1d; --color-accent-800: #712b13; --color-accent-900: #4a1b0c; /* -------------------------------------------------------- Semantische Farben (Status) Background jeweils aus 50er-Stop, Text aus 800er. -------------------------------------------------------- */ --color-bg-success: #eaf3de; --color-text-success: #27500a; --color-border-success: #97c459; --color-bg-warning: #faeeda; --color-text-warning: #633806; --color-border-warning: #ef9f27; --color-bg-danger: #fcebeb; --color-text-danger: #791f1f; --color-border-danger: #e24b4a; --color-bg-info: #e6f1fb; --color-text-info: #0c447c; --color-border-info: #378add; /* -------------------------------------------------------- Typografie -------------------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-serif: "Copernicus", "Tiempos Text", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 26px; --fw-regular: 400; --fw-medium: 500; --lh-tight: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.7; /* -------------------------------------------------------- Layout — Radien, Abstände, Borders -------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --border-width: 0.5px; /* -------------------------------------------------------- Transitions -------------------------------------------------------- */ --transition-fast: 120ms ease; --transition-base: 180ms ease; } /* ============================================================ Dark Mode — wird später aktiviert über [data-theme="dark"] am -Element. Jetzt schon definiert, damit die späteren Komponenten keine Nacharbeit brauchen. ============================================================ */ [data-theme="dark"] { --color-bg-primary: #1c1b19; --color-bg-secondary: #262523; --color-bg-tertiary: #1c1b19; --color-text-primary: #faf9f5; --color-text-secondary: #b4b2a9; --color-text-tertiary: #888780; --color-border-tertiary: rgba(250, 249, 245, 0.15); --color-border-secondary: rgba(250, 249, 245, 0.30); --color-border-primary: rgba(250, 249, 245, 0.40); }