/* M3 Color Tokens * * EIN Theme (Indigo) × 2 Modi (light/dark). Das Farbschema ist fest verdrahtet; * umgeschaltet wird nur noch Light/Dark via html[data-theme="dark"]. Die frühere * Mehr-Paletten-Auswahl (data-color-scheme + Swatch-Picker) wurde 2026-06-13 * entfernt — Glass-Design konsequent durchgezogen. * * Macro colors (protein/carbs/fat) and chart semantic gradients * (recovery/RHR red→amber→green) are NOT defined here — they live as * inline hex values in dashboard.js / nutrition.js / health.js so themes * never override them. */ :root { /* --- System tokens (theme-independent) --- */ --md-sys-elevation-1: 0px 1px 2px rgba(0,0,0,0.2), 0px 1px 3px 1px rgba(0,0,0,0.1); --md-sys-elevation-2: 0px 1px 2px rgba(0,0,0,0.2), 0px 2px 6px 2px rgba(0,0,0,0.1); --md-sys-elevation-3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.3); --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-color-scrim: rgba(0, 0, 0, 0.4); /* --- Category accent pairs (theme-independent) --- * Each card category blends these two hues into the theme's surface to form a * soft tonal gradient (see the .card.cat-* rules in components.css). Same * category = same colours, so related cards (e.g. Ruhepuls + HRV) read as one * group. The gradient runs from a strong corner (--card-tint-a) to a soft * corner (--card-tint-b) so the two-hue wash reads clearly as a gradient * (raised in dark mode so the hue survives the darker base). */ --card-tint-a: 32%; --card-tint-b: 15%; --cat-vitals-a: #E25563; /* heart / recovery — rose */ --cat-vitals-b: #F0915C; /* → coral */ --cat-sleep-a: #5C6BC0; /* sleep — indigo */ --cat-sleep-b: #8E72D6; /* → violet */ --cat-body-a: #2E9C8E; /* body composition — teal */ --cat-body-b: #5AB36B; /* → green */ --cat-blood-a: #A8324A; /* blood / labs — burgundy */ --cat-blood-b: #D46A55; /* → rust */ --cat-nutrition-a: #43A047; /* nutrition — green */ --cat-nutrition-b: #9CCC52; /* → lime */ --cat-hellofresh-a: #C2603C; /* HelloFresh card — terracotta */ --cat-hellofresh-b: #E0A24A; /* → warm ochre */ --cat-activity-a: #E08B2E; /* daily activity — amber */ --cat-activity-b: #F0BE3C; /* → gold */ --cat-training-a: #3D7EC2; /* training — blue */ --cat-training-b: #3FB6C4; /* → cyan */ --cat-analysis-a: #6E78AE; /* analysis/reports — slate-blue */ --cat-analysis-b: #A07CB6; /* → mauve */ --cat-neutral-a: #7A8A86; /* generic overview — slate */ --cat-neutral-b: #93887F; /* → warm grey */ --cat-supply-a: #6D8B3C; /* supply / pantry — olive */ --cat-supply-b: #C2A23A; /* → harvest gold */ /* ============================================= * THEME — LIGHT (Indigo, einziges Schema) * ============================================= */ --md-sys-color-primary: #3E4DA5; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #DDE0FF; --md-sys-color-on-primary-container: #0F1857; --md-sys-color-secondary: #595E72; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #DDE1F9; --md-sys-color-on-secondary-container: #161B2C; --md-sys-color-tertiary: #76536B; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #FFD7EB; --md-sys-color-on-tertiary-container: #2D1226; --md-sys-color-error: #B3261E; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #F9DEDC; --md-sys-color-on-error-container: #410E0B; --md-sys-color-background: #FBF8FF; --md-sys-color-on-background: #1B1B21; --md-sys-color-surface: #FBF8FF; --md-sys-color-on-surface: #1B1B21; --md-sys-color-surface-variant: #E2E1EC; --md-sys-color-on-surface-variant: #45464F; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F5F2FA; --md-sys-color-surface-container: #EFEDF4; --md-sys-color-surface-container-high: #EAE7EE; --md-sys-color-surface-container-highest:#E4E1E9; --md-sys-color-outline: #767680; --md-sys-color-outline-variant: #C6C5D0; --md-sys-color-inverse-surface: #2F3035; --md-sys-color-inverse-on-surface: #F2EFF7; } /* ============================================= * THEME — DARK (Indigo). Dark-Mode-weite Anpassungen (Kategorie-Tint-Anteil, * frischeres Ernährungs-Grün) leben hier, weil sie modus- nicht schema-abhängig * sind. * ============================================= */ html[data-theme="dark"] { /* Stronger accent share so category gradients stay legible on dark surfaces. */ --card-tint-a: 44%; --card-tint-b: 24%; /* The light-mode leaf green turns muddy on dark surfaces — swap nutrition to a fresher jade→mint in dark so the Ernährung cards stay appetising. */ --cat-nutrition-a: #16B981; /* jade */ --cat-nutrition-b: #7FE0A6; /* mint */ --md-sys-color-primary: #BCC2FF; --md-sys-color-on-primary: #1F2A78; --md-sys-color-primary-container: #2F3F90; --md-sys-color-on-primary-container: #DDE0FF; --md-sys-color-secondary: #C1C4DD; --md-sys-color-on-secondary: #2C2F41; --md-sys-color-secondary-container: #424659; --md-sys-color-on-secondary-container: #DDE1F9; --md-sys-color-tertiary: #E5BAD3; --md-sys-color-on-tertiary: #44263A; --md-sys-color-tertiary-container: #5C3D52; --md-sys-color-on-tertiary-container: #FFD7EB; --md-sys-color-error: #F2B8B5; --md-sys-color-on-error: #601410; --md-sys-color-error-container: #8C1D18; --md-sys-color-on-error-container: #F9DEDC; --md-sys-color-background: #131318; --md-sys-color-on-background: #E4E1E9; --md-sys-color-surface: #131318; --md-sys-color-on-surface: #E4E1E9; --md-sys-color-surface-variant: #45464F; --md-sys-color-on-surface-variant: #C6C5D0; --md-sys-color-surface-container-lowest: #0D0E13; --md-sys-color-surface-container-low: #1B1B21; --md-sys-color-surface-container: #1F1F25; --md-sys-color-surface-container-high: #2A2A30; --md-sys-color-surface-container-highest:#35353B; --md-sys-color-outline: #909094; --md-sys-color-outline-variant: #45464F; --md-sys-color-inverse-surface: #E4E1E9; --md-sys-color-inverse-on-surface: #2F3035; }