/* ============================================================================ 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; /* ======================================================================== 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); /* ======================================================================== 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 */ /* ======================================================================== 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; }