/* ============================================================ myrole.co — Design Tokens Primary brand direction: "Compass" (switched from Meridian — see DECISIONS.md) Single source of truth for the website (brief 02) and the CMS (brief 03). Import this file, then build on the --mr-* custom properties below. Note: token NAMES are stable across directions, so the same site/CMS code themes by swapping this file. The Meridian variant is kept at ./design-tokens-meridian.css for reference / switching back. ============================================================ */ :root { /* ---------- 1. COLOUR — RAW SCALE ---------- Named by hue + step. Use the SEMANTIC tokens (section 2) in product code. */ /* Ink (cool slate anchor — its own identity, deliberately not warm) */ --mr-ink-900: #1A2230; /* anchor / primary text / dark surfaces */ --mr-ink-800: #232C3D; --mr-ink-700: #455065; /* secondary text */ --mr-ink-500: #7C8699; /* muted text, captions */ --mr-ink-300: #AEB6C4; /* disabled */ /* Paper (cool neutral surfaces) */ --mr-paper-0: #FFFFFF; /* cards / raised */ --mr-paper-50: #FBFCFE; /* base background */ --mr-paper-100:#EEF2F8; /* cloud — muted fill / hover */ --mr-paper-200:#DEE5EF; /* hairline / borders */ --mr-paper-300:#CAD3E2; /* stronger border */ /* Signal Green — electric/neon green as the key accent. Owned by neither parent (deliberately not Oursayso blue), balanced by coral. Two tiers: 500 = electric (fills, dots, dark-surface accents); 600/700 = deepened greens for text on light, so the brand keeps its WCAG-AA contrast. */ --mr-signal-wash: #E1FBEC; /* pale green wash / tint surface */ --mr-signal-soft: #69F2A6; /* light electric — text/icons on dark surfaces (glows on slate) */ --mr-signal-300: #3CEB87; --mr-signal-500: #1FE06A; /* signal — the electric neon green */ --mr-signal-600: #0A9E4D; /* hover / pressed / large text on light */ --mr-signal-700: #07803F; /* deep — small text on light (AA on white) */ --mr-signal-rgb: 31, 224, 106; /* for rgba() tints in app CSS */ /* Coral — the warm counter-accent that keeps blue from owning the brand */ --mr-accent-500: #F26B5B; --mr-accent-600: #D94E3E; --mr-accent-50: #FDEAE6; --mr-accent-rgb: 242, 107, 91; /* Micro-accents — small sizes only (tags, data, illustration). Never floods. In Compass the two accents (blue + coral) ARE the quiet nod to both parents. */ --mr-cobalt-500: #2C5BE5; /* nod to Oursayso (== signal here) */ --mr-cobalt-50: #E6ECFD; --mr-amber-500: #E5A13A; /* nod to LTT, used sparingly */ --mr-amber-50: #FBF0DC; /* Status */ --mr-success-500: #1F9D6B; --mr-warning-500: #E5A13A; --mr-danger-500: #D94E3E; --mr-info-500: #2C5BE5; /* ---------- 2. COLOUR — SEMANTIC ---------- These are what website + CMS components should consume. */ --mr-bg: var(--mr-paper-50); --mr-bg-raised: var(--mr-paper-0); --mr-bg-sunken: var(--mr-paper-100); --mr-bg-inverse: var(--mr-ink-900); --mr-text: var(--mr-ink-900); --mr-text-secondary:var(--mr-ink-700); --mr-text-muted: var(--mr-ink-500); --mr-text-inverse: var(--mr-paper-50); --mr-text-onSignal: #04321A; /* dark ink — text on the bright green fills */ --mr-border: var(--mr-paper-200); --mr-border-strong: var(--mr-paper-300); --mr-signal: var(--mr-signal-500); --mr-signal-hover: var(--mr-signal-600); --mr-signal-deep: var(--mr-signal-700); /* readable small text on signal-wash / white */ --mr-accent: var(--mr-accent-500); --mr-focus-ring: var(--mr-signal-wash); --mr-focus-border: var(--mr-signal-500); /* Back-compat aliases so any code still referencing the old jade names themes correctly under Compass. Prefer --mr-signal-* in new code. */ --mr-jade-50: var(--mr-signal-wash); --mr-jade-300: var(--mr-signal-soft); --mr-jade-500: var(--mr-signal-500); --mr-jade-600: var(--mr-signal-600); --mr-jade-700: var(--mr-signal-deep); /* ---------- 3. TYPOGRAPHY ---------- RULE: the display serif (Fraunces) is for HEADLINES and NAMES only. NUMBERS / metrics / data use --mr-font-data (sans, tabular) so they stay crisp and aligned — never set stats or tables in the serif. */ --mr-font-display: "Fraunces", "Geist", serif; /* serif display, italic = emphasis voice */ --mr-font-body: "Geist", system-ui, sans-serif; --mr-font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace; --mr-font-data: "Geist", system-ui, sans-serif; /* pair with font-variant-numeric: tabular-nums */ /* Type scale — 1.25-ish, tuned. rem assumes 16px root. */ --mr-text-xs: 0.75rem; --mr-text-sm: 0.875rem; --mr-text-base: 1rem; --mr-text-lg: 1.125rem; --mr-text-xl: 1.375rem; --mr-text-2xl: 1.875rem; --mr-text-3xl: 2.5rem; --mr-text-4xl: 3.25rem; --mr-text-5xl: 4rem; --mr-leading-tight: 1.04; --mr-leading-snug: 1.2; --mr-leading-body: 1.55; --mr-tracking-tight: -0.02em; /* serif display wants slightly less negative tracking */ --mr-tracking-snug: -0.012em; --mr-tracking-wide: 0.16em; --mr-weight-light: 300; --mr-weight-reg: 400; --mr-weight-med: 500; --mr-weight-semi: 600; --mr-weight-bold: 700; /* ---------- 4. SPACING — 4px base ---------- */ --mr-space-1: 0.25rem; --mr-space-2: 0.5rem; --mr-space-3: 0.75rem; --mr-space-4: 1rem; --mr-space-5: 1.5rem; --mr-space-6: 2rem; --mr-space-7: 2.75rem; --mr-space-8: 3.5rem; --mr-space-9: 5rem; --mr-space-10: 7rem; --mr-container: 1120px; --mr-container-sm: 760px; --mr-gutter: 2rem; /* ---------- 5. RADIUS ---------- */ --mr-radius-sm: 8px; --mr-radius-md: 13px; --mr-radius-lg: 20px; --mr-radius-xl: 28px; --mr-radius-pill: 999px; /* ---------- 6. SHADOW (cool slate-tinted) ---------- */ --mr-shadow-sm: 0 1px 2px rgba(26,34,48,.05), 0 4px 16px rgba(26,34,48,.05); --mr-shadow-md: 0 2px 4px rgba(26,34,48,.06), 0 18px 48px rgba(26,34,48,.10); --mr-shadow-lg: 0 6px 12px rgba(26,34,48,.08), 0 32px 80px rgba(26,34,48,.14); --mr-shadow-signal: 0 10px 40px rgba(31,224,106,.30); /* green glow for emphasis */ /* ---------- 7. MOTION ---------- */ --mr-ease-out: cubic-bezier(.2, .7, .2, 1); --mr-ease-inout: cubic-bezier(.65, 0, .35, 1); --mr-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --mr-dur-fast: 120ms; --mr-dur-base: 200ms; --mr-dur-slow: 360ms; --mr-dur-reveal: 640ms; /* ---------- 8. LAYERING ---------- */ --mr-z-base: 0; --mr-z-raised: 10; --mr-z-sticky: 100; --mr-z-overlay: 1000; --mr-z-toast: 1100; } /* ---------- Optional dark surface context ---------- For inverse bands (e.g. hero, trust band footer). Apply [data-theme="ink"]. */ [data-theme="ink"] { --mr-bg: var(--mr-ink-900); --mr-bg-raised: var(--mr-ink-800); --mr-bg-sunken: #141B27; --mr-text: var(--mr-paper-50); --mr-text-secondary: rgba(251,252,254,.78); --mr-text-muted: rgba(251,252,254,.55); --mr-border: rgba(251,252,254,.14); --mr-border-strong: rgba(251,252,254,.28); } /* ---------- Accessibility baseline ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Visible, on-brand focus for keyboard users (WCAG 2.4.7) */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--mr-focus-border); outline-offset: 2px; border-radius: var(--mr-radius-sm); }