/* ========================================================================== MINDFULL FOCUS — DESIGN TOKENS Version 1.5.0 · Canonical source of truth for all surfaces Web · GRIP app · PDF guides · Brevo email · Ads RULE: Never hardcode a hex value in product code. Reference a token. If a value you need is missing, add it here first. The version above is stamped from VERSION by build.sh, and build.sh --check fails if it drifts. See CHANGELOG.md for the full history. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. INK — the single dark Replaces the four competing darks previously in use: #000000 (profile guides) · #181828 (G-series PDF) #141414 (app) · #111111 (website) ---------------------------------------------------------------------- */ --mf-ink-900: #000000; /* deepest — full-bleed covers, hero backgrounds */ --mf-ink-800: #141414; /* PRIMARY DARK — app chrome, sidebars, cards */ --mf-ink-700: #222222; /* raised surface on dark, hover states */ --mf-ink-600: #3A3A3A; /* borders and dividers on dark */ --mf-ink-400: #757575; /* disabled text on dark */ --mf-ink-300: #9A9A9A; /* secondary text on dark — 5.4:1 on ink-800 */ --mf-ink-200: #BDBDBD; /* body text on dark */ /* ---------------------------------------------------------------------- 2. PAPER — the light surfaces ---------------------------------------------------------------------- */ --mf-paper: #F6F5F2; /* page background — warm, never pure white */ --mf-surface: #FFFFFF; /* cards and raised panels on paper */ --mf-paper-alt: #EFEEE9; /* alternating rows, quiet callout blocks */ --mf-rule: #E2E0DA; /* hairline borders and dividers on light */ /* ---------------------------------------------------------------------- 3. GOLD — brand only Gold identifies Mindfull Focus. It is NOT a category or module color. Permitted roles: logo, primary CTA, active navigation. That is all. ---------------------------------------------------------------------- */ --mf-gold-900: #6B4B0C; /* text on gold tints, deepest */ --mf-gold-700: #8C6310; /* TEXT-SAFE GOLD — 5.37:1 on white */ --mf-gold-600: #C89B32; /* pressed/active state of gold-500 */ --mf-gold-500: #E2B448; /* PRIMARY UI GOLD — buttons, active nav */ --mf-gold-400: #FDCF28; /* logo core value — hover on gold, accents dark */ --mf-gold-300: #F7D77A; /* dividers and rules on dark */ --mf-gold-100: #FAEBC4; /* borders on gold tint blocks */ --mf-gold-50: #FCF6E6; /* tinted callout backgrounds on paper */ /* ---------------------------------------------------------------------- MEDAL ACCENTS — SILVER & BRONZE · the podium family alongside gold Sport-rooted: gold, silver, bronze. Silver and bronze support medal- themed moments — progression tiers, milestones, celebration. They are never pillar, status, or CTA colors; the primary CTA stays gold. ---------------------------------------------------------------------- */ --mf-silver-700: #565B61; /* text-safe on light — 6.3:1 on white */ --mf-silver-500: #9BA1A8; /* base — medal fills, tier chips */ --mf-silver-300: #C9CDD2; /* accents and rules on dark */ --mf-silver-50: #F0F1F3; /* tint blocks on paper */ --mf-on-silver: #141414; /* ink text on silver fills */ --mf-bronze-700: #6E441F; /* text-safe on light — 7.1:1 on white */ --mf-bronze-500: #A96D2E; /* base — medal fills, tier chips */ --mf-bronze-300: #D9A66A; /* accents and rules on dark */ --mf-bronze-50: #F7EEE2; /* tint blocks on paper */ --mf-on-bronze: #FFFFFF; /* white text on bronze fills */ /* Metallic gradient — RESERVED for the logo mark and hero moments. Never on buttons, badges, or body UI. */ --mf-gold-metal: linear-gradient(135deg, #E3A828 0%, #FDD53A 45%, #FBF293 100%); --mf-on-gold: #141414; /* gold never carries white text */ /* ---------------------------------------------------------------------- 4. GRIP PILLARS Four-way category system. Gold is deliberately absent. ---------------------------------------------------------------------- */ /* G — Générer l'énergie · teal · vitality, ignition */ --mf-g-base: #0C7F76; /* 4.87:1 with white */ --mf-g-light: #4FD1C0; --mf-g-tint: #E4F2F0; --mf-g-deep: #08544E; --mf-on-g: #FFFFFF; /* R — Renforcer ses défenses · blue · solidity, armor */ --mf-r-base: #245C9E; /* 6.78:1 with white */ --mf-r-light: #7BA5E0; --mf-r-tint: #E7EEF7; --mf-r-deep: #173D6A; --mf-on-r: #FFFFFF; /* I — Intervenir rapidement · orange · immediacy, alertness Carries INK text, not white — same pattern as the gold CTA. */ --mf-i-base: #F2711C; /* 5.82:1 with ink-800 */ --mf-i-light: #FF9A4D; --mf-i-tint: #FDEDE0; --mf-i-deep: #8A3D08; --mf-on-i: #141414; /* P — Protéger sa progression · purple · permanence, depth */ --mf-p-base: #7040A8; /* 7.03:1 with white */ --mf-p-light: #B08FE8; --mf-p-tint: #F0EAF8; --mf-p-deep: #4A2870; --mf-on-p: #FFFFFF; /* Tint blocks for pillar chips sitting on --mf-ink-800 */ --mf-g-tint-dark: #123331; --mf-r-tint-dark: #1B2E47; --mf-i-tint-dark: #3B2A1B; --mf-p-tint-dark: #2B2044; /* ---------------------------------------------------------------------- 5. SEMANTIC — status and feedback Success green is YELLOW-leaning (#437F27). Pillar G teal is BLUE-leaning (#0C7F76). This separation is deliberate and load-bearing: it lets a "session complétée" check and a G-pillar badge sit on the same screen without reading as the same thing. Do not shift either toward the other. ---------------------------------------------------------------------- */ --mf-success: #437F27; --mf-success-light: #7CC24E; /* success marks on dark surfaces */ --mf-success-tint: #EDF4E4; --mf-success-deep: #2C5619; --mf-on-success: #FFFFFF; --mf-danger: #B3352F; --mf-danger-light: #E8776F; /* error text on dark surfaces */ --mf-danger-tint: #FAEAE9; --mf-danger-deep: #7A211C; --mf-on-danger: #FFFFFF; --mf-info: #245C9E; /* = pillar R blue */ --mf-info-light: #7BA5E0; --mf-info-tint: #E7EEF7; --mf-info-deep: #173D6A; --mf-on-info: #FFFFFF; /* Performance gauge scale — ordinal, low to high. A separate system from pillar identity. Never mixed in one component. */ --mf-scale-1: #B3352F; --mf-scale-2: #D8843C; --mf-scale-3: #E2B448; --mf-scale-4: #8ABA5A; --mf-scale-5: #3C6630; /* ---------------------------------------------------------------------- 6. TEXT All values below verified against --mf-paper (#F6F5F2). ---------------------------------------------------------------------- */ --mf-text-primary: #141414; /* 15.9:1 */ --mf-text-secondary: #4A4A5E; /* 8.0:1 */ --mf-text-muted: #6A6A80; /* 4.9:1 — was #74748A at 4.24:1, failed AA */ --mf-text-disabled: #A0A0B0; /* 2.5:1 — NON-TEXT ONLY, never body copy */ --mf-text-inverse: #FFFFFF; --mf-text-link: #8C6310; /* gold-700 — the only gold safe as text */ /* ---------------------------------------------------------------------- 7. INTERACTION STATES Every interactive element implements all six. A control with only a hover state is not finished. ---------------------------------------------------------------------- */ /* Focus — R blue, not gold. Gold at 1.9:1 on paper is not a visible ring. */ --mf-focus-ring-color: #245C9E; --mf-focus-ring-color-dark: #7BA5E0; /* on ink surfaces */ --mf-focus-ring-width: 3px; --mf-focus-ring-offset: 2px; --mf-focus-ring: 0 0 0 var(--mf-focus-ring-offset) var(--mf-paper), 0 0 0 calc(var(--mf-focus-ring-offset) + var(--mf-focus-ring-width)) var(--mf-focus-ring-color); --mf-focus-ring-dark: 0 0 0 var(--mf-focus-ring-offset) var(--mf-ink-800), 0 0 0 calc(var(--mf-focus-ring-offset) + var(--mf-focus-ring-width)) var(--mf-focus-ring-color-dark); /* Hover */ --mf-hover-gold: #FDCF28; /* gold-400, lighter than rest */ --mf-hover-surface: #EFEEE9; /* neutral surface on paper */ --mf-hover-dark: #222222; /* neutral surface on ink */ --mf-hover-overlay: rgba(20, 20, 31, 0.04); /* Active / pressed */ --mf-active-gold: #C89B32; /* gold-600, darker than rest */ --mf-active-surface: #E2E0DA; --mf-active-dark: #3A3A3A; --mf-active-overlay: rgba(20, 20, 31, 0.08); --mf-active-scale: 0.98; /* Selected */ --mf-selected-bg: #FCF6E6; /* gold-50 */ --mf-selected-border: #E2B448; --mf-selected-bg-dark: #222222; --mf-selected-accent: #E2B448; /* 3px left bar on active nav */ /* Disabled */ --mf-disabled-bg: #EFEEE9; --mf-disabled-text: #A0A0B0; --mf-disabled-border: #E2E0DA; --mf-disabled-opacity: 1; /* use flat tokens, never opacity on text */ /* Overlay / scrim */ --mf-overlay: rgba(20, 20, 31, 0.55); --mf-overlay-soft: rgba(20, 20, 31, 0.28); /* Selection highlight */ --mf-selection-bg: #FAEBC4; --mf-selection-text: #141414; /* Skeleton / loading */ --mf-skeleton-base: #EFEEE9; --mf-skeleton-sheen: #F6F5F2; --mf-skeleton-base-dark: #222222; /* ---------------------------------------------------------------------- 8. FORM CONTROLS ---------------------------------------------------------------------- */ --mf-control-height: 44px; /* = touch target. Non-negotiable. */ --mf-control-height-sm: 36px; /* dense desktop tables only, never mobile */ --mf-control-bg: #FFFFFF; --mf-control-bg-dark: #222222; --mf-control-border: #C9C7C0; /* 3.1:1 on paper — visible boundary */ --mf-control-border-hover:#8E8C84; --mf-control-border-focus:#245C9E; --mf-control-border-error:#B3352F; --mf-control-placeholder: #6A6A80; --mf-control-padding-x: 14px; --mf-control-radius: 10px; /* ---------------------------------------------------------------------- 9. TYPOGRAPHY Archivo for display, Source Sans 3 for body. To collapse to one family, set --mf-font-body to --mf-font-display. ---------------------------------------------------------------------- */ --mf-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --mf-font-body: 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif; --mf-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Email-safe stacks — webfonts are unreliable in Outlook and Gmail. */ --mf-font-email-display: Arial, 'Helvetica Neue', Helvetica, sans-serif; --mf-font-email-body: Arial, 'Helvetica Neue', Helvetica, sans-serif; /* Two weights per family. No exceptions, including navigation. */ --mf-weight-regular: 400; --mf-weight-bold: 600; /* Source Sans 3 emphasis, Archivo subheads */ --mf-weight-display: 700; /* Archivo headings only */ /* Type scale — 1.25 ratio. 12px is an absolute floor everywhere. */ --mf-size-display: 44px; --mf-size-h1: 34px; --mf-size-h2: 26px; --mf-size-h3: 20px; --mf-size-h4: 17px; --mf-size-body: 16px; /* minimum for parent-facing prose */ --mf-size-small: 14px; --mf-size-caption: 12px; /* FLOOR — nothing below this, chrome included */ --mf-leading-tight: 1.15; --mf-leading-snug: 1.4; --mf-leading-body: 1.65; --mf-tracking-eyebrow: 0.1em; --mf-tracking-tight: -0.01em; /* ---------------------------------------------------------------------- 10. SPACING — 4px base grid ---------------------------------------------------------------------- */ --mf-space-1: 4px; --mf-space-2: 8px; --mf-space-3: 12px; --mf-space-4: 16px; --mf-space-5: 24px; --mf-space-6: 32px; --mf-space-7: 48px; --mf-space-8: 64px; --mf-space-9: 96px; /* ---------------------------------------------------------------------- 11. RADII, BORDERS, ELEVATION ---------------------------------------------------------------------- */ --mf-radius-sm: 6px; --mf-radius-md: 10px; --mf-radius-lg: 16px; --mf-radius-xl: 24px; --mf-radius-full: 999px; --mf-border-hairline: 1px solid var(--mf-rule); --mf-border-dark: 1px solid var(--mf-ink-600); --mf-border-accent: 2px solid var(--mf-gold-500); --mf-shadow-sm: 0 1px 2px rgba(20, 20, 31, 0.06); --mf-shadow-md: 0 2px 8px rgba(20, 20, 31, 0.08); --mf-shadow-lg: 0 8px 24px rgba(20, 20, 31, 0.12); /* ---------------------------------------------------------------------- 12. MOTION ---------------------------------------------------------------------- */ --mf-duration-fast: 120ms; --mf-duration-base: 200ms; --mf-duration-slow: 320ms; --mf-ease: cubic-bezier(0.2, 0, 0.2, 1); /* ---------------------------------------------------------------------- 13. LAYOUT ---------------------------------------------------------------------- */ --mf-container-max: 1200px; --mf-reading-max: 68ch; --mf-sidebar-width: 260px; --mf-touch-target: 44px; } /* ========================================================================== COMPACT DENSITY — organisation and admin surfaces A club director scanning thirty athletes needs different density than an athlete reading their own dashboard. Apply [data-density="compact"] to a container to remap sizing without touching colour, type family, or state. Constraints that do NOT relax under compact: · 12px font floor · Colour meaning — pillars stay pillars, gold stays brand · Focus, hover, active, disabled states · 44px targets on touch devices (see the media query below) ========================================================================== */ [data-density="compact"] { --mf-control-height: 36px; --mf-space-4: 12px; --mf-space-5: 16px; --mf-space-6: 24px; --mf-space-7: 32px; --mf-radius-lg: 10px; --mf-size-body: 14px; --mf-leading-body: 1.5; } /* Compact is a pointer-device affordance. On touch, targets come back. */ @media (pointer: coarse) { [data-density="compact"] { --mf-control-height: 44px; } } /* -------------------------------------------------------------------------- DATA TABLES — rosters, cohort views, exports -------------------------------------------------------------------------- */ :root { --mf-table-header-bg: #EFEEE9; /* = --mf-paper-alt */ --mf-table-row-hover: #F6F5F2; /* = --mf-paper */ --mf-table-row-selected: #FCF6E6; /* = --mf-gold-50 */ --mf-table-border: #E2E0DA; /* = --mf-rule */ --mf-table-row-height: 48px; --mf-table-cell-pad-x: 12px; --mf-table-numeric: var(--mf-font-mono); /* align digits in columns */ } /* ========================================================================== BASE ACCESSIBILITY BEHAVIOUR Ship these alongside the tokens. They are not optional styling. ========================================================================== */ *:focus-visible { outline: none; box-shadow: var(--mf-focus-ring); border-radius: var(--mf-radius-sm); } .mf-on-dark *:focus-visible { box-shadow: var(--mf-focus-ring-dark); } ::selection { background: var(--mf-selection-bg); color: var(--mf-selection-text); } /* Minimum tap size for every interactive element. */ button, [role="button"], a.mf-btn, input, select, textarea { min-height: var(--mf-touch-target); } .mf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== PRINT / PDF — WeasyPrint ========================================================================== */ @media print { :root { --mf-ink-800: #0E0E0E; --mf-paper: #FFFFFF; --mf-gold-metal: var(--mf-gold-500); --mf-size-body: 11pt; --mf-shadow-sm: none; --mf-shadow-md: none; --mf-shadow-lg: none; } }