/* ============================================================================ Synergo — design tokens The single source of truth for colour, type, spacing, radius and motion. Components NEVER hard-code a colour; they read a token, so the whole product re-themes from this one file — which is also what lets the setup wizard restyle it to an institution's own colours at runtime. BRAND PALETTE Midnight Blue #102A43 depth, authority, the primary fill Electric Cyan #00B8FF energy, focus, live data White room to breathe Slate Gray #5B6770 secondary text Graphite #2D3748 body text, dark surfaces ONE THING WORTH KNOWING ABOUT THE CYAN. #00B8FF on white is 2.3:1 — well under the 4.5:1 text needs. It is a spectacular accent and an unreadable label. So it appears here in three calibrated forms: --brand-cyan the pure colour, for fills, rules, the mark, and anything on a dark surface (6.4:1 on Midnight) --brand-cyan-ink darkened to #0077A8 for cyan TEXT on white (5.0:1) --brand-cyan-wash a pale tint for active and selected backgrounds That is not the brand being watered down; it is the brand surviving contact with a real interface, where a coach reads this on a phone in a loud gym. ============================================================================ */ :root { /* ---- Brand ---- */ --brand-midnight: #102A43; --brand-cyan: #00B8FF; --brand-slate: #5B6770; --brand-graphite: #2D3748; /* Derived steps — the mark and the gradients read these. */ --brand-midnight-deep: #0A1C2D; --brand-midnight-lift: #1B3D5C; --brand-cyan-deep: #0091DB; --brand-cyan-lift: #6FE0FF; --brand-cyan-ink: #0077A8; /* AA on white */ --brand-cyan-wash: #E4F6FF; /* The mark's solid half. On light it is Midnight; on dark that would vanish into the surface, so it lifts to near-white — the same inversion the app icon uses. */ --mark-ink: var(--brand-midnight); /* ---- Semantic surface + text (light) ---- */ --bg: #F4F7FA; /* cool and clean, not clinical white */ --surface: #FFFFFF; --surface-2: #F8FAFC; --surface-3: #EDF2F7; --ink: var(--brand-midnight); /* headings — 15.5:1 on white */ --body: var(--brand-graphite); /* body — 12.6:1 */ --muted: var(--brand-slate); /* secondary — 5.6:1 */ --line: #DDE5ED; --line-soft: #EDF2F7; /* ---- Accent + focus ---- */ --accent: var(--brand-midnight); --accent-ink: #FFFFFF; /* text on an accent fill */ --accent-tint: var(--brand-cyan-wash); --accent-edge: var(--brand-cyan); /* the electric highlight */ --link: var(--brand-cyan-ink); --focus: #0091DB; /* Kept as aliases so the setup wizard and any older rule still resolve. */ --planetary: var(--brand-midnight); --planetary-600: #1B3D5C; --planetary-700: #0A1C2D; --galaxy: var(--brand-midnight-deep); --universe: var(--brand-slate); /* ---- Status ---- */ --ok:#0F7B4F; --ok-bg:#E3F6EC; --ok-line:#B7E4CC; --warn:#8A5A00; --warn-bg:#FFF4E0; --warn-line:#F3DCAF; --bad:#B3261E; --bad-bg:#FDEAE8; --bad-line:#F3C7C3; --info:#0077A8; --info-bg:#E4F6FF; --info-line:#B8E6FA; --neutral:#5B6770; --neutral-bg:#EEF2F6;--neutral-line:#DCE4EC; /* ---- Type scale (1.20 minor third), fluid where it helps ---- */ /* Text and icons sitting ON a coloured fill - a sport colour, an avatar, a status pill. NOT --accent-ink, which flips to near-black in dark mode and would disappear against a mid-blue chip that does not flip with it. */ --on-color: #FFFFFF; /* The toast is always dark, in both themes, so its icon needs a green that reads on dark rather than the themed --ok. */ --ok-on-dark: #8FF0B5; /* The phone mock bezel in the Athlete App preview. Darker than any surface token on purpose: it is a picture of a device, not a surface. */ --device-bezel: #14203F; --font: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-2xs: 0.68rem; /* 11 - micro labels only */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.9375rem;/* 15 */ --fs-md: 1.0625rem; /* 17 */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: clamp(1.4rem, 1.1rem + 1.4vw, 1.75rem); --fs-2xl: clamp(1.7rem, 1.2rem + 2.4vw, 2.25rem); --lh-tight: 1.15; --lh: 1.5; /* ---- Spacing (4px base) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* ---- Radius, elevation, motion ---- */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(16,42,67,.06), 0 2px 6px rgba(16,42,67,.05); --shadow: 0 10px 30px -16px rgba(16,42,67,.34); --shadow-lg: 0 24px 50px -24px rgba(16,42,67,.44); --ease: cubic-bezier(.22,.61,.2,1); --dur: .18s; /* ---- Layout ---- */ --sidebar-w: 268px; --topbar-h: 60px; --tap: 44px; /* minimum touch target */ --content-max: 1200px; } /* --------------------------------------------------------------------------- Dark theme. Follows the OS by default; the in-app toggle stamps data-theme on and wins in both directions. Dark is where Electric Cyan earns its name: against Midnight it reaches 6.4:1, so here it carries links, active states and live figures at full strength rather than needing the darkened variant. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --mark-ink:#E8F3FA; --bg:#0A1622; --surface:#102A43; --surface-2:#15334F; --surface-3:#1D405F; --ink:#F2F7FB; --body:#C8D6E2; --muted:#93A6B6; --line:#22415E; --line-soft:#1A3550; --accent:#00B8FF; --accent-ink:#06202F; --accent-tint:#15334F; --accent-edge:#6FE0FF; --link:#5FD2FF; --focus:#6FE0FF; --planetary:#00B8FF; --planetary-600:#0091DB; --planetary-700:#006C9E; --galaxy:#0A1622; --universe:#93A6B6; --ok:#4ECB8B; --ok-bg:#0F2E22; --ok-line:#1E5540; --warn:#E8B45F; --warn-bg:#2E2413; --warn-line:#5A4620; --bad:#F58A80; --bad-bg:#331714; --bad-line:#5E2822; --info:#5FD2FF; --info-bg:#0E2E42; --info-line:#1D4E6B; --neutral:#9BADBD; --neutral-bg:#17304A;--neutral-line:#284663; --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow:0 12px 34px -18px rgba(0,0,0,.72); --shadow-lg:0 26px 54px -26px rgba(0,0,0,.78); } } :root[data-theme="light"] { --bg:#F4F7FA; --surface:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#EDF2F7; --ink:var(--brand-midnight); --body:var(--brand-graphite); --muted:var(--brand-slate); --line:#DDE5ED; --line-soft:#EDF2F7; --accent:var(--brand-midnight); --accent-ink:#FFFFFF; --accent-tint:var(--brand-cyan-wash); --accent-edge:var(--brand-cyan); --link:var(--brand-cyan-ink); --focus:#0091DB; --planetary:var(--brand-midnight); --planetary-600:#1B3D5C; --planetary-700:#0A1C2D; --galaxy:var(--brand-midnight-deep); --universe:var(--brand-slate); --ok:#0F7B4F;--ok-bg:#E3F6EC;--ok-line:#B7E4CC; --warn:#8A5A00;--warn-bg:#FFF4E0;--warn-line:#F3DCAF; --bad:#B3261E;--bad-bg:#FDEAE8;--bad-line:#F3C7C3; --info:#0077A8;--info-bg:#E4F6FF;--info-line:#B8E6FA; --neutral:#5B6770;--neutral-bg:#EEF2F6;--neutral-line:#DCE4EC; } :root[data-theme="dark"] { --mark-ink:#E8F3FA; --bg:#0A1622; --surface:#102A43; --surface-2:#15334F; --surface-3:#1D405F; --ink:#F2F7FB; --body:#C8D6E2; --muted:#93A6B6; --line:#22415E; --line-soft:#1A3550; --accent:#00B8FF; --accent-ink:#06202F; --accent-tint:#15334F; --accent-edge:#6FE0FF; --link:#5FD2FF; --focus:#6FE0FF; --planetary:#00B8FF; --planetary-600:#0091DB; --planetary-700:#006C9E; --galaxy:#0A1622; --universe:#93A6B6; --ok:#4ECB8B;--ok-bg:#0F2E22;--ok-line:#1E5540; --warn:#E8B45F;--warn-bg:#2E2413;--warn-line:#5A4620; --bad:#F58A80;--bad-bg:#331714;--bad-line:#5E2822; --info:#5FD2FF;--info-bg:#0E2E42;--info-line:#1D4E6B; --neutral:#9BADBD;--neutral-bg:#17304A;--neutral-line:#284663; --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow:0 12px 34px -18px rgba(0,0,0,.72); --shadow-lg:0 26px 54px -26px rgba(0,0,0,.78); }