/* ========================================================================== Milieu design tokens Drop-in CSS custom properties. Light theme on :root, dark theme applied by adding class "theme-dark". Put "theme-dark" on wherever you can. Inherited properties such as `color` are resolved once, on the element that declares them: if `body` sets `color: var(--color-text)` and the class sits on some div INSIDE body, body has already resolved the light value and every heading inherits it. The .theme-dark rule below re-declares colour and background for exactly this reason, so a scoped subtree still paints correctly — but the root is still the right place for it. Works with plain CSS, any framework, or Tailwind v4 (paste the variables into an @theme block instead of :root to generate utilities). ========================================================================== */ :root { /* --- Brand ------------------------------------------------------------ Blue carries every action (4.3:1 on white). Navy is the text and structural colour (17:1 on white). Gold (1.6:1) and salmon (2.7:1) are DECORATIVE ONLY — never text, never an icon that must be read, never a data encoding. */ --color-brand-blue: #3d7cc0; --color-brand-blue-dark: #2d5d92; --color-brand-blue-light: #eaf1f9; --color-brand-salmon: #e08561; --color-brand-salmon-light: #fbeee8; --color-brand-gold: #f5cc24; --color-brand-gold-light: #fef8dc; --color-brand-navy: #0b1b34; --color-brand-navy-muted: #3a465e; /* --- Surfaces & text (light) ------------------------------------------ */ --color-surface: #ffffff; --color-surface-sunken: #f7f8fa; --color-surface-raised: #ffffff; --color-border: #e2e5ea; --color-border-strong: #c7ccd4; --color-text: #0b1b34; --color-text-muted: #4f5a72; --color-text-subtle: #6d778e; /* --- Status / sentiment ------------------------------------------------ Deliberately NOT brand colours: a reader should never have to learn a palette to read a result. Every step clears 3:1 on both #ffffff and #131a29, so the mid-tones are shared by both themes. */ --color-fav-strong: #1c7f56; --color-fav: #27915f; --color-fav-light: #e6f4ed; --color-neutral-mid: #7b8492; --color-neutral-light: #f0f1f4; --color-unfav: #c4701c; --color-unfav-strong: #c0392b; --color-unfav-light: #fdeceb; /* --- Warning / caution ------------------------------------------------- */ --color-warn: #b7791f; --color-warn-bg: #fdf6e3; --color-warn-border: #e8d08a; /* --- Shape & type ------------------------------------------------------ */ --radius-card: 8px; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* --- Dark theme --------------------------------------------------------- Only these 16 tokens change. Salmon, gold, navy and the whole status ramp are identical in both themes. Note the deliberate inversion: --color-brand-blue-dark is LIGHTER than --color-brand-blue in dark mode, because its job is emphasis, not depth. */ .theme-dark { --color-surface: #131a29; --color-surface-sunken: #0d131f; --color-surface-raised: #1b2436; --color-border: #2a3549; --color-border-strong: #3c4a63; --color-text: #eef1f6; --color-text-muted: #a6b0c3; --color-text-subtle: #8590a6; --color-brand-blue: #6ba3dd; --color-brand-blue-dark: #8fbce8; --color-brand-blue-light: #1c2b40; --color-fav-light: #14301f; --color-unfav-light: #33211d; --color-neutral-light: #212b3d; --color-warn-bg: #2c2415; --color-warn-border: #5c4a1d; /* Re-declared so the theme also works when scoped to a subtree rather than applied to . Harmless when it IS on . */ color: var(--color-text); background-color: var(--color-surface); } /* ========================================================================== Base ========================================================================== */ body { background-color: var(--color-surface); color: var(--color-text); font-family: var(--font-sans); line-height: 1.6; } /* Focus is never removed. This ring is the accessibility floor of the system. */ :focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; border-radius: 4px; } /* ========================================================================== Signature elements ========================================================================== */ /* The brand rule: four bars, salmon > gold > blue > navy, in that order. Sits under a page title. This is the most recognisable Milieu element after the rings — use it instead of a plain
. */ .brand-rule { display: flex; gap: 3px; width: 72px; height: 4px; } .brand-rule > span { flex: 1; border-radius: 2px; } /* ========================================================================== Hover system — tone shift only, never motion. Lifts, slides and scale were removed on purpose: they read as the page twitching under the cursor. ========================================================================== */ .hover-solid { transition: filter 120ms ease; } .hover-solid:hover { filter: brightness(0.94); } .hover-surface { transition: background-color 120ms ease, border-color 120ms ease; } .hover-surface:hover { background-color: var(--color-surface-sunken); border-color: var(--color-border-strong); } @media (prefers-reduced-motion: reduce) { .hover-solid, .hover-surface { transition: none; } } /* ========================================================================== Components — the whole system is one radius, 1px borders, and no shadows. ========================================================================== */ .milieu-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); padding: 16px; } .milieu-btn { border-radius: var(--radius-card); font-size: 16px; font-weight: 600; min-height: 46px; padding: 0 18px; cursor: pointer; } .milieu-btn:disabled { opacity: 0.6; cursor: default; } .milieu-btn--primary { background: var(--color-brand-blue); color: #ffffff; border: none; } .milieu-btn--secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border-strong); } /* Destructive is bordered, never filled. A filled red button invites the click it is warning about. */ .milieu-btn--destructive { background: transparent; color: var(--color-unfav-strong); border: 1px solid var(--color-unfav-strong); } .milieu-input { min-height: 44px; width: 100%; border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); padding: 0 14px; font-size: 16px; /* 16px or larger stops iOS zooming the page on focus */ font-family: inherit; background: var(--color-surface); color: var(--color-text); } /* Numeric data aligns only if the digits are the same width. */ .milieu-num { font-variant-numeric: tabular-nums; }