/* =========================================================================== Sitewise — Design Tokens Construction expense agent · control panel Register: product. Light, high-contrast, low-chroma. Hairline structure. Ochre is reserved for the AGENT: where it speaks, or where it is unsure. =========================================================================== */ :root { /* --- Surfaces -------------------------------------------------------- */ --bg: oklch(1 0 0); /* pure white. no hidden warmth */ --surface: oklch(0.978 0 0); /* zebra rows, drawer backing */ --surface-2: oklch(0.958 0 0); /* pressed, inset, code */ --surface-3: oklch(0.930 0 0); /* track, disabled fill */ --line: oklch(0.905 0 0); /* THE structural device */ --line-strong: oklch(0.845 0 0); /* section separators, table rules */ /* Interactive boundaries need 3:1 against the page (WCAG 1.4.11), which a hairline grey cannot give. Structural rules are decorative and exempt. */ --line-control: oklch(0.600 0.006 62); --line-faint: oklch(0.945 0 0); /* inside dense tables */ /* --- Ink ------------------------------------------------------------- */ --ink: oklch(0.185 0.008 62); /* ~14:1 on bg */ --ink-2: oklch(0.335 0.008 62); /* headings in dense UI ~8:1 */ --ink-muted: oklch(0.460 0.008 62); /* secondary ~5.0:1 */ --ink-faint: oklch(0.605 0.006 62); /* NON-TEXT only: rules, icons */ --ink-invert: oklch(0.995 0 0); /* --- Brand · the agent ochre ---------------------------------------- */ --brand: oklch(0.620 0.145 62); /* fills, indicators, bars */ --brand-ink: oklch(0.455 0.125 55); /* ochre TEXT on white ~4.9:1 */ --brand-hover: oklch(0.560 0.140 58); --brand-press: oklch(0.505 0.130 55); --brand-wash: oklch(0.965 0.028 75); /* tinted row / callout ground */ --brand-wash-2: oklch(0.930 0.052 78); /* highlight box on document */ --brand-edge: oklch(0.845 0.085 70); /* border on tinted ground */ /* --- Semantics ------------------------------------------------------- */ --positive: oklch(0.500 0.115 158); /* text: income, under budget */ --positive-fill: oklch(0.620 0.140 158); /* charts, bars */ --positive-wash: oklch(0.960 0.030 158); --positive-edge: oklch(0.855 0.070 158); --negative: oklch(0.500 0.185 27); /* text: loss, overrun, dupe */ --negative-fill: oklch(0.580 0.210 27); --negative-wash: oklch(0.965 0.022 27); --negative-edge: oklch(0.870 0.060 27); --info: oklch(0.480 0.130 250); /* system / sync / links */ --info-fill: oklch(0.590 0.155 250); --info-wash: oklch(0.962 0.022 250); --info-edge: oklch(0.860 0.055 250); /* --- Categorical (charts) — accessible, distinguishable -------------- */ --cat-1: oklch(0.620 0.145 62); /* ochre · Materials */ --cat-2: oklch(0.545 0.125 250); /* indigo · Labour */ --cat-3: oklch(0.585 0.115 175); /* teal · Subcontractor */ --cat-4: oklch(0.560 0.155 20); /* clay · Plant Hire */ --cat-5: oklch(0.505 0.095 310); /* plum · Prelims */ --cat-6: oklch(0.640 0.105 128); /* moss · Professional */ --cat-7: oklch(0.680 0.090 45); /* sand · Permits */ --cat-8: oklch(0.470 0.045 250); /* slate · Other */ /* --- Typography ------------------------------------------------------ */ --font-ui: 'Archivo', ui-sans-serif, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; --t-2xs: 0.6875rem; /* 11px · table micro-labels */ --t-xs: 0.75rem; /* 12px · meta, badges, captions */ --t-sm: 0.8125rem; /* 13px · dense table body */ --t-base: 0.875rem; /* 14px · app UI default */ --t-md: 1rem; /* 16px · reading text, chat */ --t-lg: 1.1875rem; /* 19px · card / panel titles */ --t-xl: 1.5rem; /* 24px · page titles */ --t-2xl: 1.9375rem; /* 31px · figures */ --t-3xl: 2.5rem; /* 40px · hero figures */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.55; --lh-loose: 1.7; --tr-display: -0.022em; --tr-tight: -0.012em; --tr-normal: -0.004em; --tr-label: 0.02em; /* --- Space ----------------------------------------------------------- */ --s-1: 0.125rem; --s-2: 0.25rem; --s-3: 0.375rem; --s-4: 0.5rem; --s-5: 0.625rem; --s-6: 0.75rem; --s-8: 1rem; --s-10: 1.25rem; --s-12: 1.5rem; --s-14: 1.75rem; --s-16: 2rem; --s-20: 2.5rem; --s-24: 3rem; --s-32: 4rem; --s-40: 5rem; /* --- Radius — tight, technical --------------------------------------- */ --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-pill: 999px; /* --- Elevation — only floating things get shadow --------------------- */ --sh-pop: 0 1px 2px oklch(0.2 0 0 / 0.06), 0 6px 16px -4px oklch(0.2 0 0 / 0.12); --sh-drawer:0 0 0 1px oklch(0.2 0 0 / 0.05), -12px 0 40px -12px oklch(0.2 0 0 / 0.18); --sh-modal: 0 0 0 1px oklch(0.2 0 0 / 0.05), 0 24px 60px -16px oklch(0.2 0 0 / 0.30); --sh-paper: 0 1px 1px oklch(0.2 0 0 / 0.04), 0 8px 28px -10px oklch(0.2 0 0 / 0.14); /* --- Z scale — semantic, never 9999 ---------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-dropdown: 30; --z-drawer: 40; --z-backdrop: 50; --z-modal: 60; --z-toast: 70; --z-tooltip: 80; --z-demo: 90; /* --- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 320ms; /* --- Layout ---------------------------------------------------------- */ --nav-w: 232px; --nav-w-collapsed: 60px; --header-h: 56px; --page-max: 1440px; --reading-max: 68ch; } /* Font-variation: Archivo carries a width axis. Expanded is our display voice. */ .u-expanded { font-stretch: 112%; } .u-condensed { font-stretch: 88%; } /* Every figure in this product is tabular. Ledgers must align. */ .mono, .num, td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'zero' 1; letter-spacing: -0.015em; } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; } }