/* ============================================================ tokens.css — Globalvend Activity Tracker design tokens SINGLE SOURCE OF TRUTH for color. Rules: - The app references ONLY the semantic layer (--bg, --text, --success…), never a raw hex and never a primitive directly. - A "mode" (dark / future / per-tab) is just an override of the semantic layer under a body class — primitives stay put. See the bottom of this file for theme overrides. - Inline styles and JS-emitted style strings use var(--token) too, so they theme automatically. Served by Flask at /tokens.css, linked first in . ============================================================ */ :root { /* ---- Primitives: the style guide (brand + neutral scale + hues) ---- */ --coral: #EB6B53; /* Globalvend brand orange */ --charcoal: #474951; /* brand dark gray */ --charcoal-2: #494B54; /* card-title gray */ --white: #FFFFFF; --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; --green: #059669; --red: #DC2626; --amber: #D97706; --blue: #3B82F6; --violet: #7C3AED; --teal-600: #0D9488; /* saturated teal — secondary accent (WIW / source tag) */ --blue-600: #2563EB; /* deep blue — tertiary accent (Cortex / source tag) */ /* Roster modifier accents — CIVILIZED / muted tones (not the vivid role hues), for color-coding a route's secondary/modifier type. Hues chosen to stay distinguishable for red-green color-blindness (Charles): burnt-orange / blue / purple / pink differ in hue AND luminance — no green↔pink confusion pair. */ --terracotta: #C0743E; /* muted 70s burnt-orange */ --dusty-blue: #5B7FA6; /* muted blue */ --mauve: #8273A0; /* muted purple */ --dusty-rose: #B07A95; /* muted pink */ --teal: #4F8A86; /* muted teal / sea-green */ /* Warm scale — FUTURE / pre-planning theme */ --lemon-50: #FFFBEB; --lemon-100: #FEF3C7; --lemon-200: #FDE68A; --lemon-300: #FDE047; --amber-400: #FBBF24; --amber-500: #F59E0B; --orange-600: #EA580C; --warm-700: #92400E; --warm-900: #422006; /* Tint scale — pale role fills + readable ink (soft badges). Light values here; dark + future variants live in the theme blocks. */ --green-pale: #D1FAE5; --green-deep: #065F46; --red-pale: #FEE2E2; --red-deep: #991B1B; --blue-pale: #DBEAFE; --blue-deep: #1E40AF; --violet-pale: #EDE9FE; --violet-deep: #5B21B6; /* (warning tint reuses --lemon-100 #FEF3C7 + --warm-700 #92400E) */ /* dark-mode tint pair (luminance-flipped: deep fill / light ink) */ --green-pale-d: #064E3B; --green-ink-d: #6EE7B7; --red-pale-d: #7F1D1D; --red-ink-d: #FCA5A5; --amber-pale-d: #78350F; --amber-ink-d: #FCD34D; --blue-pale-d: #1E3A8A; --blue-ink-d: #93C5FD; --violet-pale-d: #4C1D95; --violet-ink-d: #C4B5FD; /* future-mode warm-shifted tint pair (OPTIONAL — see the reversible block at the bottom of body.viewing-future; tweak these to taste) */ --green-pale-f: #E4F0CE; --green-ink-f: #4D6B1F; --red-pale-f: #FBE0CE; --red-ink-f: #9A3412; --amber-pale-f: #FDE68A; --amber-ink-f: #92400E; --blue-pale-f: #DCEBE4; --blue-ink-f: #2C5F6F; --violet-pale-f: #EEE2DC; --violet-ink-f: #6B4A6B; /* ---- Semantic layer: reference ONLY these from the app ---- Values preserve the current palette exactly (no visual change on adoption). */ /* Surfaces */ --bg: var(--slate-50); /* app background (#F8FAFC) */ --surface: var(--white); /* cards, header, sheets (#FFFFFF) */ --surface2: var(--slate-100); /* subtle raised (#F1F5F9) */ --surface3: var(--slate-200); /* sunken / hover (#E2E8F0) */ --surface-elevated: var(--white); /* popovers / dropdowns (#FFFFFF) */ /* Borders */ --border: var(--slate-200); /* default border (#E2E8F0) */ --border-strong: var(--slate-300); /* emphasized border (#CBD5E1) */ --border-subtle: var(--slate-100); /* hairline (sheet header) (#F1F5F9) */ /* Text */ --text: var(--slate-800); /* primary text (#1E293B) */ --text-2: var(--charcoal-2); /* card titles (#494B54) */ --text-muted: var(--slate-500); /* secondary text (#64748B) */ --text-faint: var(--slate-400); /* faint text / icons (#94A3B8) */ --text-inverse: var(--white); /* text on dark fills (#FFFFFF) */ /* Roles */ --fill-strong: var(--charcoal-2); /* charcoal UI fill: primary btn, filled badge (#494B54) */ --brand: var(--coral); --success: var(--green); --danger: var(--red); --warning: var(--amber); --info: var(--blue); --accent: var(--violet); --accent-teal: var(--teal-600); /* secondary accent (e.g. WIW source tag) */ --accent-blue: var(--blue-600); /* tertiary accent (e.g. Cortex source tag) */ /* Soft-badge tints: pale fill (--*-tint) + readable ink (--*-tint-ink) */ --success-tint: var(--green-pale); --success-tint-ink: var(--green-deep); --danger-tint: var(--red-pale); --danger-tint-ink: var(--red-deep); --warning-tint: var(--lemon-100); --warning-tint-ink: var(--warm-700); --info-tint: var(--blue-pale); --info-tint-ink: var(--blue-deep); --accent-tint: var(--violet-pale); --accent-tint-ink: var(--violet-deep); /* Roster modifier color-coding (civilized tones) — Helper · Trainer · Trainee · Rescue */ --mod-helper: var(--terracotta); --mod-trainer: var(--dusty-blue); --mod-trainee: var(--mauve); --mod-rescue: var(--dusty-rose); --mod-split: var(--teal); } /* ============================================================ THEME OVERRIDES — a mode is just a semantic-layer swap. Built for LUMINANCE contrast (color-blind-safe): PAST is dark, FUTURE is bright/warm, TODAY is neutral — distinguishable by brightness, not hue. Role colors keep their hue in every mode. Triggered by the body.viewing-past / viewing-future classes (set in _applyHistoricalBanner on date-travel). ============================================================ */ body.viewing-past { /* PAST = Dark Mode */ --bg: var(--slate-900); --surface: var(--slate-800); --surface2: var(--slate-800); --surface3: var(--slate-700); --surface-elevated: var(--slate-700); --border: var(--slate-700); --border-strong: var(--slate-500); --border-subtle: var(--slate-700); --text: var(--slate-50); --text-2: var(--slate-100); --text-muted: var(--slate-400); --text-faint: var(--slate-500); --fill-strong: var(--slate-100); /* tints: luminance-flipped (deep fill / light ink) */ --success-tint: var(--green-pale-d); --success-tint-ink: var(--green-ink-d); --danger-tint: var(--red-pale-d); --danger-tint-ink: var(--red-ink-d); --warning-tint: var(--amber-pale-d); --warning-tint-ink: var(--amber-ink-d); --info-tint: var(--blue-pale-d); --info-tint-ink: var(--blue-ink-d); --accent-tint: var(--violet-pale-d); --accent-tint-ink: var(--violet-ink-d); } body.viewing-future { /* FUTURE = Lemon-Yellow-Orange */ --bg: var(--lemon-100); --surface: var(--lemon-50); --surface2: var(--lemon-200); --surface3: var(--lemon-300); --surface-elevated: var(--lemon-50); --border: var(--amber-400); --border-strong: var(--amber-500); --border-subtle: var(--lemon-200); --text: var(--slate-800); --text-2: var(--warm-900); --text-muted: var(--warm-700); --text-faint: var(--amber-500); --fill-strong: var(--orange-600); /* ── FUTURE warm-shift for soft-badge tints (OPTIONAL/REVERSIBLE) ────────── Delete this block to fall back to the neutral light tints (which read fine on the lemon bg). Tweak the --*-pale-f / --*-ink-f primitives to taste. */ --success-tint: var(--green-pale-f); --success-tint-ink: var(--green-ink-f); --danger-tint: var(--red-pale-f); --danger-tint-ink: var(--red-ink-f); --warning-tint: var(--amber-pale-f); --warning-tint-ink: var(--amber-ink-f); --info-tint: var(--blue-pale-f); --info-tint-ink: var(--blue-ink-f); --accent-tint: var(--violet-pale-f); --accent-tint-ink: var(--violet-ink-f); /* ─────────────────────────────────────────────────────────────────────── */ }