/* ========================================================================== tokens.css — computed color scales + Bootstrap mapping - Only variables - Light theme defaults ========================================================================== */ :root{ /* ----------------------------------------------------------------------- 1) BASE COLORS (single source of truth) ----------------------------------------------------------------------- */ --brand-primary: #b2033c; /* deine Hauptmarke */ --neutral-900: #565759; /* dein dunkles Grau (Text) */ --neutral-0: #ffffff; /* Optional: wenn du einen "Akzent 2" brauchst (z.B. Buttons sekundär) */ /* --brand-secondary: #...; */ /* ----------------------------------------------------------------------- 2) SEMANTIC TOKENS (use these in components) ----------------------------------------------------------------------- */ --color-bg: var(--neutral-0); --color-text: var(--neutral-900); --color-muted: color-mix(in oklab, var(--color-text) 65%, var(--neutral-0)); --color-surface: #f5f3f3; /* kann auch computed sein, wenn du willst */ --color-surface-2: color-mix(in oklab, var(--color-surface) 88%, var(--neutral-0)); --color-border: color-mix(in oklab, var(--color-text) 16%, var(--neutral-0)); --color-link: var(--brand-primary); --color-link-hover: color-mix(in oklab, var(--brand-primary) 85%, black); /* ----------------------------------------------------------------------- 3) TYPO TOKENS ----------------------------------------------------------------------- */ --font-base: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-headings: "Asap Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-size-base: 1.15rem; --font-weight-base: 400; --line-height-base: 1.5; --heading-weight: 300; /* ----------------------------------------------------------------------- 4) COMPUTED SCALES - brand scale: mix with white - neutral scale: mix neutral-900 towards white ----------------------------------------------------------------------- */ /* Brand (Primary) scale */ --brand-100: var(--brand-primary); --brand-90: color-mix(in oklab, var(--brand-primary) 90%, var(--neutral-0)); --brand-80: color-mix(in oklab, var(--brand-primary) 80%, var(--neutral-0)); --brand-70: color-mix(in oklab, var(--brand-primary) 70%, var(--neutral-0)); --brand-60: color-mix(in oklab, var(--brand-primary) 60%, var(--neutral-0)); --brand-50: color-mix(in oklab, var(--brand-primary) 50%, var(--neutral-0)); --brand-40: color-mix(in oklab, var(--brand-primary) 40%, var(--neutral-0)); --brand-30: color-mix(in oklab, var(--brand-primary) 30%, var(--neutral-0)); --brand-20: color-mix(in oklab, var(--brand-primary) 20%, var(--neutral-0)); --brand-10: color-mix(in oklab, var(--brand-primary) 10%, var(--neutral-0)); /* Neutral scale (from neutral-900 towards white) */ --neutral-800: color-mix(in oklab, var(--neutral-900) 90%, var(--neutral-0)); --neutral-700: color-mix(in oklab, var(--neutral-900) 80%, var(--neutral-0)); --neutral-600: color-mix(in oklab, var(--neutral-900) 70%, var(--neutral-0)); --neutral-500: color-mix(in oklab, var(--neutral-900) 60%, var(--neutral-0)); --neutral-400: color-mix(in oklab, var(--neutral-900) 45%, var(--neutral-0)); --neutral-300: color-mix(in oklab, var(--neutral-900) 30%, var(--neutral-0)); --neutral-200: color-mix(in oklab, var(--neutral-900) 18%, var(--neutral-0)); --neutral-100: color-mix(in oklab, var(--neutral-900) 10%, var(--neutral-0)); --neutral-50: color-mix(in oklab, var(--neutral-900) 6%, var(--neutral-0)); /* ----------------------------------------------------------------------- 5) BACKWARD-COMPAT ALIASES (so musst du nicht alles umbenennen) - deine alten Namen weiter nutzbar, aber computed ----------------------------------------------------------------------- */ --global-first-color-100: var(--brand-100); --global-first-color-90: var(--brand-90); --global-first-color-80: var(--brand-80); --global-first-color-70: var(--brand-70); --global-first-color-60: var(--brand-60); --global-first-color-50: var(--brand-50); --global-first-color-40: var(--brand-40); --global-first-color-30: var(--brand-30); --global-first-color-20: var(--brand-20); --global-first-color-10: var(--brand-10); --global-second-color-100: var(--neutral-900); --global-second-color-90: var(--neutral-800); --global-second-color-80: var(--neutral-700); --global-second-color-70: var(--neutral-600); --global-second-color-60: var(--neutral-500); --global-second-color-50: var(--neutral-400); --global-second-color-40: var(--neutral-300); --global-second-color-30: var(--neutral-200); --global-second-color-20: var(--neutral-100); --global-second-color-15: color-mix(in oklab, var(--neutral-900) 8%, var(--neutral-0)); --global-second-color-10: var(--neutral-50); --global-font-color: var(--color-text); --global-card-bg-color: var(--color-surface); --global-card-footer-bg-color: var(--color-surface); /* ----------------------------------------------------------------------- 6) BOOTSTRAP MAPPING (runtime overrides) ----------------------------------------------------------------------- */ --bs-primary: var(--brand-primary); --bs-secondary: var(--neutral-600); --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-link-color: var(--color-link); --bs-link-hover-color: var(--color-link-hover); --bs-body-font-family: var(--font-base); --bs-body-font-size: var(--font-size-base); --bs-body-font-weight: var(--font-weight-base); --bs-body-line-height: var(--line-height-base); --bs-heading-font-family: var(--font-headings); --bs-heading-font-weight: var(--heading-weight); --bs-card-bg: var(--color-surface); --bs-card-cap-bg: var(--color-surface-2); --bs-border-color: var(--color-border); /* optional, falls du es im Theme brauchst */ --global-navi-main-link-color: #ffffff; } /* ------------------------------------------------------------------------- 7) FALLBACK, falls color-mix() nicht verfügbar - bleibt minimal: setzt nur die wichtigsten Aliases "wie früher" - du kannst hier bei Bedarf mehr ergänzen ------------------------------------------------------------------------- */ @supports not (color: color-mix(in oklab, white, black)) { :root{ /* Brand scale fallback: alte Werte (oder nur wenige kritische) */ --global-first-color-100: #b2033c; /* Neutral fallback */ --global-second-color-100: #565759; --global-second-color-10: #eeeeee; /* Bootstrap mapping fallback */ --bs-primary: #b2033c; --bs-body-color: #565759; } }