/* ========================================================================== MoneyDoc — Design Tokens SINGLE SOURCE OF TRUTH. Do not define colour anywhere else. BRAND SOURCE: extracted from the live moneydoc.africa (computed styles, weighted by painted area). MoneyDoc's committed identity is: navy #222D52 rgb(34,45,82) — dominant brand colour navy-2 #29315F rgb(41,49,95) — secondary sand #EEE5D9 rgb(238,229,217) — warm secondary white #FFFFFF — dominant ground type Montserrat Identity preservation overrides the "navy institutional finance" reflex warning: this is the client's existing committed brand, not a greenfield pick. The earlier bottle-green seed is retired. Dual-theme contract, three blocks, in this order: 1. :root -> complete LIGHT palette 2. @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) -> dark for system-default users 3. :root[data-theme="dark"] -> dark for explicit togglers No colour may be defined ONLY inside a media query. ========================================================================== */ :root { /* ---- Surfaces. Pure white ground, as on their live site. ---- */ --bg: oklch(1 0 0); --bg-elevated: oklch(0.988 0.004 274); --bg-sunken: oklch(0.966 0.007 274); --bg-overlay: oklch(0.22 0.035 274 / 0.5); /* ---- Foreground: navy-tinted ink, never neutral grey ---- */ --fg: oklch(0.22 0.035 274); /* 13.9:1 on white */ --fg-muted: oklch(0.46 0.028 274); /* 6.8:1 */ --fg-subtle: oklch(0.56 0.022 274); /* 4.6:1 — placeholders held to body contrast */ /* ---- Brand: MoneyDoc navy #222D52 ---- */ --primary: oklch(0.286 0.066 274); --primary-hover: oklch(0.235 0.070 274); --primary-fg: oklch(0.99 0.002 274); --primary-weak: oklch(0.945 0.018 274); /* ---- Accent: saturated from their sand #EEE5D9 hue. Bronze. ---- */ --accent: oklch(0.545 0.095 72); --accent-hover: oklch(0.475 0.098 72); --accent-fg: oklch(0.99 0.002 72); --accent-weak: oklch(0.925 0.017 75); /* their sand, exactly */ /* ---- Lines ---- */ --border: oklch(0.905 0.009 274); --border-strong: oklch(0.800 0.014 274); --focus-ring: oklch(0.545 0.095 72); /* ---- Committed-drench surface. BRAND REGISTER ONLY. index.html + discover/** + journey.html. Not the product surfaces. ---- */ --drench: oklch(0.286 0.066 274); --drench-fg: oklch(0.970 0.006 274); --drench-muted: oklch(0.800 0.022 274); --drench-rule: oklch(0.400 0.055 274); /* ---- Status. NEVER used alone: always paired with icon + text label. ---- */ --pos: oklch(0.480 0.115 155); --pos-weak: oklch(0.950 0.024 155); --neg: oklch(0.520 0.175 27); --neg-weak: oklch(0.960 0.030 27); --warn: oklch(0.550 0.130 70); --warn-weak: oklch(0.960 0.035 70); --info: oklch(0.510 0.100 225); --info-weak: oklch(0.955 0.025 225); /* ---- Type. Montserrat is MoneyDoc's brand face; Avenir Next is the closest widely-installed geometric fallback, then Century Gothic. No CDN: the stack renders true wherever Montserrat is installed and degrades to the same geometric family where it is not. ---- */ --font-sans: Montserrat, "Avenir Next", Avenir, "Century Gothic", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.35rem; --text-2xl: 1.62rem; --text-3xl: 1.95rem; --text-4xl: clamp(2.4rem, 1.8rem + 2.5vw, 3.5rem); --leading-tight: 1.15; --leading-snug: 1.35; --leading-base: 1.6; /* ---- Space (4px base) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* ---- Radii — tight. Ledger precision, not friendly rounding. ---- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 999px; /* ---- Elevation ---- */ --shadow-sm: 0 1px 2px oklch(0.22 0.035 274 / 0.07), 0 1px 3px oklch(0.22 0.035 274 / 0.05); --shadow-md: 0 2px 6px oklch(0.22 0.035 274 / 0.09), 0 8px 20px oklch(0.22 0.035 274 / 0.07); /* ---- Motion ---- */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 380ms; /* ---- Semantic z-index. Never use arbitrary values. ---- */ --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ---- Layout ---- */ --container: 1200px; --prose: 68ch; color-scheme: light; } /* -------- Dark for users on system default (no explicit choice) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: oklch(0.105 0.012 274); --bg-elevated: oklch(0.155 0.018 274); --bg-sunken: oklch(0.078 0.010 274); --bg-overlay: oklch(0.05 0.008 274 / 0.68); --fg: oklch(0.960 0.005 274); --fg-muted: oklch(0.730 0.012 274); --fg-subtle: oklch(0.610 0.014 274); /* Lifted toward a cleaner blue (262) with lower chroma. A literal lift of the brand hue (274) lands on periwinkle, which reads as the AI-violet default rather than as MoneyDoc's navy. */ --primary: oklch(0.645 0.098 262); --primary-hover: oklch(0.715 0.090 262); --primary-fg: oklch(0.120 0.020 274); --primary-weak: oklch(0.240 0.045 274); --accent: oklch(0.780 0.105 72); --accent-hover: oklch(0.850 0.085 75); --accent-fg: oklch(0.160 0.020 72); --accent-weak: oklch(0.260 0.040 72); --border: oklch(0.260 0.018 274); --border-strong: oklch(0.360 0.022 274); --focus-ring: oklch(0.780 0.105 72); --drench: oklch(0.175 0.032 274); --drench-fg: oklch(0.960 0.006 274); --drench-muted: oklch(0.740 0.018 274); --drench-rule: oklch(0.300 0.038 274); --pos: oklch(0.740 0.125 155); --pos-weak: oklch(0.240 0.035 155); --neg: oklch(0.700 0.165 27); --neg-weak: oklch(0.250 0.045 27); --warn: oklch(0.780 0.130 70); --warn-weak: oklch(0.245 0.040 70); --info: oklch(0.750 0.095 225); --info-weak: oklch(0.235 0.035 225); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.5), 0 1px 3px oklch(0 0 0 / 0.35); --shadow-md: 0 2px 6px oklch(0 0 0 / 0.55), 0 8px 20px oklch(0 0 0 / 0.4); color-scheme: dark; } } /* -------- Dark for users who explicitly chose it (wins in both directions) -- */ :root[data-theme="dark"] { --bg: oklch(0.105 0.012 274); --bg-elevated: oklch(0.155 0.018 274); --bg-sunken: oklch(0.078 0.010 274); --bg-overlay: oklch(0.05 0.008 274 / 0.68); --fg: oklch(0.960 0.005 274); --fg-muted: oklch(0.730 0.012 274); --fg-subtle: oklch(0.610 0.014 274); --primary: oklch(0.660 0.115 272); --primary-hover: oklch(0.730 0.105 272); --primary-fg: oklch(0.120 0.020 274); --primary-weak: oklch(0.240 0.045 274); --accent: oklch(0.780 0.105 72); --accent-hover: oklch(0.850 0.085 75); --accent-fg: oklch(0.160 0.020 72); --accent-weak: oklch(0.260 0.040 72); --border: oklch(0.260 0.018 274); --border-strong: oklch(0.360 0.022 274); --focus-ring: oklch(0.780 0.105 72); --drench: oklch(0.175 0.032 274); --drench-fg: oklch(0.960 0.006 274); --drench-muted: oklch(0.740 0.018 274); --drench-rule: oklch(0.300 0.038 274); --pos: oklch(0.740 0.125 155); --pos-weak: oklch(0.240 0.035 155); --neg: oklch(0.700 0.165 27); --neg-weak: oklch(0.250 0.045 27); --warn: oklch(0.780 0.130 70); --warn-weak: oklch(0.245 0.040 70); --info: oklch(0.750 0.095 225); --info-weak: oklch(0.235 0.035 225); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.5), 0 1px 3px oklch(0 0 0 / 0.35); --shadow-md: 0 2px 6px oklch(0 0 0 / 0.55), 0 8px 20px oklch(0 0 0 / 0.4); color-scheme: dark; } /* ---------------------------- Reset / base ------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* The [hidden] attribute must win. Any author `display` rule (.card{display:grid}) silently beats the UA stylesheet's [hidden]{display:none}, which makes elements meant to be mutually exclusive all render at once. Reset it once, here, rather than per-component in three separate agents' stylesheets. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* clip, never hidden: `hidden` on the root creates a scroll container and breaks position:sticky descendants. */ overflow-x: clip; } body { /* Explicit token background is required — a transparent body borrows the host's ground and breaks theming. */ background-color: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } /* Headings are ALWAYS roman. Italic display type is one of the most reliable AI tells; emphasis is carried by weight and accent colour. */ h1, h2, h3, h4, h5, h6 { font-style: normal; overflow-wrap: anywhere; } h1, h2, h3 { line-height: var(--leading-tight); text-wrap: balance; } h4, h5, h6 { line-height: var(--leading-snug); text-wrap: balance; } p { text-wrap: pretty; } :where(a) { color: var(--primary); text-underline-offset: 0.2em; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* All financial reference data is mono + tabular. A figure that reflows horizontally as it ticks is a bug. */ .mono, .rate, .amount, [data-figure] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }