/* ========================================================================== Kito Design System — tokens.css Extracted 2026-07-03 from Figma "Kito" → page "⮑ Agentic" (node 211-15). Every value below was observed in the MVP screens; clusters and conflicts are noted inline. Rule: components use tokens only — no raw hex, px radii, or shadows in component code. ========================================================================== */ /* Typography uses Helvetica Neue throughout. The site declares its self-hosted Nimbus Sans fallback in /assets/css/fonts.css. */ :root { /* ------------------------------------------------------------------ COLOR — background & surface Warm off-white world. Page bg is not white; white is reserved for cards/panels so elevation reads without heavy shadows. ------------------------------------------------------------------ */ --color-bg: #F7F7F4; /* page background; also inset rows on white cards */ --color-surface: #FFFFFF; /* cards, tables, panels, inputs */ --color-surface-sunken: #F2F1ED; /* inactive filter pills, inset editor panels */ --color-surface-muted: #E6E5DF; /* secondary buttons, option buttons, progress tracks */ --color-surface-muted-hover: #D8D6CD; /* hover for secondary buttons, icon buttons, outline fill */ --color-surface-strong: #EBEAE4; /* user chips, callout bars, segmented track, glass tint */ /* Glass panels: fill + backdrop blur + hairline border, always together */ --glass-light: rgba(255, 255, 255, 0.8); /* docked composer, question cards */ --glass-tinted: rgba(235, 234, 228, 0.9); /* home composer, modal (= #EBEAE4 @ 90%) */ --glass-blur: 18px; --color-scrim: rgba(247, 247, 244, 0.8); /* overlay scrim — LIGHT, page fades out (never black) */ /* ------------------------------------------------------------------ COLOR — ink Source contained two near-blacks with overlapping roles (#26251E warm on UI chrome, #2B2B2E cool on data). Resolved 2026-07-03: merged to ONE ink, #26251E. #2B2B2E (and #32312A, #000000) must not appear in new code — text and dark fills all use -primary. ------------------------------------------------------------------ */ --color-text-primary: #26251E; --color-text-primary-hover: #3D3A31; /* hover for dark buttons (primary, chevron, active enter) — lightened, since near-black can't darken visibly */ --color-text-secondary: #77766F; /* secondary labels, placeholders, timestamps, ranges */ --color-text-secondary-hover: #5F5D57; /* hover for the muted button (Show Quick Wins) */ --color-text-muted: #A09F9B; /* inactive nav, hints, "MISSING", legend note */ --color-text-faint: #B8B6AF; /* count suffix on dark pills */ --color-text-on-dark: #FFFFFF; --color-text-on-accent: #F7F7F4; /* text on rust fills (source uses both #FFF and #F7F7F4) */ /* ------------------------------------------------------------------ COLOR — accent & semantic Rust is the single brand accent: it means "needs attention" on data (issue counts, low scores, before-bars) AND "selected/active" on controls (checked checkbox, chosen option, uploaded file). Green means resolved/positive: ready dots, completeness, Accept. There is no separate danger red or info blue in these screens. ------------------------------------------------------------------ */ --color-accent: #BB3D13; /* rust / burnt orange */ --color-accent-hover: #A83610; /* derived: accent darkened ~8% (no hover state in source) */ --color-accent-subtle: rgba(187, 61, 19, 0.08); /* derived tint for hover washes */ --color-success: #35765C; --color-success-hover: #2E6750; /* derived */ --color-warning: #A66500; /* observed only in source-attribution; reserve for warnings */ --color-danger: var(--color-accent); /* destructive = accent in this system (Delete is dark, not red) */ --color-info: #3575B9; /* observed only in source-attribution */ /* Source-attribution palette (description editor + legend dots) */ --color-attr-original: #595854; --color-attr-image: #3575B9; --color-attr-attributes: #3E831F; /* also used for AI-filled input values */ --color-attr-trend: #B250A2; --color-attr-intent: #A66500; --color-attr-other: #9F9D93; --color-ai-filled: #3E831F; /* green text for values the agent filled in */ /* ------------------------------------------------------------------ COLOR — border Hairlines (0.5px) are a signature: glass panels and outline buttons use half-pixel strokes; structural dividers use 1px. ⚠ Merged near-duplicates: #D1D0CB≈#D1D1CB, #E1E1DD/#E9E9E3→#E6E5DF, #D8D7D5→#DEDBD3 (see extraction-report.md). ------------------------------------------------------------------ */ --color-border: #DEDBD3; /* table dividers, count boxes — 1px */ --color-border-subtle: #E6E5DF; /* dividers inside cards, input strokes — 1px */ --color-border-strong: #CCCBC6; /* outline buttons, dropzone — 0.5px hairline */ --color-border-glass: #D1D0CB; /* hairline on glass panels — 0.5px */ /* ------------------------------------------------------------------ TYPOGRAPHY Helvetica Neue — content, UI, catalogue figures and metric labels. Keep the role tokens for existing components; all share one family. ------------------------------------------------------------------ */ --font-body: "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, sans-serif; --font-mono: var(--font-body); --font-extended: var(--font-body); --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* only for the lead-in word of callout bars */ /* Type scale — simplified 2026-07-03 to a clean even ladder (10/12/14/16/ 18/20). The source's odd sizes (9, 11, 13) each snapped UP to the next even step. Labels are Medium + UPPERCASE + tracked; content is Regular + sentence case. That casing split is the core typographic rule. */ --text-xs: 10px; /* micro labels: chips, table column headers, card metric labels, timestamps, segmented tabs */ --text-sm: 12px; /* THE label workhorse: buttons, row labels, stat rows, sidebar, placeholders, modal titles, score values */ --text-md: 14px; /* titles in lists & tables, section headers, SKUs, long table cells */ --text-lg: 16px; /* user chat text, card titles, form field values */ --text-xl: 18px; /* assistant messages, agent questions */ --text-2xl: 20px; /* description editor body */ /* Line heights: auto (≈1) for single-line labels; these for flowing text */ --leading-tight: 1.2; /* 14px table text, 12px mono data */ --leading-base: 1.35; /* 18px messages, 20px editor body */ /* Letter spacing — tracked uppercase is the house style */ --tracking-label: 0.08em; /* all uppercase UI labels and buttons */ --tracking-wide: 0.10em; /* 10–12px Extended micro labels and score values */ --tracking-wider: 0.14em; /* "MISSING" tag */ --tracking-body: 0.03em; /* 14px table long-text only */ --tracking-none: 0; /* ------------------------------------------------------------------ SPACING — 5px grid. Token number = the multiple (--space-4 = 4×5 = 20). Regularized 2026-07-03 to a strict 5px grid: 6→5, 14→15, 18→20 (18 folded into 20, so the old --space-4/-5 collapsed into one). Steps 25 (--space-5) and 35 (--space-7) sit on the grid but are unused today — add them if a layout needs them. ------------------------------------------------------------------ */ --space-1: 5px; /* micro: icon-to-hint gaps, chip padding */ --space-2: 10px; /* base gap everywhere: card grids, button icon-gap */ --space-3: 15px; /* tight paddings: pills, segmented gap */ --space-4: 20px; /* THE padding: card & row padding, item gaps, page gutter */ --space-6: 30px; /* panel padding (search overlay) */ --space-8: 40px; /* section gaps, modal padding, suggestion-card padding */ /* Layout */ --page-gutter: 20px; /* sidebar + user row sit 20px from edges */ --sidebar-width: 200px; --content-width: 1050px; /* main column; content starts at x≈330 */ --content-narrow: 640px; /* composer, message column, modal */ /* ------------------------------------------------------------------ SHAPE — radii Clustered from observed values; raw values in parentheses. ------------------------------------------------------------------ */ --radius-xs: 6px; /* count boxes (6), checkbox (4) */ --radius-sm: 10px; /* chips (10), chevron button (9), segmented thumb (8) */ --radius-md: 15px; /* THE workhorse: buttons, inputs, rows, stat cards (15), product cards (12), filter pills (13) */ --radius-lg: 22px; /* insight bar (22), search panel + table container (20) */ --radius-xl: 30px; /* composer, modal, suggestion cards, report cards */ --radius-full: 999px; /* progress bars, dots, pie badge */ /* Borders */ --border-hairline: 0.5px; /* glass panels, outline buttons, chips */ --border-thin: 1px; /* dividers, table borders, input strokes */ /* ------------------------------------------------------------------ DEPTH — one soft shadow family, 6% black, no hard elevation. Glass = fill + blur + hairline (see --glass-*). ------------------------------------------------------------------ */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); /* segmented thumb */ --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06); /* buttons, inputs, cards, chevron buttons */ --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08); /* filled buttons on hover — a touch deeper/wider for lift */ --shadow-lg: 0 0 45px rgba(0, 0, 0, 0.06); /* overlays: search panel, full-table view */ /* ------------------------------------------------------------------ CONTROL SIZES — heights are fixed, not content-derived ------------------------------------------------------------------ */ --control-lg: 48px; /* buttons, inputs, file chips, icon buttons */ --control-md: 40px; /* bulk-fill buttons, count boxes */ --control-sm: 32px; /* callout-bar buttons */ --control-pill: 36px; /* filter pills */ --control-chip: 28px; /* outlined chips */ --control-tap: 24px; /* chevron buttons */ --checkbox-size: 18px; --dot-size: 16px; /* status dots */ --icon-size: 12px; /* default icon glyph inside controls */ --icon-lg: 18px; /* search icon, alert badge */ --progress-h: 10px; /* standard bar */ --progress-hero-h: 24px; /* headline completeness bar */ /* ------------------------------------------------------------------ MOTION — ⚠ not specified in the Figma source (static frames). Proposed defaults consistent with the calm aesthetic; confirm. Animate opacity and transform only; never animate layout, blur, or letter-spacing. ------------------------------------------------------------------ */ --duration-fast: 120ms; --duration-base: 200ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); } /* -------------------------------------------------------------------------- CORNER SMOOTHING — iOS-style squircle on every rounded corner. `corner-shape` reshapes the curve inside the size set by border-radius; border, box-shadow, outline and backdrop-filter all follow it (so Kito's shadows, hairlines and glass blur stay intact — the reason we do this natively instead of clip-path/JS). Progressive enhancement: browsers without corner-shape (Safari/Firefox as of 2026) ignore it and keep circular border-radius — no breakage. It only acts where a radius exists, so square boxes are untouched. `:where()` keeps specificity 0 so any component can override per-corner. EXCEPTION: circles & stadiums (--radius-full — dots, pies, pills, progress bars) must set `corner-shape: round`, or a squircle squares their ends. See the round-reset pattern in index.html / AGENT.md. -------------------------------------------------------------------------- */ :where(*, *::before, *::after) { corner-shape: squircle; }