/* ============================================================================ CoachForce CRM — Design Tokens (Single Source of Truth) Authority: docs/projects/style/CoachForce_Token_Layer_Decision_v1_0.md Audit: docs/projects/style/Sprint_1_Audit_Diff.md Sprint: docs/projects/style/Sprint_1_Token_Layer_Implementation.md Two layers of tokens live in this file: 1. The Decision Document layer (`--cf-*`). The authoritative names going forward. Every section below from §4.1 to §7 maps 1:1 to a section of the Decision Document. 2. A legacy layer at the bottom. Every token that existed in this file before Sprint 1 is preserved verbatim. Migration policy per Decision §7 is "rename on touch" — existing widgets continue working unchanged; new code uses the `--cf-*` names. Legacy tokens are not deleted in this sprint. The two layers must not drift: where the same hex appears in both, the legacy token uses the literal value and the `--cf-*` token does too — neither references the other, so removing the legacy block in a future sprint cannot cascade into the new layer. ============================================================================ */ /* Bebas Neue — Decision §5.1, hero moments only. Loaded from jsdelivr per Sprint handoff §4 Phase 2 step 4. @fontsource v5+ uses weight-specific files; Bebas Neue only ships 400. */ @import url('https://cdn.jsdelivr.net/npm/@fontsource/bebas-neue@5/400.css'); :root { /* ======================================================================== 4.1 BRAND INK — Decision §4.1 (NEW) The single most significant addition. Used for primary buttons, self-authored message bubbles, own-avatar fill, active tab word on content tabs, display headlines on light surfaces, and primary category in editorial charts. --cf-ink hex is proposed (Decision §8.1 open item — confirm against brand framework / Figma if available). Carry through the ramp if changed. ======================================================================== */ --cf-ink: #293046; --cf-ink-soft: #3E4763; --cf-ink-mute: #5B6480; /* ======================================================================== 4.2 PORTAL COLOURS — Decision §4.2 (RETAINED, newly tokenised) Exclusive to portal chrome — sidebar accent, portal switcher, active nav indicator. Never appear as content emphasis, chip colour, or analytics data colour. ======================================================================== */ --cf-portal-coach: #0F6E56; --cf-portal-athlete: #185FA5; --cf-portal-business: #854F0B; --cf-portal-system: #534AB7; /* v1.3 (Sprint 4 Phase 0) — resolves Sprint 3 Open Question 1. Deep wine for Content Portal; cool steel-slate for Developer Portal. Distinct from avatar slots and from existing portal hues. */ --cf-portal-content: #7B2D4D; --cf-portal-developer: #3F4F66; /* ======================================================================== 4.3 TEAL ACCENT + RAMP — Decision §4.3 (value retained, role narrowed) Teal is no longer the brand primary (ink is). It is now: - the status = active / current / success / completed signal - the accent for non-primary interactive elements - the second-tier data category in editorial charts The 4-step ramp powers editorial chart stacks and soft backgrounds. ======================================================================== */ --cf-teal: #14b8a6; /* accent / status / primary teal */ --cf-teal-500: #5DCAA5; /* mid-stack in editorial charts */ --cf-teal-200: #9FE1CB; /* light-stack in editorial charts */ --cf-teal-50: #E1F5EE; /* soft background fills */ /* ======================================================================== 4.4 WORKOUT-LEVEL PALETTES — Decision §4.4 (v1.2 amendment) Used on workout-level surfaces: today's session, workout library, exercise detail, plan periodisation strip. These keep colour identity per the governing rule (Decision §3). v1.2 — INTENSITIES NO LONGER TOKENISED. Z1–Z5 is not a CoachForce concept. The five-colour rainbow palette in v1.0/v1.1 (--cf-intensity-z1..z5) was a sports-science convention that doesn't map to the domain. CoachForce zones are only Endurance, Stamina, Strength, Power, Mixed. Intensities (Easy, Long Slow Quality Distance, etc.) are gradations *within* a zone. They share the zone's colour by default, with optional per-intensity gradations stored in the database (tblintensity.display_color). The renderer applies `intensity.display_color || zoneColor` — see frontend/static/js/training-zones.js:241 for the canonical pattern. No CSS token is needed for this — the value comes from data. v1.1 taxonomy correction (retained): - 4.4.1 [retired in v1.2] - 4.4.2 ZONES — the only workout-level palette. Endurance, Stamina, Strength, Power, Mixed. - 4.4.3 PERIODISATION — phases get the EDITORIAL ramp now, not a vivid palette. Vivid hues for phases (Base = green = same as Endurance zone, etc.) accidentally implied semantic equivalences that don't hold for every athlete (e.g. "Season = Power" only fits a sprinter). Editorial-ramp tokens make the chart calmer and let the legend carry the meaning. Decision §8.2 open item: cross-check these hexes against the values currently painted by widget CSS in production. This sprint introduces the tokens but does not migrate widgets. ======================================================================== */ /* 4.4.1 Intensities — RETIRED in v1.2. Intensities share their zone's colour. Per-intensity gradations come from the database (tblintensity.display_color), not from CSS tokens. The rainbow Z1–Z5 palette of v1.0/v1.1 was wrong. */ /* 4.4.2 Zones The workout-level palette. Each zone owns multiple intensities; intensities default to the zone's colour. Hex values unchanged since v1.0. */ --cf-zone-endurance: #639922; --cf-zone-stamina: #378ADD; --cf-zone-strength: #E24B4A; --cf-zone-power: #EF9F27; --cf-zone-mixed: #14b8a6; /* 4.4.3 Periodisation Phases — v1.1 amendment Phases now alias the editorial ramp (§4.5). Vivid hues retired: they accidentally borrowed zone colours and implied semantic equivalences that are not athlete-agnostic (e.g. Season = amber implied "Season = Power", which only holds for sprinters). The editorial ramp is calm; legend carries the meaning. */ --cf-period-base: var(--cf-ink); --cf-period-transition: var(--cf-teal); --cf-period-speed: var(--cf-teal-500); --cf-period-season: var(--cf-teal-200); --cf-period-recovery: var(--cf-teal-50); /* Sprint 5 — wireframe-named aliases (build / peak / race). Decision Document v1.4 §4.4.3 retains the v1.1 semantic mapping; these aliases let templates use the shorter wireframe vocabulary without invalidating existing consumers of the original names. */ --cf-period-build: var(--cf-teal-500); /* = --cf-period-speed */ --cf-period-peak: var(--cf-teal-200); /* = --cf-period-season */ --cf-period-race: var(--cf-teal-50); /* = --cf-period-recovery */ /* ======================================================================== 4.5 EDITORIAL RAMP — Decision §4.5 (v1.1: also drives periodisation) Editorial charts (analytics, summary, report) use a fixed-position ramp. Same semantic value gets the same shade across every editorial chart regardless of proportional size. Mapping (zones): Endurance → --cf-ink Stamina → --cf-teal Strength → --cf-teal-500 Power → --cf-teal-200 Mixed → --cf-teal-50 (needs outline on white) Mapping (periodisation phases — also editorial as of v1.1): Base → --cf-ink (= --cf-period-base) Transition → --cf-teal (= --cf-period-transition) Speed → --cf-teal-500 (= --cf-period-speed) Season → --cf-teal-200 (= --cf-period-season) Recovery → --cf-teal-50 (= --cf-period-recovery, needs outline on white) Legend is mandatory on editorial charts. ======================================================================== */ /* ======================================================================== 4.6 DATA CATEGORY PALETTE — Decision §4.6 (NEW) For chips marking log entries, messages, or collection items by domain. Semantically distinct from portal colours — never use a portal-* token to colour a chip. ======================================================================== */ --cf-cat-training: var(--cf-teal); /* alias of teal */ --cf-cat-wellness: #7F77DD; /* tuned from legacy --purple */ --cf-cat-messages: #378ADD; /* ======================================================================== 4.7 STATUS COLOURS — Decision §4.7 (NEW) Outcome / state signals on chips, ribbons, toasts, messages. ======================================================================== */ --cf-status-success: var(--cf-teal); --cf-status-warning: #F59E0B; --cf-status-danger: #EF4444; --cf-status-info: #3B82F6; /* Soft background variants for ribbons and toast backgrounds */ --cf-status-success-soft: var(--cf-teal-50); --cf-status-warning-soft: #FEF3C7; --cf-status-danger-soft: #FEE2E2; --cf-status-info-soft: #DBEAFE; /* ======================================================================== 4.8 SURFACE & ELEVATION — Decision §4.8 (NEW) No shadows. No blur. No elevation layers. Cards differentiate from the page by border + fill swap only. ======================================================================== */ --cf-surface-page: #F5F5F5; --cf-surface-card: #FFFFFF; --cf-surface-inverse: var(--cf-ink); --cf-border-subtle: #E5E7EB; --cf-border-strong: #D1D5DB; /* ======================================================================== 4.9 NEUTRAL GRAY ALIAS — Decision §4.9 (NEW alias only) The full --gray-50 → --gray-900 ramp is retained in the legacy section. One semantic alias is added here. ======================================================================== */ --cf-text-mute: #6b7280; /* = --gray-500; eyebrow, metadata, timestamps */ /* ======================================================================== 4.10 AVATAR PALETTE — Decision §4.10 (NEW) Eight hues for hash(displayname) → colour. Slot 1 is reserved for self (always ink). Avatars render as sharp-cornered filled squares with first-two-initials in white, weight 500. ======================================================================== */ --cf-avatar-1: var(--cf-ink); /* self — always this */ --cf-avatar-2: #14b8a6; /* Teal */ --cf-avatar-3: #7F77DD; /* Purple */ --cf-avatar-4: #D85A30; /* Coral */ --cf-avatar-5: #EF9F27; /* Amber */ --cf-avatar-6: #D4537E; /* Pink */ --cf-avatar-7: #5F5E5A; /* Slate */ --cf-avatar-8: #3B6D11; /* Forest */ /* ======================================================================== 4.11 PLAN PALETTE — Decision §4.11 (v1.4, Sprint 5 Phase 0) Six hues for plan identification. Slot 1 (coral) is reserved for the primary plan; slots 2–6 are assigned by deterministic hash on plan ID via `window.CF.planColour(planId, isPrimary)`. Used by: plan-chip left border, workout-chip plan-identification stripe, multi-plan athlete profile context. Assignment rule: colour stays with the plan, not the position. Promoting a non-primary plan to primary moves it to slot 1 only for the duration of its primary status; the moment another plan is promoted in its place, this one returns to its hashed slot. Primary status is signalled by position (leftmost) and star (filled gold), not by hue swap. ======================================================================== */ --cf-plan-1: #D85A30; /* Coral — primary plan */ --cf-plan-2: #7F77DD; /* Purple */ --cf-plan-3: #2A9D8F; /* Deep teal */ --cf-plan-4: #E76F51; /* Terracotta */ --cf-plan-5: #6A4C93; /* Deep violet */ --cf-plan-6: #F4A261; /* Warm amber */ /* ======================================================================== 5 TYPOGRAPHY — Decision §5 Display face is new (Bebas Neue, hero moments only). Body face unchanged — see legacy --font-family-primary. ======================================================================== */ /* 5.1 Display face */ --cf-display-face: 'Bebas Neue', sans-serif; /* 5.3 Display XL — login hero, page-level hero treatments */ --cf-display-xl-size: clamp(56px, 6vw, 72px); --cf-display-xl-letter-spacing: 0.01em; --cf-display-xl-line-height: 0.95; /* 5.3 Display L — secondary hero treatments */ --cf-display-l-size: clamp(40px, 4.5vw, 48px); --cf-display-l-letter-spacing: 0.01em; --cf-display-l-line-height: 1.0; /* 5.4 Eyebrow specs are encoded in primitive CSS classes; not tokenised (small, self-contained, scattering them as tokens adds no value). Variant 1: 11px, letter-spacing 0.14em, uppercase, var(--cf-text-mute), with 8x8px square in var(--cf-teal). Variant 2: 10–11px, letter-spacing 0.12em, uppercase, var(--cf-text-mute), no square. */ /* ======================================================================== 7 MIGRATION ALIASES — Decision §7 Existing widgets reference the legacy names below. They keep working because the legacy block at the bottom of this file declares them. New code SHOULD use the --cf-* names; on widget touch, swap the reference rather than running a breaking mass rename. This section is a navigational aid only — it documents the mapping between old name and new name. The actual declarations are in the legacy block. ======================================================================== */ /* --teal → --cf-teal (same value) --red, --red-500 → --cf-status-danger (same value, new caps) --blue, --blue-500 → --cf-status-info (same value, new caps) --yellow → --cf-status-warning (same value, new caps) --purple, --purple-500 → --cf-cat-wellness (TUNED to #7F77DD; legacy --purple keeps #8b5cf6) */ /* ======================================================================== LEGACY / RETAINED — pre-Sprint-1 tokens preserved verbatim Every line below was in this file before Sprint 1 and is referenced by production widget CSS. Removed in a future sprint after each widget migrates to the --cf-* equivalent. ======================================================================== */ /* Brand teal (legacy) */ --teal: #14b8a6; --teal-dark: #0f766e; --teal-light: #5eead4; /* Accent palette (legacy) */ --orange: #ea580c; --green: #10b981; --green-dark: #059669; --blue: #3b82f6; --purple: #8b5cf6; --red: #ef4444; --yellow: #f59e0b; /* Numbered scale (legacy) */ --red-500: #ef4444; --red-600: #dc2626; --orange-500: #f97316; --green-500: #22c55e; --green-600: #16a34a; --yellow-500: #eab308; --blue-500: #3b82f6; --purple-500: #8b5cf6; /* Cool gray scale — Decision §4.9 explicitly retained */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* Semantic colour aliases (legacy) Note: --color-success and --color-danger differ in value from the new --cf-status-* equivalents. Migrate on widget touch. */ --color-success: #22c55e; /* legacy green; new --cf-status-success is teal */ --color-warning: #f59e0b; /* matches --cf-status-warning */ --color-error: #ef4444; /* matches --cf-status-danger */ --color-info: #3b82f6; /* matches --cf-status-info */ --color-danger: #dc2626; /* legacy darker red; new --cf-status-danger is #EF4444 */ /* Body typography (legacy — Decision §5.2 retains unchanged) */ --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'Courier New', Courier, monospace; /* Layout dimensions */ --global-nav-height: 48px; --sidebar-width: 220px; --sidebar-collapsed-width: 60px; --context-sidebar-width: 320px; /* Borders & radius — Decision §2 sharp corners rule */ --border-radius: 0; --border-radius-sm: 0; /* Shadows (legacy) Decision §4.8 explicitly says "No shadows, no blur, no elevation layers" — these tokens are kept only because existing widget CSS references them. New primitives must NOT introduce shadow refs. Sprint 2+ widget touches should remove shadow references. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.2); --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15); /* Transitions */ --transition-fast: 0.15s; --transition-normal: 0.2s; --transition-slow: 0.3s; }