/* ========================================================================= design-tokens.css — Familienboard Schmidt -------------------------------------------------------------------------- EINZIGE Quelle für Farben, Typografie, Spacing, Radien, Shadows, Transitions. Komponenten dürfen keine eigenen Hex/px-Werte hardcoden. Default-Theme: hell (kindgerecht, freundlich). Stilprofil siehe ./.claude/agents/design-agent.md ========================================================================= */ :root { /* ----------------------------------------------------------------------- FARBEN — Hintergrund, Karten, Hover, Borders warmes Off-White als Grundton statt klinisches Weiß: weich, wohnlich, passt zur Anmutung "Familienboard im Wohnzimmer". ----------------------------------------------------------------------- */ --bg-primary: #fcfaf6; --bg-secondary: #ffffff; --bg-tertiary: #f0ece4; --bg-overlay: rgba(28, 26, 22, 0.45); --border: #e3ddd0; --border-strong: #cfc6b3; /* ----------------------------------------------------------------------- PROFILFARBEN — vier Familienmitglieder ----------------------------------------------------------------------- */ --tom: #4a8fbc; --julia: #c4759a; --carlo: #f0a847; --lola: #7ab97a; --tom-tint: #e3eef6; --julia-tint: #f5e2eb; --carlo-tint: #fbe8c9; --lola-tint: #dceedc; --tom-strong: #3c7aa3; --julia-strong: #ad5c83; --carlo-strong: #d68d2c; --lola-strong: #5fa05f; /* aktive Profil-Akzentfarbe — wird vom Profil-Switch live umgeschrieben. */ --profil-aktiv: var(--tom); --profil-aktiv-tint: var(--tom-tint); --profil-aktiv-strong: var(--tom-strong); /* SEMANTISCHE FARBEN */ --primary: var(--tom); --secondary: var(--julia); --accent: var(--carlo); --error: #cc6b5c; /* TEXT */ --text-primary: #2c2820; --text-secondary: #6b6358; --text-muted: #786f60; --text-on-color: #ffffff; --text-inverse: #fcfaf6; /* FUNKTIONALE FARBEN */ --positive: #5fa05f; --warning: #e6a847; --negative: #cc6b5c; /* ----------------------------------------------------------------------- TYPOGRAFIE — rund-freundliche Sans ----------------------------------------------------------------------- */ --font-family: "Nunito", "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-num: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1.0625rem; /* 17px */ --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.875rem; --font-size-3xl: 2.25rem; --font-weight-regular: 400; --font-weight-medium: 600; --font-weight-bold: 800; --line-height-tight: 1.25; --line-height-base: 1.55; /* SPACING — 4px-Basisgrid */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* RADIEN */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* SHADOWS */ --shadow-sm: 0 1px 2px rgba(44, 40, 32, 0.05), 0 1px 1px rgba(44, 40, 32, 0.04); --shadow-md: 0 2px 6px rgba(44, 40, 32, 0.07), 0 1px 3px rgba(44, 40, 32, 0.05); --shadow-lg: 0 8px 20px rgba(44, 40, 32, 0.09), 0 2px 6px rgba(44, 40, 32, 0.05); --shadow-xl: 0 18px 40px rgba(44, 40, 32, 0.16), 0 4px 10px rgba(44, 40, 32, 0.06); --shadow-focus: 0 0 0 3px rgba(74, 143, 188, 0.35); /* MOTION */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-normal: 240ms; --duration-slow: 380ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: var(--duration-fast) var(--ease-out); --transition-base: var(--duration-normal) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-bounce); /* SPRACHE — Mikrofon-Button-Zustände */ --speech-idle-bg: var(--profil-aktiv); --speech-idle-fg: var(--text-on-color); --speech-listening-bg: var(--profil-aktiv-strong); --speech-listening-fg: var(--text-on-color); --speech-listening-pulse: 1400ms; --speech-processing-bg: var(--accent); --speech-processing-fg: var(--text-primary); /* TOUCH */ --touch-min: 44px; --touch-comfort: 56px; /* LAYOUT */ --content-max: 1200px; --header-height: 88px; --footer-height: 84px; --quickbar-height: 72px; /* Z-INDEX */ --z-header: 50; --z-quickbar: 60; --z-toast: 70; --z-modal: 80; --z-konfetti: 90; } /* PROFIL-DRIVEN ACCENT — wenn html data-aktives-profil gesetzt ist */ :root[data-aktives-profil="tom"] { --profil-aktiv: var(--tom); --profil-aktiv-tint: var(--tom-tint); --profil-aktiv-strong: var(--tom-strong); } :root[data-aktives-profil="julia"] { --profil-aktiv: var(--julia); --profil-aktiv-tint: var(--julia-tint); --profil-aktiv-strong: var(--julia-strong); } :root[data-aktives-profil="carlo"] { --profil-aktiv: var(--carlo); --profil-aktiv-tint: var(--carlo-tint); --profil-aktiv-strong: var(--carlo-strong); } :root[data-aktives-profil="lola"] { --profil-aktiv: var(--lola); --profil-aktiv-tint: var(--lola-tint); --profil-aktiv-strong: var(--lola-strong); } /* DARK MODE */ :root[data-theme="dark"] { --bg-primary: #1c1a16; --bg-secondary: #25221d; --bg-tertiary: #312d26; --bg-overlay: rgba(0, 0, 0, 0.6); --border: #3a352d; --border-strong: #4d473d; --tom: #6fa9d2; --julia: #d68fb1; --carlo: #f4b965; --lola: #94c994; --tom-strong: #88bcdf; --julia-strong: #e1a4be; --carlo-strong: #f7c97e; --lola-strong: #aad6aa; --text-primary: #f3eee2; --text-secondary: #c0b7a6; --text-muted: #a89e8d; --text-on-color: #1c1a16; --text-inverse: #1c1a16; --tom-tint: #2a3a48; --julia-tint: #432e3a; --carlo-tint: #4a3a23; --lola-tint: #2e4030; --positive: #7cbb7c; --warning: #f0ba66; --negative: #d98577; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5); --shadow-xl: 0 18px 40px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px rgba(111, 169, 210, 0.5); }