/* XF-Accounting design tokens — the ONLY place raw values may appear. Component CSS (app.css) and templates reference var(--…) tokens only. */ :root { /* Opt the page into both schemes so the browser paints the canvas, scrollbars and native form controls in the OS scheme from the first paint — without this the UA backdrop defaults to white and flashes on navigation. */ color-scheme: light dark; /* primary (XFerion teal) */ --c-primary-50: #EAF6F3; --c-primary-100: #CDEAE3; --c-primary-200: #A6DACE; --c-primary-300: #6FC3B2; --c-primary-400: #4AB29D; --c-primary-500: #34A48F; --c-primary-600: #2A8676; --c-primary-700: #226B5E; --c-primary-800: #1B544A; --c-primary-900: #143F38; /* neutrals (warm slate) */ --c-surface: #FFFFFF; --c-bg: #F6F9F8; --c-neutral-100: #EEF2F1; --c-neutral-200: #E2E8E7; --c-neutral-300: #CAD3D2; --c-neutral-400: #98A5A3; --c-neutral-500: #697674; --c-neutral-600: #4B5755; --c-neutral-700: #36403F; --c-neutral-800: #222A29; --c-neutral-900: #131817; /* financial & semantic states */ --c-success: #1E9E63; --c-success-soft: #E5F4EC; --c-warning: #C77F0A; --c-warning-soft: #FBF1DD; --c-danger: #D14343; --c-danger-soft: #FBE7E7; --c-info: #2C7BE5; --c-info-soft: #E7F0FC; --c-draft: #697674; --c-draft-soft: #EEF2F1; /* transient highlight for live-swapped rows (settle animation) */ --c-highlight: #EAF6F3; /* type */ --font-ui: "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-num: "Inter", ui-monospace, "SF Mono", "Roboto Mono", monospace; --text-display: 28px; --lh-display: 34px; --text-h1: 22px; --lh-h1: 28px; --text-h2: 18px; --lh-h2: 24px; --text-h3: 15px; --lh-h3: 20px; --text-body: 14px; --lh-body: 21px; --text-sm: 13px; --lh-sm: 18px; --text-xs: 12px; --lh-xs: 16px; --text-num: 14px; --lh-num: 20px; --text-num-lg: 20px; --lh-num-lg: 26px; /* shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* spacing (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* elevation */ --shadow-sm: 0 1px 2px rgba(19,24,23,.06); --shadow-md: 0 4px 12px rgba(19,24,23,.08); --shadow-lg: 0 12px 32px rgba(19,24,23,.14); --shadow-focus: 0 0 0 3px rgba(52,164,143,.30); /* composites */ --control-h: 38px; --control-h-sm: 32px; --row-h: 44px; --sidebar-w: 248px; --topbar-h: 56px; --logo-h: 28px; --logo-h-row: 24px; --logo-box: 96px; --content-max: 1200px; --motion: 160ms ease-out; } /* Dark palette. Applied in two cases, which must stay in sync: 1. the user explicitly chose dark via the topbar toggle ([data-theme="dark"]); 2. "auto" mode — no explicit choice ([data-theme] unset) — and the OS prefers dark. An explicit light/dark choice on opts out of the OS query. */ :root[data-theme="dark"] { color-scheme: dark; --c-bg: #171C1B; --c-surface: #1F2625; --c-neutral-100: #242C2B; --c-neutral-200: #2C3433; --c-neutral-300: #3A4341; --c-neutral-400: #6C7A78; --c-neutral-500: #93A09E; --c-neutral-600: #B2BDBB; --c-neutral-700: #CCD5D3; --c-neutral-800: #E3E9E8; --c-neutral-900: #F2F6F5; /* Primary ramp is inverted for dark: the low tints (-50…-200), used as selected/hover/active backgrounds, become deep teal, and -600…-900, used as text/icons on those tints, lift to light so contrast holds. */ --c-primary-50: #16302B; --c-primary-100: #1C3A34; --c-primary-200: #2C5249; --c-primary-300: #3A6F62; --c-primary-400: #5FBFA9; --c-primary-500: #4AB29D; --c-primary-600: #6FC3B2; --c-primary-700: #8FD4C4; --c-primary-800: #A6DACE; --c-primary-900: #CDEAE3; --c-success-soft: rgba(30,158,99,.16); --c-warning-soft: rgba(199,127,10,.16); --c-danger-soft: rgba(209,67,67,.16); --c-info-soft: rgba(44,123,229,.16); --c-draft-soft: rgba(105,118,116,.16); --c-highlight: rgba(74,178,157,.20); } /* An explicit light choice pins the OS-native controls to light too. */ :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --c-bg: #171C1B; --c-surface: #1F2625; --c-neutral-100: #242C2B; --c-neutral-200: #2C3433; --c-neutral-300: #3A4341; --c-neutral-400: #6C7A78; --c-neutral-500: #93A09E; --c-neutral-600: #B2BDBB; --c-neutral-700: #CCD5D3; --c-neutral-800: #E3E9E8; --c-neutral-900: #F2F6F5; --c-primary-500: #4AB29D; --c-success-soft: rgba(30,158,99,.16); --c-warning-soft: rgba(199,127,10,.16); --c-danger-soft: rgba(209,67,67,.16); --c-info-soft: rgba(44,123,229,.16); --c-draft-soft: rgba(105,118,116,.16); --c-highlight: rgba(74,178,157,.20); } } /* amounts: always tabular */ .amount { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--font-num); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }