/* ============================================================== CrewTab Design Tokens — SINGLE SOURCE OF COLOR TRUTH. docs/design.md, Section 5.2. No hex/rgb()/named color may appear in any other website/*.html or website/css/*.css file. Dark is default; light is mirrored via prefers-color-scheme, exactly as specified in design.md. ============================================================== */ :root { color-scheme: dark light; --ct-bg-base: #1A1715; --ct-bg-surface: #241F1C; --ct-bg-elevated: #2F2A26; --ct-bg-sunken: #12100E; --ct-border-subtle: #3A342F; --ct-border-strong: #7A6F67; --ct-text-primary: #FAF8F6; --ct-text-secondary: #A89E96; --ct-text-disabled: #5E544D; --ct-brand-primary: #F76A34; --ct-brand-on: #2A1206; --ct-brand-text: #FF8A5C; --ct-brand-muted: rgba(247, 106, 52, 0.12); --ct-accent: #B98CF0; /* Grape gradient for the inline logo mark (nav/footer + assets/crewtab-logo.svg). */ --ct-logo-from: #DCC6F6; --ct-logo-to: #7B4BC7; --ct-logo-edge: #EDE2FB; --ct-success: #5CD6A0; --ct-error: #FF6B85; --ct-warning: #F5C542; --ct-info: #3E8BE8; /* ── Category colors (design.md 2.3) — identical to the app ── */ --ct-cat-drinks: #E86FB0; --ct-cat-food: #4FC3A1; --ct-cat-transport: #3E8BE8; --ct-cat-lodging: #B98CF0; --ct-cat-tickets: #E8B93E; --ct-cat-shopping: #45C4C9; --ct-cat-transfer: #A89E96; --ct-cat-other: #7A6F67; /* ── Derived/composite tokens ────────────────────────────────── Not in design.md's literal table — this site's existing component patterns (button glow, accent-strength borders, the "Pro"/category icon tints) need a translucent wash a flat semantic token can't express. Each is the same brand/status/ category color above, alpha-blended, using the exact technique design.md itself uses for --ct-brand-muted. */ --ct-brand-glow: rgba(247, 106, 52, 0.4); --ct-border-accent: rgba(247, 106, 52, 0.35); --ct-warning-tint: rgba(245, 197, 66, 0.18); --ct-cat-drinks-tint: rgba(232, 111, 176, 0.15); --ct-cat-food-tint: rgba(79, 195, 161, 0.15); --ct-accent-tint: rgba(185, 140, 240, 0.15); /* Decoration/ambient glow must never use Ember (design.md Grundregel 2: Ember is the action color only) — this is the Grape equivalent of --ct-brand-glow, for purely decorative highlights. */ --ct-accent-glow: rgba(185, 140, 240, 0.4); /* Grape equivalent of --ct-border-accent, for decorative borders on non-interactive elements (card hover, dashed placeholders, open/ expanded state) — Ember stays reserved for actionable elements. */ --ct-accent-border: rgba(185, 140, 240, 0.35); /* Translucent nav backdrop while scrolled — same bg.base, with alpha for the blur-behind-content effect (not expressible as a flat semantic token). */ --ct-nav-scrim: rgba(26, 23, 21, 0.9); /* Neutral (non-brand) tints for muted badges/pills — border.strong (#7A6F67) alpha-blended. border.strong is identical in both modes, so this needs no light-mode override. */ --ct-neutral-tint-bg: rgba(122, 111, 103, 0.12); --ct-neutral-tint-border: rgba(122, 111, 103, 0.25); /* Phone-mockup hardware bezel/rim-light — depicts physical device plastic/glass, not a themed UI surface, so it stays fixed across light/dark like the Google logo colors do. */ --ct-device-bezel: #3A342F; --ct-phone-rim: rgba(255, 255, 255, 0.08); } /* System preference applies only when the user has not made an explicit choice via the theme switch (no [data-theme] on ). */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --ct-bg-base: #FAF8F6; --ct-bg-surface: #FFFFFF; --ct-bg-elevated: #F1EDE9; --ct-bg-sunken: #F1EDE9; --ct-border-subtle: #E5DFD9; --ct-border-strong: #7A6F67; --ct-text-primary: #1C1917; --ct-text-secondary: #5E544D; --ct-text-disabled: #A89E96; --ct-brand-primary: #CC4A12; --ct-brand-on: #FFFFFF; --ct-brand-text: #A83C0E; --ct-brand-muted: #FFE4D8; --ct-accent: #6D3BA8; --ct-logo-from: #A46FE0; --ct-logo-to: #552D84; --ct-logo-edge: #3C2060; --ct-success: #17755A; --ct-error: #C41F3E; --ct-warning: #8A6400; --ct-info: #1F6FCC; --ct-cat-drinks: #C4407F; --ct-cat-food: #17755A; --ct-cat-transport: #1F6FCC; --ct-cat-lodging: #7B4BC7; --ct-cat-tickets: #8A6400; --ct-cat-shopping: #0E7490; --ct-cat-transfer: #7A6F67; --ct-cat-other: #A89E96; --ct-brand-glow: rgba(204, 74, 18, 0.4); --ct-border-accent: rgba(204, 74, 18, 0.35); --ct-warning-tint: rgba(138, 100, 0, 0.18); --ct-cat-drinks-tint: rgba(196, 64, 127, 0.15); --ct-cat-food-tint: rgba(23, 117, 90, 0.15); --ct-accent-tint: rgba(109, 59, 168, 0.15); --ct-accent-glow: rgba(109, 59, 168, 0.4); --ct-accent-border: rgba(109, 59, 168, 0.35); --ct-nav-scrim: rgba(250, 248, 246, 0.9); } } /* Explicit choice from the theme switch (js/theme-toggle.js), persisted in localStorage as "ct-theme" and applied as data-theme on before first paint by js/theme-init.js. Overrides prefers-color-scheme in both directions — the values below duplicate the light block above on purpose, since the base :root already carries the dark values. */ :root[data-theme="light"] { --ct-bg-base: #FAF8F6; --ct-bg-surface: #FFFFFF; --ct-bg-elevated: #F1EDE9; --ct-bg-sunken: #F1EDE9; --ct-border-subtle: #E5DFD9; --ct-border-strong: #7A6F67; --ct-text-primary: #1C1917; --ct-text-secondary: #5E544D; --ct-text-disabled: #A89E96; --ct-brand-primary: #CC4A12; --ct-brand-on: #FFFFFF; --ct-brand-text: #A83C0E; --ct-brand-muted: #FFE4D8; --ct-accent: #6D3BA8; --ct-logo-from: #A46FE0; --ct-logo-to: #552D84; --ct-logo-edge: #3C2060; --ct-success: #17755A; --ct-error: #C41F3E; --ct-warning: #8A6400; --ct-info: #1F6FCC; --ct-cat-drinks: #C4407F; --ct-cat-food: #17755A; --ct-cat-transport: #1F6FCC; --ct-cat-lodging: #7B4BC7; --ct-cat-tickets: #8A6400; --ct-cat-shopping: #0E7490; --ct-cat-transfer: #7A6F67; --ct-cat-other: #A89E96; --ct-brand-glow: rgba(204, 74, 18, 0.4); --ct-border-accent: rgba(204, 74, 18, 0.35); --ct-warning-tint: rgba(138, 100, 0, 0.18); --ct-cat-drinks-tint: rgba(196, 64, 127, 0.15); --ct-cat-food-tint: rgba(23, 117, 90, 0.15); --ct-accent-tint: rgba(109, 59, 168, 0.15); --ct-accent-glow: rgba(109, 59, 168, 0.4); --ct-accent-border: rgba(109, 59, 168, 0.35); --ct-nav-scrim: rgba(250, 248, 246, 0.9); }