/* ========================================================================== Fisioverse Design System v3 - Tokens Palette discipline: blue / white / black only. Greys are blue-tinted so they harmonise with the accent. Every text token below is paired with the surfaces it is allowed on; all pairs meet WCAG AA (4.5:1) for normal text. ink #0B1530 on canvas/bg/surface 16.9:1 body #2B3552 on canvas/bg/surface 11.2:1 muted #5C6785 on canvas 5.1:1 / on bg 4.7:1 / on surface-2 4.5:1 primary #0A5FE0 on canvas 5.4:1 (text-safe blue) on-primary-soft #0A4BB5 on primary-soft #E9F1FF 7.0:1 on-dark #F3F6FC on dark #0B1530 16.4:1 on-dark-muted #B3BDD5 on dark 9.0:1 / on dark-3 6.8:1 accent-on-dark #7FB2FF on dark 8.1:1 (blue text on dark surfaces) NEVER put --fs-primary text on a dark surface or --fs-ink on primary. ========================================================================== */ :root { /* ---- Brand -------------------------------------------------------- */ --fs-navy: #001860; --fs-primary: #0A5FE0; --fs-primary-hover: #0850C0; --fs-primary-active: #06408F; --fs-primary-bright: #1E7BFF; /* gradients, glows, data only */ --fs-primary-soft: #E9F1FF; --fs-on-primary: #FFFFFF; --fs-on-primary-soft: #0A4BB5; --fs-brand-gradient: linear-gradient(135deg, #001860 0%, #0A5FE0 62%, #1E7BFF 100%); --fs-focus-ring: rgba(10, 95, 224, .38); /* ---- Light surfaces --------------------------------------------- */ --fs-bg: #F5F7FB; --fs-canvas: #FFFFFF; --fs-surface-2: #EEF2F8; --fs-surface-3: #E3E9F3; /* ---- Dark surfaces (blue-black, never pure #000) ------------------ */ --fs-dark: #0B1530; --fs-dark-2: #111C3C; --fs-dark-3: #1A2750; --fs-dark-hairline: rgba(255, 255, 255, .10); --fs-dark-hairline-strong: rgba(255, 255, 255, .18); /* ---- Text --------------------------------------------------------- */ --fs-ink: #0B1530; --fs-body: #2B3552; --fs-muted: #5C6785; --fs-subtle: #8E97B0; /* decorative / >=18px only */ --fs-on-dark: #F3F6FC; --fs-on-dark-muted: #B3BDD5; --fs-accent-on-dark: #7FB2FF; /* ---- Hairlines ---------------------------------------------------- */ --fs-hairline: #E3E8F1; --fs-hairline-strong: #CBD3E3; /* ---- Semantic (fill vs text variants keep AA on light surfaces) --- */ --fs-success: #0E9F6E; --fs-success-text: #07704B; --fs-success-soft: #E4F6EE; --fs-warning: #D97706; --fs-warning-text: #8A4B00; --fs-warning-soft: #FDF1E1; --fs-danger: #DC2626; --fs-danger-text: #B4171C; --fs-danger-soft: #FCE8E8; --fs-info: var(--fs-primary); --fs-info-text: var(--fs-on-primary-soft); --fs-info-soft: var(--fs-primary-soft); /* ---- Semantic: interactive hover fills ---------------------------- */ --fs-primary-soft-hover: #DCE9FF; --fs-dark-3-hover: #24345F; --fs-danger-soft-hover: #F9D7D7; --fs-on-dark-btn-hover: #E9F1FF; /* ---- Chrome glass bars / scrim / toast ---------------------------- */ --fs-bar-bg: rgba(255, 255, 255, .86); --fs-scrim: rgba(11, 21, 48, .55); --fs-toast-bg: var(--fs-dark); --fs-toast-fg: var(--fs-on-dark); --fs-on-brand: #FFFFFF; /* ---- Live signal / data ------------------------------------------- */ --fs-emg-line: #1E7BFF; --fs-emg-line-soft: rgba(30, 123, 255, .22); --fs-emg-target: rgba(255, 255, 255, .72); --fs-emg-peak: #9CC5FF; --fs-emg-grid: rgba(255, 255, 255, .06); --fs-series-1: #0A5FE0; --fs-series-2: #0B1530; --fs-series-3: #6AA6FF; --fs-series-4: #8E97B0; --fs-chart-axis: #8E97B0; --fs-chart-grid: rgba(11, 21, 48, .07); --fs-chart-band: rgba(30, 123, 255, .10); /* ---- Biofeedback / muscle heat ramp (rest -> active -> peak) ----- */ --fs-muscle-rest: rgba(34, 197, 94, 0); --fs-muscle-active: #22C55E; --fs-muscle-peak: #4ADE80; --fs-muscle-glow: rgba(34, 197, 94, .6); --fs-muscle-opacity: .75; --fs-fatigue: #FFB547; /* "tired" accent (sweat, cheeks) */ --fs-fatigue-glow: rgba(255, 181, 71, .55); /* ---- Gamification ------------------------------------------------- */ --fs-gem: #1E7BFF; --fs-gem-soft: #E9F1FF; --fs-gem-text: #0A4BB5; --fs-energy: #F5B301; --fs-energy-soft: #FFF4CC; --fs-energy-text: #7A5600; --fs-streak: #FF6B2C; --fs-streak-soft: #FFE8DD; --fs-streak-text: #9A3A0E; --fs-xp: #22C55E; --fs-xp-soft: #E4F6EE; --fs-xp-text: #07704B; --fs-tier-bronze: #B87333; --fs-tier-silver: #9AA7BC; --fs-tier-gold: #E0B03A; --fs-tier-diamond: #5EC8FF; --fs-tier-emerald: #2ECC71; --fs-tier-mythic: #A855F7; --fs-tier-mystery: #1A1F3A; /* ---- Character "Fisi" (cartoon avatar) --------------------------- Warm skin, navy hair, brand-blue kit. Shorts are lifted off pure navy so the silhouette still reads on the dark stage. ------------------ */ --fs-char-skin: #F6CFAE; --fs-char-skin-light: #FFE3CB; --fs-char-skin-shade: #E4AE88; --fs-char-hair: #23304D; --fs-char-hair-light: #3A4A70; --fs-char-shirt: #1E7BFF; --fs-char-shirt-light: #5B9CFF; --fs-char-shirt-shade: #0A5FE0; --fs-char-shorts: #26335C; --fs-char-shorts-shade: #1A2750; --fs-char-shoe: #FFFFFF; --fs-char-shoe-accent: #1E7BFF; --fs-char-sole: #CBD3E3; --fs-char-outline: #0B1530; --fs-char-eye-white: #FFFFFF; --fs-char-cheek: rgba(255, 120, 120, .38); --fs-char-sweat: #9CD3FF; --fs-char-bench: #E3E9F3; --fs-char-bench-shade: #B9C4D8; --fs-char-shadow: rgba(11, 21, 48, .18); /* ---- Elevation ---------------------------------------------------- */ --fs-shadow-0: none; --fs-shadow-1: 0 1px 2px rgba(11, 21, 48, .06); --fs-shadow-2: 0 2px 4px rgba(11, 21, 48, .04), 0 12px 32px rgba(11, 21, 48, .08); --fs-shadow-3: 0 16px 48px rgba(11, 21, 48, .24); --fs-shadow-focus: 0 0 0 4px var(--fs-focus-ring); --fs-shadow-primary: 0 8px 24px rgba(10, 95, 224, .30); /* aliases */ --fs-shadow-card: var(--fs-shadow-2); --fs-shadow-card-hover: 0 4px 8px rgba(11, 21, 48, .05), 0 20px 40px rgba(11, 21, 48, .12); --fs-shadow-stage: var(--fs-shadow-3); --fs-shadow-glow-brand: 0 0 0 6px rgba(30, 123, 255, .18), var(--fs-shadow-primary); /* ---- Glass ---------------------------------------------------------- */ --fs-hud-bg: rgba(255, 255, 255, .82); --fs-hud-bg-dark: rgba(11, 21, 48, .70); --fs-hud-border: rgba(255, 255, 255, .55); --fs-hud-blur: saturate(160%) blur(18px); /* ---- Typography ---------------------------------------------------- */ --fs-font-display: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-hero-size: clamp(38px, 5vw, 56px); --fs-display-size: clamp(30px, 3.4vw, 40px); --fs-title-size: 28px; --fs-heading-size: 22px; --fs-lead-size: 18px; --fs-body-size: 15px; --fs-caption-size: 13px; --fs-fine-size: 12px; --fs-micro-size: 11px; /* ---- Spacing (4px base) ------------------------------------------- */ --fs-space-1: 4px; --fs-space-2: 8px; --fs-space-3: 12px; --fs-space-4: 16px; --fs-space-5: 20px; --fs-space-6: 24px; --fs-space-7: 32px; --fs-space-8: 48px; --fs-space-9: 64px; --fs-space-10: 96px; /* ---- Radius --------------------------------------------------------- */ --fs-radius-xs: 6px; --fs-radius-sm: 10px; --fs-radius-md: 14px; --fs-radius-lg: 20px; --fs-radius-xl: 28px; --fs-radius-pill: 9999px; /* ---- Chrome ------------------------------------------------------- */ --fs-header-h: 60px; --fs-rail-w: 248px; --fs-drawer-w: 300px; --fs-touch: 44px; /* ---- Motion ------------------------------------------------------- */ --fs-ease: cubic-bezier(.2, .8, .2, 1); --fs-ease-out: cubic-bezier(0, 0, .2, 1); --fs-transition-fast: 120ms var(--fs-ease); --fs-transition: 220ms var(--fs-ease); --fs-transition-slow: 360ms var(--fs-ease); /* ---- Legacy aliases (kept so untouched pages still resolve) ------ */ --fs-brand-blue: var(--fs-primary); --fs-brand-navy: var(--fs-navy); --fs-brand-blue-hover: var(--fs-primary-hover); --fs-brand-start: var(--fs-navy); --fs-brand-end: var(--fs-primary-bright); --fs-parchment: var(--fs-bg); --fs-pearl: var(--fs-canvas); --fs-tile-dark: var(--fs-dark); --fs-tile-dark-2: var(--fs-dark-2); --fs-tile-dark-3: var(--fs-dark-3); --fs-muted-strong: var(--fs-body); --fs-on-accent: var(--fs-on-primary); --fs-success-bg: var(--fs-success-soft); --fs-warning-bg: var(--fs-warning-soft); --fs-danger-bg: var(--fs-danger-soft); --fs-info-bg: var(--fs-info-soft); --fs-mannequin-body: var(--fs-surface-2); --fs-mannequin-outline: var(--fs-hairline-strong); --fs-tabbar-h: 0px; } /* ========================================================================== Dark theme. Applied by wwwroot/js/theme.js as (explicit choice or prefers-color-scheme when the user picked "system"). Mapping rule: dark backgrounds, black text -> white, dark blue -> light blue, every other dark-toned element -> its light counterpart. Text pairs below keep WCAG AA: ink #F3F6FC on canvas #121B36 15.1:1 body #D5DCEC on canvas 11.6:1 muted #A3AECB on canvas 7.1:1 / on bg 8.0:1 primary #7FB2FF on canvas 7.4:1 (light-blue text) on-primary #061B45 on primary #5B9CFF 7.3:1 (button label) ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; --fs-navy: #9CC5FF; --fs-primary: #5B9CFF; --fs-primary-hover: #7FB2FF; --fs-primary-active: #3D86F5; --fs-primary-bright: #7FB2FF; --fs-primary-soft: #17305E; --fs-on-primary: #061B45; --fs-on-primary-soft: #9CC5FF; --fs-brand-gradient: linear-gradient(135deg, #1E7BFF 0%, #5B9CFF 60%, #9CC5FF 100%); --fs-on-brand: #061B45; --fs-focus-ring: rgba(127, 178, 255, .5); --fs-bg: #0A1226; --fs-canvas: #121B36; --fs-surface-2: #1A2547; --fs-surface-3: #243158; --fs-dark: #060D22; --fs-dark-2: #0B1530; --fs-dark-3: #16224A; --fs-ink: #F3F6FC; --fs-body: #D5DCEC; --fs-muted: #A3AECB; --fs-subtle: #7C89AA; --fs-hairline: rgba(255, 255, 255, .10); --fs-hairline-strong: rgba(255, 255, 255, .20); --fs-success: #22B583; --fs-success-text: #6FDDB1; --fs-success-soft: rgba(34, 181, 131, .18); --fs-warning: #F59E0B; --fs-warning-text: #FFC46B; --fs-warning-soft: rgba(245, 158, 11, .18); --fs-danger: #EF4444; --fs-danger-text: #FF9A9A; --fs-danger-soft: rgba(239, 68, 68, .18); --fs-primary-soft-hover: #1E3B70; --fs-dark-3-hover: #1F2E5E; --fs-danger-soft-hover: rgba(239, 68, 68, .28); --fs-on-dark-btn-hover: #DCE9FF; --fs-bar-bg: rgba(10, 18, 38, .86); --fs-scrim: rgba(0, 0, 0, .62); --fs-toast-bg: #E9F1FF; --fs-toast-fg: #0B1530; --fs-series-1: #7FB2FF; --fs-series-2: #F3F6FC; --fs-series-3: #5B9CFF; --fs-series-4: #7C89AA; --fs-chart-axis: #7C89AA; --fs-chart-grid: rgba(255, 255, 255, .08); --fs-chart-band: rgba(127, 178, 255, .14); --fs-gem: #7FB2FF; --fs-gem-soft: #17305E; --fs-gem-text: #9CC5FF; --fs-energy: #FFC93C; --fs-energy-soft: rgba(245, 179, 1, .18); --fs-energy-text: #FFD96B; --fs-streak: #FF8A50; --fs-streak-soft: rgba(255, 107, 44, .18); --fs-streak-text: #FFB08A; --fs-xp: #4ADE80; --fs-xp-soft: rgba(34, 197, 94, .18); --fs-xp-text: #6FDDB1; --fs-tier-silver: #B8C3D6; --fs-tier-mystery: #2B3260; --fs-char-shorts: #2F3D6B; --fs-char-shorts-shade: #26335C; --fs-char-sole: #8E97B0; --fs-char-bench: #2B3760; --fs-char-bench-shade: #1A2547; --fs-char-shadow: rgba(0, 0, 0, .45); --fs-shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --fs-shadow-2: 0 2px 4px rgba(0, 0, 0, .25), 0 12px 32px rgba(0, 0, 0, .35); --fs-shadow-3: 0 16px 48px rgba(0, 0, 0, .55); --fs-shadow-primary: 0 8px 24px rgba(91, 156, 255, .30); --fs-shadow-card-hover: 0 4px 8px rgba(0, 0, 0, .25), 0 20px 40px rgba(0, 0, 0, .4); --fs-hud-bg: rgba(18, 27, 54, .84); --fs-hud-bg-dark: rgba(6, 13, 34, .74); --fs-hud-border: rgba(255, 255, 255, .12); } /* Registered so the avatar's loop mode can animate the driver variables themselves (smooth interpolation instead of discrete flips). Browsers without @property still work: the scrub/JS path sets the values directly. */ @property --fs-intensity { syntax: ""; inherits: true; initial-value: 0; } @property --fs-fatigue { syntax: ""; inherits: true; initial-value: 0; } @media (prefers-reduced-motion: reduce) { :root { --fs-transition-fast: 0ms; --fs-transition: 0ms; --fs-transition-slow: 0ms; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }