/* ========================================================== Scout-life - design tokens (light/dark) ========================================================== Sourced from the official PPÖ (Pfadfinder und Pfadfinderinnen Österreichs) brand guide (schriften_farben_icons_PPOE_RZ.pdf): PPÖ-Rot / PPÖ-Grau as the two primary brand colors, the six age-group colors, and the eight secondary/icon colors. Theme is toggled by static/js/theme.js, which sets data-theme="light" | "dark" on and persists the choice in localStorage. Per-group accent colors (e.g. Caravelles & Explorer blue, Guides & Späher green) are NOT theme tokens - they come from each calendar group's own `color` config and are applied as a scoped --group-accent override (see base.html/calendar.css), falling back to --accent when a group has none set. ========================================================== */ :root { /* ---- Raw brand palette (from the PDF) - use the semantic tokens below in actual CSS; these exist so template code can reference an exact official swatch, e.g. a group's color. ---- */ --ppo-red: #9d2632; /* PPÖ-Rot */ --ppo-gray: #4d4f5a; /* PPÖ-Grau */ --ppo-pwa: #e6007e; --ppo-biber: #904837; --ppo-wiwoe: #fbbb21; --ppo-gusp: #159a34; /* Guides & Späher */ --ppo-caex: #0b4697; /* Caravelles & Explorer */ --ppo-rara: #e62336; --ppo-dark-green: #00712f; --ppo-light-green: #95c23d; --ppo-light-blue: #80c2e8; --ppo-dark-blue: #4a5a8e; --ppo-orange: #eb5c37; --ppo-turquoise: #00ab97; --ppo-gold: #c6a443; --ppo-violet: #a7358b; /* ---- Typography ---- */ --font-heading: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-hand: "Gloria Hallelujah", cursive; /* ---- Light theme (default) ---- */ --bg: #faf9f8; --panel: #ffffff; --card: #f5f3f2; --border: #e2dfdd; --text: #262429; --muted: #6c6a72; --accent: var(--ppo-red); --accent-strong: #7a1e27; /* darkened brand red - hover/link text */ --accent-2: var(--ppo-gray); --pill: #efedec; --shadow: 0 6px 16px rgba(0, 0, 0, .07); --button-bg: #efedec; --button-fg: var(--text); --button-border: var(--border); --button-bg-hover: #e6e3e1; --danger: var(--ppo-orange); --danger-strong: #cf4a2c; --success: var(--ppo-gusp); --success-strong: #0e7a29; /* Calendar "today" highlight (overridden per-group via --group-accent) */ --today-border: var(--accent-strong); --today-bg: rgba(157, 38, 50, .08); --today-glow: rgba(157, 38, 50, .22); /* Calendar event pill tints */ --pill-border: var(--border); --pill-red-bg: rgba(157, 38, 50, .12); --pill-blue-bg: rgba(74, 90, 142, .12); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #19181b; --panel: #221f23; --card: #28252a; --border: #3a363c; --text: #edebee; --muted: #a6a3ac; --accent: #c33a4c; /* lightened brand red - legible on dark bg */ --accent-strong: #dd6577; --accent-2: #a2a4b3; /* lightened PPÖ-Grau */ --pill: #2e2b30; --shadow: 0 6px 20px rgba(0, 0, 0, .4); --button-bg: #2e2b30; --button-fg: var(--text); --button-border: #3a363c; --button-bg-hover: #38343a; --danger: #f07a5c; --danger-strong: #e2603f; --success: #4fc46e; --success-strong: #3aab58; --today-border: var(--accent); --today-bg: rgba(195, 58, 76, .14); --today-glow: rgba(195, 58, 76, .32); --pill-border: var(--border); --pill-red-bg: rgba(195, 58, 76, .2); --pill-blue-bg: rgba(128, 194, 232, .16); } } :root[data-theme="dark"] { --bg: #19181b; --panel: #221f23; --card: #28252a; --border: #3a363c; --text: #edebee; --muted: #a6a3ac; --accent: #c33a4c; --accent-strong: #dd6577; --accent-2: #a2a4b3; --pill: #2e2b30; --shadow: 0 6px 20px rgba(0, 0, 0, .4); --button-bg: #2e2b30; --button-fg: var(--text); --button-border: #3a363c; --button-bg-hover: #38343a; --danger: #f07a5c; --danger-strong: #e2603f; --success: #4fc46e; --success-strong: #3aab58; --today-border: var(--accent); --today-bg: rgba(195, 58, 76, .14); --today-glow: rgba(195, 58, 76, .32); --pill-border: var(--border); --pill-red-bg: rgba(195, 58, 76, .2); --pill-blue-bg: rgba(128, 194, 232, .16); }