/* =========================================================================== Omyn Design System — R0 Foundations · tokens.css --------------------------------------------------------------------------- Canonical reduced tricolore system (bleu-blanc-rouge, sovereignty signal). Light is the default mode; dark is an optional toggle on every surface. Source of truth: 01-brand-architecture-cadrage-v0.1.md §7 + Appendix A. CANONICAL TOKENS SEALED 2026-06-25 (Sacha): --brand-blue = OMYN #0064FF --brand-red = tricolore #E1000F Candidate families below stay defined for archival/option-matrix reference; the canonical selection block re-points to the sealed pair. English only · no AI attribution · purple forbidden. =========================================================================== */ :root { /* ---- Blue candidates --------------------------------------------------- */ --blue-omyn: #0064FF; /* OMYN landing brief (Confluent/BONJOUR) */ --blue-omyn-700: #0052CC; --blue-omyn-050: #E8F1FF; --blue-bra0: #0046b2; /* bra0 knowledge blue (deep) */ --blue-bra0-light: #1a6adf; /* bra0 blue, lighter operating tone */ --blue-bra0-050: #E9F0FB; /* ---- Red / tonic-accent candidates ------------------------------------- */ --red-rythm: #df4678; /* bra0 "rythm" pink — magenta-leaning */ --red-rythm-deep: #8D1953; /* rythm dark anchor */ --red-rythm-050: #FCEBF1; --red-tricolore: #E1000F; /* true French-flag red — reads as 🇫🇷 */ --red-tricolore-deep:#B0000C; --red-tricolore-050:#FDEAEB; /* ======================================================================= CANONICAL SELECTION · SEALED 2026-06-25 → OMYN blue + tricolore red ======================================================================= */ --brand-blue: var(--blue-omyn); --brand-blue-strong:var(--blue-omyn-700); --brand-blue-wash: var(--blue-omyn-050); --brand-red: var(--red-tricolore); --brand-red-strong: var(--red-tricolore-deep); --brand-red-wash: var(--red-tricolore-050); /* ---- Tricolore semantic roles ------------------------------------------ */ --color-primary: var(--brand-blue); /* dominant */ --color-primary-strong: var(--brand-blue-strong); --color-primary-wash: var(--brand-blue-wash); --color-accent: var(--brand-red); /* tonic accent */ --color-accent-strong: var(--brand-red-strong); --color-accent-wash: var(--brand-red-wash); /* ---- Neutrals (white base completes the tricolore) --------------------- */ --white: #FFFFFF; --ink: #1C1C1E; /* near-black text */ --ink-2: #3A3A3C; --muted: #6A6A6F; /* AA on #F5F7FA (4.68:1); #8E8E93 read 3.04 (.section__sub body copy) */ --line: #E4E7EC; /* hairline borders */ --surface: #FFFFFF; /* card / panel base */ --bg: #F5F7FA; /* page background */ --bg-2: #F2F2F7; /* ---- Status (kept minimal; NOT brand accents) -------------------------- */ --status-critical: #FF3B30; --status-warning: #FF9500; --status-success: #34C759; /* ---- Typography -------------------------------------------------------- */ --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'DM Mono', ui-monospace, 'SF Mono', monospace; /* Icons: Material Symbols Outlined, weight 500, opsz 20, never circled. */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* type scale — modular, DM Sans display / DM Mono figures */ --fs-eyebrow: 0.75rem; /* 12px · DM Mono, tracked */ --fs-body: 1rem; /* 16px */ --fs-lead: 1.125rem; /* 18px */ --fs-h3: 1.375rem; /* 22px */ --fs-h2: 1.875rem; /* 30px */ --fs-h1: 2.75rem; /* 44px */ --fs-display: 3.75rem; /* 60px hero */ --fs-stat: 3rem; /* 48px · DM Mono figures */ /* ---- Spacing · 8pt grid ------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --content-max: 1180px; /* 1100–1200px band */ --pad-mobile: 24px; --pad-desktop: 64px; /* ---- Radii ------------------------------------------------------------- */ --radius-8: 8px; --radius-12: 12px; --radius-16: 16px; /* cards */ --radius-20: 20px; --radius-32: 32px; --radius-pill: 9999px; /* ---- Shadows · BLUE, never black --------------------------------------- */ --shadow-card: 0 6px 24px rgba(0, 100, 255, 0.08); --shadow-card-hover: 0 10px 32px rgba(0, 100, 255, 0.14); --shadow-pill: 0 4px 14px rgba(0, 100, 255, 0.22); /* ---- Motion ------------------------------------------------------------ */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 220ms; /* ---- Promoted from R1 2026-06-25 (foundational, every surface needs) ---- */ /* low end of the type scale (R0 originally jumped 12px → 16px) */ --fs-xs: 0.8125rem; /* 13px · dense labels, badges */ --fs-sm: 0.875rem; /* 14px · buttons, captions */ /* on-brand text: mode-stable white for filled blue/red surfaces */ /* (distinct from --white, which inverts to navy under dark) */ --on-brand: #FFFFFF; /* mode-stable LIGHT neutrals — for a "light island" surface that must keep light-mode contrasts even under [data-theme="dark"] (e.g. a header bar deliberately kept light in dark mode). These do NOT invert. */ --ink-light: #1C1C1E; --ink-2-light: #3A3A3C; --muted-light: #8E8E93; --line-light: #E4E7EC; --surface-light: #FFFFFF; /* focus ring (width + colour derived from primary) */ --focus-ring-width: 3px; --focus-ring: color-mix(in srgb, var(--color-primary) 35%, transparent); /* interaction tints derived from brand tokens (no new colours) */ --tint-primary: color-mix(in srgb, var(--color-primary) 10%, transparent); --tint-accent: color-mix(in srgb, var(--color-accent) 12%, transparent); --ghost-hover: color-mix(in srgb, var(--color-primary) 8%, transparent); /* icon sizes + hairline border-width */ --icon-16: 16px; --icon-18: 18px; --icon-20: 20px; --border-1: 1px; } /* =========================================================================== DARK MODE — optional toggle (NOT removed). Applied via [data-theme="dark"]. White base inverts to deep navy; blue lightens for AA contrast on dark. =========================================================================== */ [data-theme="dark"] { --white: #0B1220; --ink: #F2F5FA; --ink-2: #C7CDD6; --muted: #8A93A3; --line: #233047; --surface: #111A2B; --bg: #070C16; --bg-2: #0E1626; /* lighten brand tokens for dark legibility while keeping the same family */ --color-primary: color-mix(in srgb, var(--brand-blue) 78%, white); /* strong = emphasis/link colour; on light it darkens (#0052CC) for AA on white, on dark it must LIGHTEN (≈#4D93FF) for AA on the near-black bg — without this override it inherited #0052CC and failed dark text-link AA. */ --color-primary-strong: color-mix(in srgb, var(--brand-blue) 70%, white); --color-primary-wash: color-mix(in srgb, var(--brand-blue) 18%, #0B1220); --color-accent: color-mix(in srgb, var(--brand-red) 82%, white); --color-accent-wash: color-mix(in srgb, var(--brand-red) 20%, #0B1220); --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.55); --shadow-pill: 0 6px 18px rgba(0, 0, 0, 0.5); }