/* ============================================================ RunMax Design Tokens v1 ============================================================ Central token system for the whole app. Every component CSS file should reference these variables — no hardcoded values. Load order: design-tokens.css MUST load BEFORE all other CSS. v1.1 (Fase E1) — aligned with runmax-design-system handoff: added brand tokens (red/black/white), Flama brand face, extended marketing type scale, bold/black weights, radius-2xl (modal sheets) and brand/blue glow shadows. v1.2 (Slice 0) — Training Analytics redesign foundation: eyebrow + section-header tokens, hero-metric scale, coach prompt tone palette, heat ring tokens, range chip tokens, drift line + chart axis tokens. All additive — no v1.1 token changed. ============================================================ */ /* -------- BRAND FONT — Flama (marketing / hero only) -------- */ /* Product UI continues to use Inter/Outfit; Flama is reserved for brand moments per handoff rules. */ @font-face { font-family: 'Flama'; src: url('../fonts/flama/Flama-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Flama'; src: url('../fonts/flama/Flama-Book.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Flama'; src: url('../fonts/flama/Flama-BookItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Flama'; src: url('../fonts/flama/Flama-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Flama'; src: url('../fonts/flama/Flama-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Flama'; src: url('../fonts/flama/Flama-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Flama'; src: url('../fonts/flama/Flama-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } :root { /* -------------------------------------------------------- BRAND — logo + marketing palette -------------------------------------------------------- */ --brand-red: #E3261B; /* "MAX" red from the wordmark */ --brand-red-deep: #B81D14; /* shadow / hover */ --brand-black: #0B0E14; /* "RUN" outline + darkest UI bg */ --brand-white: #FFFFFF; /* -------------------------------------------------------- COLORS — Background hierarchy (darkest → lightest) -------------------------------------------------------- */ --bg-primary: #0B0E14; --bg-secondary: #111620; --bg-card: #151921; --bg-card-hover: #1C2130; --bg-elevated: #1E2433; --bg-surface: #252B3A; /* Accent colors */ --accent-blue: #4F7DF3; --accent-green: #38EF7D; --accent-amber: #F59E0B; --accent-red: #EF4444; --accent-purple: #9D6BFF; --accent-cyan: #22D3EE; /* Semantic accent aliases */ --accent-primary: var(--accent-blue); --accent-success: var(--accent-green); --accent-warning: var(--accent-amber); --accent-danger: var(--accent-red); /* Session-type accent colors (calendar cards) */ --color-planned: var(--accent-blue); --color-actual: var(--accent-green); --color-strength: var(--accent-purple); --color-recovery: #64748B; --color-race: var(--accent-amber); /* Text hierarchy */ --text-primary: #F0F2F5; --text-secondary: #8B95AD; --text-muted: #5A6478; --text-accent: var(--accent-primary); --text-inverse: #0B0E14; /* text on brand-red surfaces */ /* Borders */ --border-color: rgba(255, 255, 255, 0.07); --border-subtle: rgba(255, 255, 255, 0.04); --border-focus: var(--accent-primary); /* -------------------------------------------------------- TYPOGRAPHY -------------------------------------------------------- */ --font-brand: 'Flama', 'Inter', system-ui, sans-serif; /* marketing / hero only */ --font-ui: 'Inter', 'Outfit', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; /* Type scale (minor third — 1.125 ratio) */ --text-2xs: 0.65rem; /* 10.4px — micro labels */ --text-xs: 0.72rem; /* 11.5px — secondary metrics */ --text-sm: 0.80rem; /* 12.8px — card body, labels */ --text-base: 0.875rem; /* 14px — default body */ --text-lg: 1.0rem; /* 16px — card titles */ --text-xl: 1.15rem; /* 18.4px — section headers */ --text-2xl: 1.35rem; /* 21.6px — page titles */ --text-3xl: 1.75rem; /* 28px — marketing h2 */ --text-4xl: 2.25rem; /* 36px — marketing h1 */ --text-5xl: 3.25rem; /* 52px — hero */ /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* Flama hero italic lockup */ /* Line heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* -------------------------------------------------------- SPACING — 4px base grid -------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ /* -------------------------------------------------------- BORDERS & RADIUS -------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 22px; /* modal sheets */ --radius-full: 9999px; /* -------------------------------------------------------- SHADOWS -------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.40); --shadow-brand: 0 18px 42px rgba(227, 38, 27, 0.28); /* brand CTA glow */ --shadow-blue: 0 18px 42px rgba(37, 99, 235, 0.28); /* AI launcher glow */ /* -------------------------------------------------------- TRANSITIONS -------------------------------------------------------- */ --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --transition-fast: 120ms var(--ease-default); --transition-normal: 200ms var(--ease-default); --transition-slow: 350ms var(--ease-default); /* -------------------------------------------------------- Z-INDEX SCALE -------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-modal: 500; --z-toast: 800; --z-assistant: 1000; /* -------------------------------------------------------- COMPONENT TOKENS — derived from primitives -------------------------------------------------------- */ /* Cards */ --card-bg: var(--bg-card); --card-bg-hover: var(--bg-card-hover); --card-border: var(--border-subtle); --card-radius: var(--radius-md); --card-padding: var(--space-2) var(--space-3); --card-shadow: var(--shadow-sm); /* Pills / badges */ --pill-radius: var(--radius-full); --pill-padding: var(--space-1) var(--space-2); --pill-font-size: var(--text-2xs); /* Input fields */ --input-bg: var(--bg-secondary); --input-border: var(--border-color); --input-radius: var(--radius-md); --input-padding: var(--space-2) var(--space-3); /* Toast notifications */ --toast-bg: var(--bg-elevated); --toast-radius: var(--radius-md); --toast-shadow: var(--shadow-lg); /* Gauge / readiness */ --gauge-track: var(--bg-surface); --gauge-low: var(--accent-red); --gauge-mid: var(--accent-amber); --gauge-high: var(--accent-green); /* Radar chart */ --radar-grid: rgba(255, 255, 255, 0.06); --radar-label: var(--text-muted); --radar-plan: rgba(255, 255, 255, 0.15); --radar-plan-stroke: rgba(255, 255, 255, 0.35); --radar-actual: var(--accent-primary); --radar-actual-stroke: var(--accent-primary); /* Radar SVG text — sub-scale below --text-2xs because the labels sit inside a small viewBox; kept as first-class tokens so no bare px survives in component CSS. */ --radar-label-size: 0.625rem; /* 10px */ --radar-value-size: 0.5625rem; /* 9px */ --radar-label-size-mobile: 0.5rem; /* 8px */ --radar-value-size-mobile: 0.4375rem; /* 7px */ /* ============================================================ v1.2 — Training Analytics redesign tokens (Slice 0) Additive only. New tokens use the --rm- prefix to mark them as part of the v1.2 namespace; later slices will migrate legacy tokens to this prefix and keep aliases. ============================================================ */ /* -------- Eyebrow (small uppercase label above sections) -- */ --rm-eyebrow-size: 0.6875rem; /* 11px */ --rm-eyebrow-weight: var(--weight-semibold); --rm-eyebrow-tracking: 0.12em; --rm-eyebrow-color: var(--text-muted); --rm-eyebrow-transform: uppercase; /* -------- Section header (the H2-equivalent above a section) */ --rm-section-title-size: 1.5rem; /* 24px */ --rm-section-title-weight: var(--weight-bold); --rm-section-title-tracking: -0.01em; --rm-section-title-color: var(--text-primary); --rm-section-subtitle-size: 0.875rem; /* 14px */ --rm-section-subtitle-color: var(--text-secondary); /* -------- Hero metric (large monospace metric on masthead) - */ --rm-hero-metric-size: 2.5rem; /* 40px */ --rm-hero-metric-weight: var(--weight-semibold); --rm-hero-metric-tracking: -0.03em; --rm-hero-metric-family: var(--font-mono); --rm-hero-metric-label-size: 0.75rem; /* 12px */ --rm-hero-metric-label-color: var(--text-muted); /* -------- Coach prompt tones (priority / watch / info / success) These map a tone keyword to a triplet of colors: border, bg-tint, accent. Use them in the prompt card CSS as: border-color: var(--rm-tone-priority-border); background: var(--rm-tone-priority-tint); color: var(--rm-tone-priority-accent); Tints are kept low-alpha so they read as a subtle wash on the dark base; accents are saturated for icons/headers. */ --rm-tone-priority-border: rgba(239, 68, 68, 0.35); --rm-tone-priority-tint: rgba(239, 68, 68, 0.08); --rm-tone-priority-accent: var(--accent-red); --rm-tone-watch-border: rgba(245, 158, 11, 0.35); --rm-tone-watch-tint: rgba(245, 158, 11, 0.08); --rm-tone-watch-accent: var(--accent-amber); --rm-tone-info-border: rgba(79, 125, 243, 0.35); --rm-tone-info-tint: rgba(79, 125, 243, 0.08); --rm-tone-info-accent: var(--accent-blue); --rm-tone-success-border: rgba(56, 239, 125, 0.30); --rm-tone-success-tint: rgba(56, 239, 125, 0.07); --rm-tone-success-accent: var(--accent-green); /* -------- Heat ring (compact heat row gauge) ---------------- */ --rm-heat-ring-size: 56px; --rm-heat-ring-thickness: 6px; --rm-heat-ring-track: rgba(255, 255, 255, 0.06); --rm-heat-ring-fill-low: var(--accent-blue); /* 0–40 HAI */ --rm-heat-ring-fill-mid: var(--accent-amber); /* 41–70 HAI */ --rm-heat-ring-fill-high: var(--accent-red); /* 71–100 HAI */ --rm-heat-ring-label-size: 0.75rem; /* 12px */ --rm-heat-ring-value-size: 0.9375rem; /* 15px, mono */ /* -------- Range chips (4w / 12w / 24w / season selector) ---- */ --rm-chip-bg: transparent; --rm-chip-bg-hover: rgba(255, 255, 255, 0.04); --rm-chip-bg-active: var(--bg-elevated); --rm-chip-border: var(--border-color); --rm-chip-border-active: rgba(255, 255, 255, 0.18); --rm-chip-color: var(--text-secondary); --rm-chip-color-active: var(--text-primary); --rm-chip-padding: var(--space-2) var(--space-3); --rm-chip-radius: var(--radius-full); --rm-chip-font-size: var(--text-xs); --rm-chip-font-weight: var(--weight-medium); /* -------- Drift line (small sparkline on hero metrics) ------ */ --rm-drift-stroke: 2px; --rm-drift-color-up: var(--accent-green); --rm-drift-color-down: var(--accent-red); --rm-drift-color-flat: var(--text-muted); /* -------- Chart axes (used by all chart cards) -------------- */ --rm-axis-grid: rgba(255, 255, 255, 0.05); --rm-axis-tick: var(--text-muted); --rm-axis-label: var(--text-secondary); --rm-axis-label-size: 0.6875rem; /* 11px */ /* -------- Section accordion (existing pattern, tokenized) --- */ --rm-accordion-gap: var(--space-4); --rm-accordion-header-py: var(--space-4); --rm-accordion-header-px: var(--space-5); --rm-accordion-body-pt: var(--space-2); --rm-accordion-body-pb: var(--space-5); --rm-accordion-body-px: var(--space-5); /* ============================================================ v1.3 — Design audit remediation (P0 a/b/c) Adds the tokens authors kept inventing locally so the right choice is the easy one. Additive only — no prior token changed. ============================================================ */ /* -------- One extra accent (fills the amber → red gap) ------ */ --accent-orange: #F97316; /* -------- Text-legible accent tints (kills tint drift) ------ Use these when an accent must sit as text on --bg-card/-primary. Replaces the freelance #6BF2A0 / #8EB0FF / #F5B849 / #F78787 variants scattered across dashboard.css, calendar.css, runmax-kit.css, season.css and admin/builder controllers. */ --accent-blue-text: #8EB0FF; --accent-green-text: #6BF2A0; --accent-amber-text: #F5B849; --accent-red-text: #F78787; --accent-purple-text: #B893FF; --accent-cyan-text: #7FE6F5; --accent-orange-text: #FFB37A; /* -------- Canonical HR-zone scale (cool → hot) -------------- Single source of truth shared by Training Analytics zone bar and dashboard zone chips. Don't re-pick per page. */ --zone-1: var(--accent-blue); /* Z1 recovery / easy #4F7DF3 */ --zone-2: var(--accent-green); /* Z2 aerobic #38EF7D */ --zone-3: var(--accent-amber); /* Z3 tempo #F59E0B */ --zone-4: var(--accent-orange); /* Z4 threshold #F97316 */ --zone-5: var(--accent-red); /* Z5 VO2 max / sprint #EF4444 */ /* Companion text tints for zone labels on dark backgrounds */ --zone-1-text: var(--accent-blue-text); --zone-2-text: var(--accent-green-text); --zone-3-text: var(--accent-amber-text); --zone-4-text: var(--accent-orange-text); --zone-5-text: var(--accent-red-text); /* -------- Partner / vendor brand colors --------------------- */ --partner-garmin: #11B5E4; --partner-coros: #FF6B35; --partner-strava: #FC4C02; /* -------- Sport / activity palette (governed rainbow) ------- Values mirror the exact colours runmax-kit.css used as freelance literals before v1.3 — promoting to tokens governs the scale without changing any visuals. Per-sport coding is fine; ungoverned isn't. */ --sport-run: var(--accent-blue); /* road run */ --sport-trail: #65D695; /* trail */ --sport-treadmill: #7C9DFF; /* treadmill */ --sport-track: #5B7BD9; /* track */ --sport-cycling: var(--accent-cyan); /* road cycling */ --sport-mtb: #10B981; /* MTB */ --sport-ebike: #06B6D4; /* e-bike */ --sport-swim: #3B82F6; /* pool swim */ --sport-open-water: #0EA5E9; /* open water */ --sport-rowing: #06AED6; /* rowing */ --sport-paddleboard: #0891B2; /* SUP */ --sport-hiking: #84CC16; /* hiking */ --sport-walking: #A3B18A; /* walking */ --sport-skiing: #7DD3FC; /* skiing */ --sport-strength: var(--accent-amber); /* strength */ --sport-yoga: #A78BFA; /* yoga */ --sport-pilates: #C084FC; /* pilates */ --sport-cardio: var(--accent-red); /* cardio */ --sport-heat-active: var(--accent-amber); /* heat active */ --sport-heat-sauna: var(--accent-red); /* sauna */ --sport-heat-bath: var(--accent-orange); /* ice/hot bath */ --sport-recovery: #94A3B8; /* recovery */ --sport-rest: var(--color-recovery); /* rest day */ --sport-other: #94A3B8; /* other */ /* -------- Grade ramp (Race Analytics + race-planner grade overlay) -- 11-step diverging palette: deep-blue (steep descent) -> mid blue -> light blue -> slate (flat) -> yellow -> orange -> red -> dark red (steep ascent). Promoted from inline literals in RaceAnalyticsController and race-planner.css so the scale is governed in one place. Data-viz exception applies — these are chromatic data colours, not chrome. */ --grade-step-1: #0B1A4D; /* < -25% — deep descent */ --grade-step-2: #15257A; /* -25 to -20 */ --grade-step-3: #1D3AA8; /* -20 to -15 */ --grade-step-4: #2F5FD8; /* -15 to -10 */ --grade-step-5: #5D8AF2; /* -10 to -5 */ --grade-step-6: #3A4252; /* +/- 5% — flat slate */ --grade-step-7: #FFD54A; /* +5 to +10 */ --grade-step-8: var(--accent-orange); /* +10 to +15 */ --grade-step-9: #FF6A1F; /* +15 to +20 */ --grade-step-10: var(--brand-red); /* +20 to +25 */ --grade-step-11: #8A1208; /* > +25% — steep ascent */ } /* ============================================================ TEXT LEGIBILITY — dark overlay for text on visual elements ============================================================ */ .text-over-visual { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); } /* ============================================================ METRIC TEXT — monospace for all numbers / metrics / code ============================================================ Non-negotiable rule from the design system: every number the user reads is tabular-nums JetBrains Mono with -0.02em track. That includes inline and , so they line up with metric values rather than drifting into proportional land. */ .metric, [data-metric], code, kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* ============================================================ Desktop density (2026-07-07) — render the whole app at 75% scale so the layout Max previously got via 75% browser zoom is the default at 100% zoom. Lives here (not ViewHelper's inline CSS) so pages with their own — season canvas, wizard, training preview — get the same density. Zoom sits on BODY, not html: zooming the root scroller desynchronizes window.scrollY vs getBoundingClientRect and breaks scroll-anchoring math (see calendar fix 2026-07-07). Per CSS Viewport L1, zoom also multiplies vh/vw lengths, so body min-height is compensated. Tune via --app-desktop-zoom. ============================================================ */ :root { --app-desktop-zoom: 1; } @media (min-width: 1024px) { :root { --app-desktop-zoom: 0.75; } body { zoom: var(--app-desktop-zoom); min-height: calc(100vh / var(--app-desktop-zoom)); } }