/* ============================================================================ 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; /* —— 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; --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; /* 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; }