/* ============================================================ flerfi design tokens Source: flerfi Design System/colors_and_type.css Only change vs. the design-system file: the Google Fonts @import was removed — fonts are loaded from with preconnect so they don't block the CSSOM. Tokens are verbatim. ============================================================ */ :root { /* ---------- Color · Primary green ---------- */ --teal-50: #E8F1F3; --teal-100: #D2E3E7; --teal-200: #B9D5D9; --teal-500: #5E96A3; --teal-600: #4D8290; --teal-700: #365B65; --teal-800: #284952; --teal-900: #1F3A40; /* ---------- Color · Coral accent (★ core / emphasis) ---------- */ --coral-50: #FAECE7; --coral-200: #F4CDBD; --coral-500: #D85A30; --coral-700: #712B13; --coral-900: #4A1B0C; /* ---------- Color · Violet (secondary action, control plane) ---------- */ --violet-50: #EEEDFE; --violet-200: #C9C5F0; --violet-400: #7F77DD; --violet-500: #534AB7; --violet-700: #3F37A0; --violet-900: #26215C; /* ---------- Color · Blue (foreign-key / cross-reference) ---------- */ --blue-500: #185FA5; --blue-700: #0F4378; /* ---------- Color · Warning ---------- */ --warn-bg: #FFF8E1; --warn-border: #EFD685; --warn-text: #7A5C00; /* ---------- Color · Surfaces (warm cream) ---------- */ --cream-50: #FCFBF7; /* page background — always */ --cream-100: #FAF8F2; --cream-200: #F3F0E8; --cream-300: #F1EFE8; --white: #FFFFFF; /* ---------- Color · Borders + text (warm greys) ---------- */ --border: #D8D5CC; --border-strong: #D3D1C7; --text: #2C2C2A; --text-2: #5F5E5A; --text-3: #888780; --text-4: #9C9A93; /* ---------- Semantic ---------- */ --bg: var(--cream-50); --bg-elevated: var(--white); --bg-quiet: var(--cream-200); --fg: var(--text); --fg-muted: var(--text-2); --fg-subtle: var(--text-3); --accent: var(--teal-500); --accent-fg: var(--teal-900); --accent-bg: var(--teal-50); --link: var(--violet-500); /* status pill mappings */ --status-draft-bg: var(--cream-300); --status-draft-fg: var(--text-2); --status-pending-bg: var(--warn-bg); --status-pending-fg: var(--warn-text); --status-approved-bg: var(--teal-50); --status-approved-fg: var(--teal-700); --status-paid-bg: var(--teal-500); --status-paid-fg: var(--white); --status-rejected-bg: var(--coral-50); --status-rejected-fg: var(--coral-900); --status-received-bg: var(--violet-50); --status-received-fg: var(--violet-700); --status-split-bg: var(--violet-50); --status-split-fg: var(--violet-700); /* ---------- Type ---------- */ --font-sans: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px; --text-md: 14px; /* body default */ --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 26px; --text-4xl: 32px; /* hero max */ --leading-tight: 1.25; --leading-snug: 1.4; --leading-body: 1.5; --leading-loose: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; /* the workhorse */ --weight-bold: 700; /* step titles + primary CTA only */ /* ---------- Spacing (4px grid) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 14px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 56px; --space-16: 80px; /* ---------- Radius ---------- */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; /* buttons, inputs */ --radius-lg: 8px; /* cards */ --radius-xl: 12px; --radius-pill: 999px; /* ---------- Borders ---------- */ --bw-hair: 1px; --bw-default: 1px; --bw-emphasis: 1.5px; --bw-core: 2.5px; /* reserved for ★ core entities */ /* ---------- Shadow (one shadow, used sparingly) ---------- */ --shadow-float: 0 4px 12px rgba(4, 52, 44, 0.08); --shadow-pop: 0 8px 24px rgba(4, 52, 44, 0.12); /* ---------- Motion ---------- */ --motion-fast: 150ms ease-out; --motion-normal: 220ms cubic-bezier(0.2, 0, 0, 1); --motion-emphasis: 320ms cubic-bezier(0.2, 0, 0, 1); /* ---------- Sidebar / chrome ---------- */ --sidebar-width: 224px; --sidebar-rail: 72px; --topbar-height: 56px; /* ---------- Breakpoints (reference — for JS / matchMedia) ---------- */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms linear; --motion-normal: 0ms linear; --motion-emphasis: 0ms linear; } } /* ============================================================ Element defaults ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-body); font-feature-settings: "cv11"; /* Inter — keeps Vietnamese tone marks readable */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-semi); color: var(--teal-900); line-height: var(--leading-tight); } h1 { font-size: var(--text-4xl); font-weight: var(--weight-bold); letter-spacing: -0.01em; } h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: -0.005em; } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-md); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); } p { margin: 0; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; } a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--motion-fast); } a:hover { color: var(--violet-700); } ::selection { background: var(--teal-100); color: var(--teal-900); } /* ============================================================ Utility primitives (used by UI kits + cards) ============================================================ */ .eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .label { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--teal-900); } .muted { color: var(--text-2); } .subtle { color: var(--text-3); } .mono { font-family: var(--font-mono); } .dot-sep::before { content: "·"; margin: 0 6px; color: var(--text-3); } /* status pill */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .pill[data-status="draft"] { background: var(--status-draft-bg); color: var(--status-draft-fg); } .pill[data-status="pending"] { background: var(--status-pending-bg); color: var(--status-pending-fg); } .pill[data-status="approved"] { background: var(--status-approved-bg); color: var(--status-approved-fg); } .pill[data-status="paid"] { background: var(--status-paid-bg); color: var(--status-paid-fg); } .pill[data-status="rejected"] { background: var(--status-rejected-bg); color: var(--status-rejected-fg); } .pill[data-status="received"] { background: var(--blue-500); color: var(--white); } .pill[data-status="split"] { background: var(--status-split-bg); color: var(--status-split-fg); } .pill[data-status="sample"] { background: var(--cream-300); color: var(--text-2); }