/* ============================================================================ Mandy — Design System · Design Tokens ---------------------------------------------------------------------------- Plain CSS custom properties. No framework, no build step. THEMING — set attributes on the element: data-theme="dark" → dark mode (default: light) data-brand="bleu" → brand preset (default: sauge) data-radius="leger" → corner rounding (default: net) Every brand tint derives from --brand via color-mix(), so re-skinning the whole product = changing the 3 --brand* variables (or adding a data-brand). ============================================================================ */ /* —— Self-hosted webfonts (no CDN) ———————————————————————————————————————————— Inter (variable) for UI/body text; Varela Round (the Manda brand face) for display headings. TTF is used directly — no woff2 toolchain, no build step. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/Inter-Variable-d09d67ef.ttf") format("truetype"); } @font-face { font-family: "Varela Round"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/VarelaRound-Regular-ff71276a.ttf") format("truetype"); } :root { /* —— Brand · default "sauge" ————————————————————————————————————————————— */ --brand: #4f8159; /* fills: primary buttons, active states */ --brand-strong: #3c6444; /* darker brand (hover on fills) */ --brand-on: #ffffff; /* text/icon on a --brand fill */ /* —— Typography ————————————————————————————————————————————————————————— */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Varela Round", var(--font-sans); /* Manda brand face, for display headings */ --text-xs: 12px; --text-sm: 13px; --text-base: 14px; /* body default */ --text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 25px; /* page title */ --text-3xl: 30px; --leading: 1.45; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* —— Spacing · 4px base ————————————————————————————————————————————————— */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; /* —— Radius · default preset "net" —————————————————————————————————————— */ --radius-sm: 4px; --radius-md: 5px; --radius-lg: 8px; --radius-pill: 999px; /* —— Neutrals · Light ——————————————————————————————————————————————————— */ --bg: #f2f4f3; /* app canvas */ --surface: #ffffff; /* cards, sidebar, topbar */ --surface-2: #fafbfa; /* table headers, subtle fills */ --text-strong: #1c2420; /* headings */ --text-default: #39423d; /* body */ --text-muted: #8b938d; /* secondary, placeholders */ --border: #e7ebe8; /* hairlines */ --border-strong: #d9ded9; /* input borders, dividers */ --input-bg: #f7f9f8; --row-hover: #f7faf8; /* —— Status ————————————————————————————————————————————————————————————— */ --info: #3b7ac0; --info-soft: #e6eefb; --success: #3c8f5b; --success-soft: #e4f2ea; --warning: #b9802b; --warning-soft: #f6ecd8; --danger: #c0493f; --danger-soft: #f7e7e5; /* `--danger` is a FILL, read against --on-solid. As text it fails AA: 4.92:1 on white is fine, but 4.11:1 on --danger-soft is not, and a discreet delete or a danger badge puts it exactly there. `--danger-text` is the same hue darkened until it clears 4.5:1 on every surface it can meet — 5.62 on --surface, 4.69 on --danger-soft, 5.35 on --row-hover, 5.09 on --bg. Use it wherever danger is a glyph or a word; keep --danger for backgrounds and borders. */ --danger-text: #b1433a; /* —— On-solid ——————————————————————————————————————————————————————————— */ --on-solid: #ffffff; /* text/icon on any solid fill: status buttons, dark rails */ /* —— Dark rails · light and dark theme alike ————————————————————————————— */ /* The green sidebar and the auth panel are dark surfaces in both themes: they are the product's own dark rail, not the theme's surface, so they carry their own neutrals rather than following --surface. */ --rail-bg: #222a24; /* green sidebar rail */ --rail-border: #313a32; /* its right edge, and the search field's border */ /* Two rail values that do NOT follow the theme, because they never did: the base the active item mixes the brand into, and the footer's divider. Both were written once for both themes, and letting them track --rail-bg / --rail-border would repaint a hovered item and the footer line in dark mode. */ --rail-mix-base: #222a24; --rail-divider: #313a32; --rail-label: #8a948b; /* group labels, muted names, search placeholder */ --rail-item: #aeb8af; /* nav items at rest */ --auth-panel-bg: #161b17; /* the sign-in panel behind the auth card */ --tooltip-bg: #1c2420; /* tooltip body — a dark chip in both themes */ /* —— Neutral primary preset (data-primary="neutre") —————————————————————— */ --primary-neutral: #1f2620; --primary-neutral-on: #ffffff; /* —— Derived brand tints (auto-follow --brand) —————————————————————————— */ --brand-text: var(--brand-strong); /* brand-coloured text/links/active labels */ --brand-soft: color-mix(in srgb, var(--brand) 14%, var(--surface)); --brand-ring: color-mix(in srgb, var(--brand) 35%, transparent); /* —— Elevation —————————————————————————————————————————————————————————— */ --shadow-sm: 0 1px 2px rgba(20, 40, 30, .05); --shadow-md: 0 1px 2px rgba(20, 40, 30, .05), 0 8px 22px rgba(20, 40, 30, .045); --shadow-lg: 0 8px 40px rgba(20, 40, 30, .14); color-scheme: light; } /* —— Neutrals · Dark ——————————————————————————————————————————————————————— */ [data-theme="dark"] { --bg: #111512; --surface: #1a1f1b; --surface-2: #181e18; /* The rail sits a shade below the dark surface, so it still reads as a rail. */ --rail-bg: #19211b; --rail-border: #283027; /* Inverted: on a dark theme the neutral primary is the light button. */ --primary-neutral: #e9ece6; --primary-neutral-on: #161a16; --text-strong: #f3f6f1; --text-default: #dde2dc; --text-muted: #8c948c; --border: #272e27; --border-strong: #333b33; --input-bg: #161b16; --row-hover: #1f251f; --info-soft: #1e2f38; --success-soft: #16291d; --warning-soft: #2e2616; --danger-soft: #311c1a; /* Dark mode never redefined --danger, so danger text sat at 3.40:1 on --surface, 3.25 on --danger-soft and 3.18 on --row-hover — the worst contrast in the product. Lightened instead of darkened here: 5.11 on --surface, 4.89 on --danger-soft, 4.78 on --row-hover, 5.63 on --bg, 5.19 on --surface-2. */ --danger-text: #cf756d; /* brand text brightened so it stays legible on dark surfaces */ --brand-text: color-mix(in srgb, var(--brand) 52%, #ffffff); --brand-soft: color-mix(in srgb, var(--brand) 22%, var(--surface)); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35); --shadow-lg: 0 12px 48px rgba(0, 0, 0, .5); color-scheme: dark; } /* —— Brand presets · or simply override the 3 --brand* vars in your app ———— */ [data-brand="emeraude"] { --brand: #2f9e7e; --brand-strong: #247c63; } [data-brand="bleu"] { --brand: #3b73c4; --brand-strong: #2c599b; } [data-brand="indigo"] { --brand: #5a5bd8; --brand-strong: #4444b0; } [data-brand="prune"] { --brand: #9558a8; --brand-strong: #774489; } [data-brand="ardoise"] { --brand: #4f5d6b; --brand-strong: #3a4753; } /* —— Radius presets ———————————————————————————————————————————————————————— */ [data-radius="leger"] { --radius-sm: 7px; --radius-md: 9px; --radius-lg: 12px; } [data-radius="rond"] { --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; }