/* ============================================================ Atelier — Design Tokens The single source of truth for the system. Every other CSS file (components.css, patterns.css) and every prototype reads from these vars. Override only --primary* on :root if you want to swap the brand color per app/tenant. Three ingredients are baked in here: 1. Excel rigor — strict scales, tabular numbers, hairlines 2. Artisan notebook — warm cream paper, soft shadows, organic primary 3. Modern sobriety — one sans, weight-based hierarchy, calm semantics ============================================================ */ @import url('fonts/fonts.css'); :root { /* ============================================================ PAPER & INK — warm-neutral, oklch Hue 75–85° (warm yellow-brown axis). Chroma always tiny on neutrals (0.003–0.012) — pure greys are forbidden. ============================================================ */ /* Paper layers (lightest to deepest) */ --paper: oklch(98.2% 0.006 80); /* app background — warm cream, NEVER pure white */ --paper-sunk: oklch(96.5% 0.007 80); /* sunk areas: page bg under floating panels */ /* Surface layers (cards, panels, dropdowns) */ --surface: oklch(99.2% 0.003 80); /* default card surface — slightly lighter than paper */ --surface-hover:oklch(96.8% 0.006 80); /* row hover, button-ghost hover */ --surface-press:oklch(94.5% 0.008 80); /* pressed states */ --surface-soft: oklch(95.5% 0.007 80); /* tinted panel (toolbar bg, locked-mode chrome) */ /* Ink (text + iconography) — warm dark, hue 50° (slightly redder than neutral) */ --ink: oklch(22% 0.012 55); /* headlines, primary text */ --ink-2: oklch(36% 0.010 55); /* body text */ --ink-3: oklch(50% 0.008 55); /* secondary, captions, labels */ --ink-4: oklch(64% 0.006 55); /* tertiary, placeholders, icons quiet */ --ink-5: oklch(78% 0.004 55); /* disabled, very low emphasis */ /* Rules (borders, dividers) */ --rule: oklch(91% 0.006 80); /* default hairline */ --rule-strong: oklch(85% 0.008 80); /* table column rule, panel divider */ --rule-soft: oklch(94% 0.005 80); /* very-light internal split */ /* ============================================================ PRIMARY — per-app brand accent Default: TERRACOTTA SOURD (warm, organic, artisan). Alternative: CHÊNE (oak green) — provided as :root[data-accent="oak"] override. The primary earns its appearances. NEVER body text, NEVER chrome borders, NEVER large fills. ============================================================ */ /* Default = terracotta sourd, hue 32° */ --primary: oklch(58% 0.135 32); /* base — buttons, active nav */ --primary-hover: oklch(52% 0.140 32); /* hover state */ --primary-press: oklch(46% 0.135 32); /* pressed */ --primary-soft: oklch(95% 0.030 32); /* very pale tint — active nav bg, focus halo bg */ --primary-tint: oklch(91% 0.045 32); /* slightly stronger tint — selected row */ --primary-ink: oklch(99% 0.005 80); /* text/icon on primary fill (warm white) */ --primary-deep: oklch(40% 0.110 32); /* darker variant for active text on light tint */ } /* Alternative accent: oak green — opt in by setting data-accent="oak" on */ :root[data-accent="oak"] { --primary: oklch(48% 0.080 145); /* darker, sourd green */ --primary-hover: oklch(43% 0.085 145); --primary-press: oklch(38% 0.080 145); --primary-soft: oklch(95% 0.022 145); --primary-tint: oklch(90% 0.040 145); --primary-ink: oklch(99% 0.005 80); --primary-deep: oklch(32% 0.075 145); } /* ============================================================ SEMANTIC — calm, never strident Backgrounds are very low chroma (0.025–0.04), foregrounds are the actual signal. Always paired with text or an icon — never color-alone meaning. ============================================================ */ :root { --success: oklch(50% 0.110 145); --success-bg: oklch(96% 0.030 145); --success-rule:oklch(85% 0.060 145); --warning: oklch(58% 0.130 75); --warning-bg: oklch(96% 0.045 75); --warning-rule:oklch(86% 0.080 75); --danger: oklch(54% 0.180 28); --danger-bg: oklch(96% 0.030 28); --danger-rule: oklch(87% 0.075 28); --info: oklch(54% 0.110 240); --info-bg: oklch(96% 0.030 240); --info-rule: oklch(86% 0.060 240); /* ============================================================ TYPOGRAPHY ONE sans (Public Sans), ONE mono (JetBrains Mono). No serif companion — by design. Hierarchy via weight + size + tracking, NEVER via a second family. ============================================================ */ --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Size scale — 8 steps, ratio ~1.18 (gentle minor third) */ --fs-2xs: 10px; /* micro-labels, tag pip text */ --fs-xs: 11px; /* filter inputs, breadcrumbs, table column headers */ --fs-sm: 12px; /* secondary text, table rows in dense mode */ --fs-md: 13px; /* default UI text — toolbar, button label, body in dense panels */ --fs-base: 14px; /* body — comfortable reading */ --fs-lg: 16px; /* section heading, card title */ --fs-xl: 20px; /* page title (h2) */ --fs-2xl: 26px; /* page header (h1) */ --fs-3xl: 36px; /* display — KPIs, marketing-style headlines */ /* Line-heights */ --lh-tight: 1.15; /* display, h1, h2 */ --lh-snug: 1.35; /* h3, button, table header */ --lh-base: 1.5; /* body */ --lh-loose: 1.65; /* long-form prose */ /* Letter-spacing — restrained */ --tracking-tight: -0.018em; /* large display */ --tracking-h: -0.012em; /* h1/h2 */ --tracking-base: 0; --tracking-wide: 0.015em; --tracking-caps: 0.06em; /* uppercase labels */ /* Weights — semantic */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ============================================================ SPACING — 4px base, productive density Used for padding, gap, margin. The system penche productif: 16px ≈ default container padding; 8px ≈ tight gaps. ============================================================ */ --space-0_5: 2px; --space-1: 4px; --space-1_5: 6px; --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; --space-24: 96px; /* ============================================================ SIZE PRIMITIVES — productive density Rows 32, toolbar 36, controls 32 — between Linear and Notion. ============================================================ */ --row-h: 32px; /* table row, dense list */ --row-h-lg: 40px; /* comfortable list row */ --toolbar-h: 36px; /* panel toolbar, page header bar */ --topbar-h: 48px; /* app top bar */ --control-h: 32px; /* button, input, select default */ --control-h-sm: 26px; /* compact (filter chip, table-inline) */ --control-h-lg: 38px; /* primary CTA in marketing surfaces */ --nav-w: 232px; /* sidebar width */ /* ============================================================ RADII — gentle, never pill except for pip ============================================================ */ --radius-xs: 4px; /* tag, inline pip */ --radius-sm: 6px; /* button, input, small card */ --radius-md: 8px; /* panel, modal */ --radius-lg: 12px; /* large card, hero block */ --radius-pill: 9999px; /* ============================================================ SHADOWS — paper-on-paper, never heavy Only THREE levels. No glow, no inner shadow. ============================================================ */ --shadow-1: 0 1px 0 rgba(28, 25, 23, 0.03), 0 1px 2px rgba(28, 25, 23, 0.04); --shadow-2: 0 1px 0 rgba(28, 25, 23, 0.04), 0 4px 12px -4px rgba(28, 25, 23, 0.10), 0 2px 4px rgba(28, 25, 23, 0.04); --shadow-3: 0 8px 28px -8px rgba(28, 25, 23, 0.18), 0 4px 8px rgba(28, 25, 23, 0.06); --scrim: rgba(28, 22, 20, 0.22); /* ============================================================ MOTION — quick, no bounce. The product responds, not animates. ============================================================ */ --dur-fast: 100ms; --dur-base: 140ms; --dur-slow: 220ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* ease-out, no overshoot */ /* ============================================================ Z-LAYERS ============================================================ */ --z-popover: 40; --z-modal: 50; --z-toast: 60; /* ============================================================ FOCUS — universal accessibility token ============================================================ */ --focus-ring: 0 0 0 3px color-mix(in oklch, var(--primary) 28%, transparent); } /* ============================================================ BASE — html / body defaults. Numbers always tabular-nums. Antialiasing on. Body ink-2. ============================================================ */ html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink-2); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Tabular numerals everywhere by default — this is a data tool. */ table, .num, [data-num], input[type="number"] { font-variant-numeric: tabular-nums; } /* Universal focus ring */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: inherit; }