/* ──────────────────────────────────────────────────────────────────────────── DESIGN TOKEN PRIMITIVES ──────────────────────────────────────────────────────────────────────────── This file is the single source of truth for every raw design value in the kit: colour ramps, spacing, radii, type, elevation, motion. It is MACHINE-OWNED. The `figma-sync` skill rewrites it wholesale from your Figma Variables, so: • Do not add component-specific rules here — only `--ui-*` primitives. • Do not reference these primitives from component code. Components use the semantic layer in theme.css (`bg-background`, `text-primary`, …). That indirection is what lets a Figma re-sync restyle the whole kit without touching a single .tsx file. Colours are oklch: perceptually uniform, so a ramp built by walking the lightness channel stays visually even, and hue rotations do not shift apparent brightness. ──────────────────────────────────────────────────────────────────────────── */ :root { /* ── Neutral ───────────────────────────────────────────────────────────── Very slightly cool grey. Used for surfaces, text and borders. */ --ui-color-neutral-50: oklch(0.985 0.001 265); --ui-color-neutral-100: oklch(0.967 0.002 265); --ui-color-neutral-200: oklch(0.928 0.004 265); --ui-color-neutral-300: oklch(0.871 0.006 265); --ui-color-neutral-400: oklch(0.704 0.01 265); --ui-color-neutral-500: oklch(0.554 0.012 265); --ui-color-neutral-600: oklch(0.446 0.012 265); --ui-color-neutral-700: oklch(0.373 0.011 265); --ui-color-neutral-800: oklch(0.279 0.009 265); --ui-color-neutral-900: oklch(0.208 0.007 265); --ui-color-neutral-950: oklch(0.145 0.006 265); /* ── Brand ─────────────────────────────────────────────────────────────── The one hue to change when rebranding the kit by hand. */ --ui-color-brand-50: oklch(0.97 0.014 264); --ui-color-brand-100: oklch(0.936 0.032 264); --ui-color-brand-200: oklch(0.885 0.062 264); --ui-color-brand-300: oklch(0.812 0.101 264); --ui-color-brand-400: oklch(0.712 0.152 264); --ui-color-brand-500: oklch(0.606 0.192 264); --ui-color-brand-600: oklch(0.535 0.203 264); --ui-color-brand-700: oklch(0.468 0.183 264); --ui-color-brand-800: oklch(0.4 0.15 264); --ui-color-brand-900: oklch(0.343 0.121 264); --ui-color-brand-950: oklch(0.256 0.088 264); /* ── Status ────────────────────────────────────────────────────────────── Three ramps kept deliberately short — only the steps the kit actually uses for text, surface and border of each status. */ --ui-color-success-100: oklch(0.945 0.062 152); --ui-color-success-300: oklch(0.845 0.13 152); --ui-color-success-500: oklch(0.68 0.17 152); --ui-color-success-700: oklch(0.516 0.128 152); --ui-color-success-900: oklch(0.375 0.09 152); --ui-color-warning-100: oklch(0.962 0.06 85); --ui-color-warning-300: oklch(0.884 0.132 85); --ui-color-warning-500: oklch(0.795 0.162 75); --ui-color-warning-700: oklch(0.606 0.13 62); --ui-color-warning-900: oklch(0.44 0.1 55); --ui-color-danger-100: oklch(0.944 0.033 27); --ui-color-danger-300: oklch(0.837 0.09 27); --ui-color-danger-500: oklch(0.637 0.208 27); --ui-color-danger-700: oklch(0.514 0.19 27); --ui-color-danger-900: oklch(0.396 0.145 27); /* ── Data visualisation ────────────────────────────────────────────────── Categorical ramp: hues spaced far enough apart to stay distinguishable, matched in lightness and chroma so no series looks louder than another. */ --ui-color-chart-1: oklch(0.62 0.19 264); --ui-color-chart-2: oklch(0.66 0.15 190); --ui-color-chart-3: oklch(0.7 0.16 145); --ui-color-chart-4: oklch(0.76 0.15 85); --ui-color-chart-5: oklch(0.64 0.2 15); /* ── Radius ────────────────────────────────────────────────────────────── Everything derives from --ui-radius so one edit re-rounds the whole kit. */ --ui-radius: 0.625rem; --ui-radius-sm: calc(var(--ui-radius) - 4px); --ui-radius-md: calc(var(--ui-radius) - 2px); --ui-radius-lg: var(--ui-radius); --ui-radius-xl: calc(var(--ui-radius) + 4px); --ui-radius-full: 9999px; /* ── Spacing ───────────────────────────────────────────────────────────── 4px base step. Tailwind's own scale is derived from --spacing below. */ --ui-space-base: 0.25rem; /* ── Typography ────────────────────────────────────────────────────────── System stacks by default: zero network cost and no licence question. Point these at your brand faces after loading them in the consuming app. */ --ui-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ui-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* ── Elevation ─────────────────────────────────────────────────────────── Two-layer shadows (tight contact shadow + soft ambient) read as real depth; a single blurred shadow reads as a grey smudge. */ --ui-shadow-xs: 0 1px 2px 0 oklch(0.145 0.006 265 / 0.05); --ui-shadow-sm: 0 1px 2px -1px oklch(0.145 0.006 265 / 0.1), 0 1px 3px 0 oklch(0.145 0.006 265 / 0.1); --ui-shadow-md: 0 2px 4px -2px oklch(0.145 0.006 265 / 0.1), 0 4px 6px -1px oklch(0.145 0.006 265 / 0.1); --ui-shadow-lg: 0 4px 6px -4px oklch(0.145 0.006 265 / 0.1), 0 10px 15px -3px oklch(0.145 0.006 265 / 0.1); --ui-shadow-xl: 0 8px 10px -6px oklch(0.145 0.006 265 / 0.1), 0 20px 25px -5px oklch(0.145 0.006 265 / 0.1); /* ── Motion ────────────────────────────────────────────────────────────── Durations short enough to feel instant; the standard easing is asymmetric so movement starts fast and settles gently. */ --ui-duration-fast: 120ms; --ui-duration-base: 180ms; --ui-duration-slow: 280ms; --ui-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ui-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* ── Stacking ──────────────────────────────────────────────────────────── Named layers stop overlay z-index from becoming a guessing game. */ --ui-z-dropdown: 1000; --ui-z-sticky: 1100; --ui-z-overlay: 1200; --ui-z-modal: 1300; --ui-z-popover: 1400; --ui-z-toast: 1500; --ui-z-tooltip: 1600; }