/* ═══════════════════════════════════════════════════════════════════════════ MALION · Design System Tokens v2 Single source of truth — edit here, changes propagate everywhere. ═══════════════════════════════════════════════════════════════════════════ TABLE OF CONTENTS ───────────────── 1. Primitive: Gray Scale 2. Primitive: Brand Scale (antique gold) 3. Primitive: Info Scale (steel blue) 4. Primitive: Status Scale 5. Semantic: Surfaces 6. Semantic: Text 7. Semantic: Border 8. Semantic: Accent — Brand (gold) 9. Semantic: Accent — Info (blue) 10. Semantic: Status 11. Typography: Families 12. Typography: Content Scale 13. Typography: UI Label Scale 14. Typography: Weight, Line Height, Letter Spacing 15. Spacing (8px primary, 4px detail) 16. Border Radius 17. Shadows 18. Animation 19. Component Tokens — Buttons 20. Component Tokens — Controls & Inputs 21. Layout 22. Legacy Aliases (backwards compat) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── 1. Primitive: Gray Scale (warm undertone) ─────────────────────────── */ --gray-0: #ffffff; --gray-50: #f5f4f2; --gray-100: #f0eeeb; --gray-200: #ccc9c4; --gray-300: #a09890; --gray-400: #807870; --gray-500: #605850; --gray-600: #4a4440; --gray-700: #383330; --gray-750: #2c2825; --gray-800: #23201e; --gray-850: #1d1a17; --gray-900: #161412; --gray-925: #110f0e; --gray-950: #0c0b0a; --gray-975: #080706; --gray-1000: #000000; /* ── 2. Primitive: Brand Scale (antique gold) ──────────────────────────── */ --brand-100: #f5ede0; --brand-200: #e8d5ba; --brand-300: #d4b88a; --brand-400: #c4a472; --brand-500: #b8956a; --brand-600: #a07855; --brand-700: #7a5c40; --brand-800: #5a4230; /* ── 3. Primitive: Info Scale (steel blue — warm-desaturated) ──────────── */ /* Chosen to harmonize with warm gold without clashing cold */ --info-100: #ddeaf5; --info-200: #b8d4ec; --info-300: #88b8de; --info-400: #5b9bd5; /* primary info/settings accent */ --info-500: #4485c0; --info-600: #336fa8; --info-700: #235490; --info-800: #163c70; /* ── 4. Primitive: Status Scale ────────────────────────────────────────── */ --green-400: #4ade80; --green-500: #22c55e; --green-600: #16a34a; --yellow-400: #facc15; --yellow-500: #eab308; --yellow-600: #ca8a04; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; /* ── 5. Semantic: Surfaces ─────────────────────────────────────────────── */ --color-bg: var(--gray-950); /* App canvas */ --color-surface-1: var(--gray-925); /* Sidebar, modals */ --color-surface-2: var(--gray-900); /* Input panel, secondary bg */ --color-surface-3: var(--gray-850); /* Cards, inputs, controls */ --color-surface-4: var(--gray-750); /* Elevated / hover / active surfaces */ /* ── 6. Semantic: Text ─────────────────────────────────────────────────── */ --color-text-primary: var(--gray-50); --color-text-secondary: var(--gray-300); --color-text-muted: var(--gray-400); --color-text-disabled: var(--gray-700); --color-text-on-accent: var(--gray-950); /* text on gold buttons */ --color-text-on-info: var(--gray-950); /* text on blue buttons */ /* ── 7. Semantic: Border ───────────────────────────────────────────────── */ --color-border: rgba(245, 240, 235, 0.07); --color-border-strong: rgba(245, 240, 235, 0.12); --color-border-subtle: rgba(245, 240, 235, 0.04); /* Focus ring — visible but not harsh */ --color-focus-ring: rgba(91, 155, 213, 0.55); /* ── 8. Semantic: Accent — Brand (gold) ────────────────────────────────── */ --color-accent: var(--brand-500); --color-accent-hover: var(--brand-400); --color-accent-active: var(--brand-600); --color-accent-subtle: rgba(184, 149, 106, 0.10); --color-accent-subtle-hover: rgba(184, 149, 106, 0.18); /* ── 9. Semantic: Accent — Info (blue, settings/info context) ──────────── */ --color-info: var(--info-400); --color-info-hover: var(--info-300); --color-info-active: var(--info-500); --color-info-subtle: rgba(91, 155, 213, 0.12); --color-info-subtle-hover: rgba(91, 155, 213, 0.20); /* ── 10. Semantic: Status ──────────────────────────────────────────────── */ --color-success: var(--green-500); --color-success-subtle: rgba(34, 197, 94, 0.12); --color-warning: var(--yellow-500); --color-warning-subtle: rgba(234, 179, 8, 0.12); --color-error: var(--red-500); --color-error-subtle: rgba(239, 68, 68, 0.12); /* ── 11. Typography: Families ──────────────────────────────────────────── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "SF Mono", "Fira Code", "Consolas", monospace; /* ── 12. Typography: Content Scale ─────────────────────────────────────── */ /* Used for headings, body copy, editorial content */ --text-display: 48px; /* Hero headlines, main titles */ --text-heading: 32px; /* Page/section headings */ --text-subhead: 22px; /* Sub-headings, panel titles */ --text-body: 18px; /* Primary body text, descriptions */ --text-caption: 14px; /* Captions, help text, secondary descriptions */ --text-input: 16px; /* Textarea/input content — UI context, readable but compact */ /* ── 13. Typography: UI Label Scale ────────────────────────────────────── */ /* Used for controls, buttons, labels, menus — stays compact for dense UI */ --text-ui-lg: 14px; /* Large controls, prominent labels */ --text-ui-md: 13px; /* Default buttons, input labels, menu items */ --text-ui-sm: 12px; /* Small buttons, toggle groups, secondary labels */ --text-ui-xs: 11px; /* Micro labels, counts, badges */ --text-ui-2xs: 10px; /* Smallest: section dividers, status dots */ /* ── 14. Typography: Weight / Line Height / Letter Spacing ─────────────── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.25; --leading-snug: 1.40; --leading-normal: 1.55; --leading-relaxed: 1.70; --leading-loose: 1.85; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.12em; /* ── 15. Spacing (8px primary grid, 4px for detail adjustments) ─────────── */ /* Detail (4px) */ --space-1: 4px; /* Primary 8px grid */ --space-2: 8px; --space-3: 12px; /* 8 + 4px detail */ --space-4: 16px; --space-5: 20px; /* 16 + 4px detail */ --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ── 16. Border Radius ──────────────────────────────────────────────────── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; /* ↑ from 6px — slightly softer base */ --radius-lg: 16px; /* ↑ from 12px */ --radius-xl: 24px; /* ↑ from 18px */ --radius-2xl: 32px; --radius-full: 9999px; /* Pills — all buttons use this */ /* ── 17. Shadows ────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.60); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.70); /* Glow variants for primary button */ --glow-accent: 0 0 16px rgba(184, 149, 106, 0.35), 0 0 32px rgba(184, 149, 106, 0.15); --glow-accent-hover: 0 0 20px rgba(196, 164, 114, 0.55), 0 0 48px rgba(184, 149, 106, 0.25); --glow-info: 0 0 16px rgba(91, 155, 213, 0.30), 0 0 32px rgba(91, 155, 213, 0.12); /* ── 18. Animation ──────────────────────────────────────────────────────── */ --duration-instant: 50ms; --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 350ms; --duration-slower: 500ms; --ease-linear: linear; --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── 19. Component Tokens — Buttons ─────────────────────────────────────── */ --btn-radius: var(--radius-full); /* All buttons fully rounded */ --btn-font-family: var(--font-sans); --btn-font-weight: var(--weight-medium); --btn-tracking: var(--tracking-wide); /* Size variants */ --btn-height-sm: 28px; --btn-height-md: 36px; --btn-height-lg: 44px; --btn-padding-sm: 0 12px; --btn-padding-md: 0 20px; --btn-padding-lg: 0 28px; --btn-font-size-sm: var(--text-ui-xs); --btn-font-size-md: var(--text-ui-sm); --btn-font-size-lg: var(--text-ui-md); /* Icon button (square, round) */ --btn-icon-size-sm: 28px; --btn-icon-size-md: 32px; --btn-icon-size-lg: 36px; /* ── 20. Component Tokens — Controls & Inputs ───────────────────────────── */ --control-height-sm: 28px; --control-height-md: 36px; --control-height-lg: 44px; --control-radius: var(--radius-full); /* Toggle groups: pill shape */ --control-padding-x: var(--space-3); --control-bg: var(--color-surface-3); --control-bg-hover: var(--color-surface-4); --control-bg-active: var(--color-surface-4); --input-height: var(--control-height-md); --input-radius: var(--radius-md); --input-bg: var(--color-surface-3); --input-border: var(--color-border-strong); --input-border-focus: var(--color-info); --input-font-size: var(--text-ui-md); /* ── 21. Layout ─────────────────────────────────────────────────────────── */ --sidebar-w: 240px; /* ↑ from 232px for more breathing room */ --topbar-h: 48px; /* ↑ from 40px — 8px grid aligned */ /* Floating Panel — shared by Kampagnen & Model Creator */ --panel-bottom: var(--space-6); /* 24px from viewport */ --panel-width: 960px; --panel-side-gap: var(--space-12); /* 48px total side margin */ --panel-radius: var(--radius-xl); /* 24px */ --panel-bg: rgba(17, 15, 14, 0.94); --panel-blur: 24px; --panel-padding-x: var(--space-4); /* 16px horizontal */ --panel-padding-top: var(--space-4); /* 16px top — 8px grid */ --panel-padding-bot: var(--space-4); /* 16px bottom — gleich */ /* Responsive breakpoints */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ── 22. Legacy Aliases (backwards compatibility with style.css) ─────────── */ --bg: var(--color-bg); --sidebar-bg:var(--color-surface-1); --panel-bg-solid: var(--color-surface-2); /* alter Alias — panel-bg ist jetzt transparent */ --card-bg: var(--color-surface-3); --border: var(--color-border); --accent: var(--color-accent); --accent-h: var(--color-accent-hover); --text: var(--color-text-primary); --muted: var(--color-text-muted); --muted-l: var(--color-text-secondary); --radius: var(--radius-md); /* Old typography aliases */ --text-2xs: var(--text-ui-2xs); --text-xs: var(--text-ui-xs); --text-sm: var(--text-ui-sm); --text-base: var(--text-ui-md); --text-md: var(--text-ui-md); --text-lg: var(--text-ui-lg); --text-xl: var(--text-subhead); --text-2xl: 26px; --text-3xl: var(--text-heading); }