/* ========================================================================= DESIGN TOKENS Single source of truth for color, type, space, shape, motion. Every other stylesheet in this project (styles.css, components.css) reads these via var(--...) rather than hardcoding values. Format: plain CSS custom properties — drops into a Tailwind v4 `@theme { ... }` block unchanged if this project ever adopts a build step, but works with zero tooling as-is. When the real Figma spec lands, update the PRIMITIVE values below (colors, base font sizes) — the SEMANTIC tokens and every component that consumes them stay untouched. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. COLOR — PRIMITIVES Neutral = low-saturation blue-gray. Accent = brand hue (indigo, 255°). All pairings below are checked against WCAG AA (4.5:1 body text, 3:1 large text / UI components). Replace with Figma values later. --------------------------------------------------------------------- */ --color-neutral-0: #fcfcfd; --color-neutral-50: #f6f7f8; --color-neutral-100: #eeeff2; --color-neutral-200: #dddfe4; --color-neutral-300: #c0c4ce; --color-neutral-400: #989fae; --color-neutral-500: #70798f; --color-neutral-600: #555c6d; --color-neutral-700: #3f4450; --color-neutral-800: #282c33; --color-neutral-900: #191b1f; --color-neutral-950: #101114; --color-accent-50: #f5f2fc; --color-accent-100: #e7e2f9; --color-accent-200: #ccc0f2; --color-accent-300: #a792e8; --color-accent-400: #7f5fdd; --color-accent-500: #562dd2; /* AA on white: 7.58:1 */ --color-accent-600: #4825b1; /* AA on white: 9.42:1 — use for button bg */ --color-accent-700: #3b1e8f; --color-accent-800: #2e1872; --color-accent-900: #221254; --color-success-600: #15803d; --color-warning-600: #a16207; --color-danger-600: #b91c1c; /* --------------------------------------------------------------------- 2. COLOR — SEMANTIC (light theme, default) --------------------------------------------------------------------- */ --color-bg: var(--color-neutral-0); --color-surface: var(--color-neutral-50); --color-surface-raised: #ffffff; --color-border: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); --color-text: var(--color-neutral-900); --color-text-muted: var(--color-neutral-700); --color-text-on-accent: var(--color-neutral-0); --color-primary: var(--color-accent-600); --color-primary-hover: var(--color-accent-700); --color-primary-active: var(--color-accent-800); --color-focus-ring: var(--color-accent-500); --color-success: var(--color-success-600); --color-warning: var(--color-warning-600); --color-danger: var(--color-danger-600); /* --------------------------------------------------------------------- 3. TYPE — fluid scale (Utopia-style clamp, 320px -> 1240px viewport, 16px -> 19px base, 1.2 -> 1.25 ratio). No breakpoint jumps. --------------------------------------------------------------------- */ --font-family-base: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; --font-size-n2: clamp(0.6944rem, 0.6716rem + 0.114vw, 0.76rem); --font-size-n1: clamp(0.8333rem, 0.7928rem + 0.2029vw, 0.95rem); --font-size-0: clamp(1rem, 0.9348rem + 0.3261vw, 1.1875rem); --font-size-1: clamp(1.2rem, 1.1011rem + 0.4946vw, 1.4844rem); --font-size-2: clamp(1.44rem, 1.2955rem + 0.7226vw, 1.8555rem); --font-size-3: clamp(1.728rem, 1.5223rem + 1.0284vw, 2.3193rem); --font-size-4: clamp(2.0736rem, 1.7864rem + 1.4358vw, 2.8992rem); --font-size-5: clamp(2.4883rem, 2.0933rem + 1.975vw, 3.624rem); --font-size-6: clamp(2.986rem, 2.449rem + 2.6852vw, 4.53rem); --line-height-tight: 1.15; --line-height-base: 1.5; --line-height-loose: 1.7; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* --------------------------------------------------------------------- 4. SPACE — fluid scale, same viewport range as type --------------------------------------------------------------------- */ --space-3xs: clamp(0.25rem, 0.2337rem + 0.0815vw, 0.2969rem); --space-2xs: clamp(0.5rem, 0.4674rem + 0.163vw, 0.5938rem); --space-xs: clamp(0.75rem, 0.7011rem + 0.2446vw, 0.8906rem); --space-s: clamp(1rem, 0.9348rem + 0.3261vw, 1.1875rem); --space-m: clamp(1.5rem, 1.4022rem + 0.4891vw, 1.7812rem); --space-l: clamp(2rem, 1.8696rem + 0.6522vw, 2.375rem); --space-xl: clamp(3rem, 2.8043rem + 0.9783vw, 3.5625rem); --space-2xl: clamp(4rem, 3.7391rem + 1.3043vw, 4.75rem); --space-3xl: clamp(6rem, 5.6087rem + 1.9565vw, 7.125rem); /* One-up pairs — cross from one step's @min-viewport value to the next step's @max-viewport value. Use these where an element should grow more dramatically than the base scale allows (hero padding, a card gap that should open up more on large screens, etc). Same Utopia "space palette" pattern — https://utopia.fyi/space/calculator/ */ --space-3xs-2xs: clamp(0.25rem, 0.1304rem + 0.5978vw, 0.5938rem); --space-2xs-xs: clamp(0.5rem, 0.3641rem + 0.6793vw, 0.8906rem); --space-xs-s: clamp(0.75rem, 0.5978rem + 0.7609vw, 1.1875rem); --space-s-m: clamp(1rem, 0.7283rem + 1.3587vw, 1.7812rem); --space-m-l: clamp(1.5rem, 1.1957rem + 1.5217vw, 2.375rem); --space-l-xl: clamp(2rem, 1.4565rem + 2.7174vw, 3.5625rem); --space-xl-2xl: clamp(3rem, 2.3913rem + 3.0435vw, 4.75rem); --space-2xl-3xl: clamp(4rem, 2.913rem + 5.4348vw, 7.125rem); /* --------------------------------------------------------------------- 5. LAYOUT — breakpoints & containers CSS custom properties can't be read inside @media conditions, so these exist as the documented source of truth to copy into @media rules (see styles.css) and to read from JS if needed. --------------------------------------------------------------------- */ --breakpoint-sm: 480px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --container-max: 70rem; /* 1120px — matches the original site's --max-width */ --container-padding: var(--space-m); --grid-gap: var(--space-m); /* --------------------------------------------------------------------- 6. SHAPE, ELEVATION, MOTION --------------------------------------------------------------------- */ --radius-sm: 0.375rem; --radius-md: 0.625rem; /* ~10px — matches the original site's --radius */ --radius-lg: 1rem; --radius-full: 999px; --border-width: 1px; --border-width-thick: 2px; --shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.06); --shadow-md: 0 8px 24px rgba(16, 17, 20, 0.08); --shadow-lg: 0 12px 32px rgba(16, 17, 20, 0.14); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --easing-standard: cubic-bezier(0.2, 0, 0, 1); --focus-ring-width: 2px; --focus-ring-offset: 2px; } /* ========================================================================= DARK THEME — same semantic names, different primitive mapping. Not wired to a toggle yet; set data-theme="dark" on when ready. ========================================================================= */ [data-theme="dark"] { --color-bg: var(--color-neutral-950); --color-surface: var(--color-neutral-900); --color-surface-raised: var(--color-neutral-800); --color-border: var(--color-neutral-700); --color-border-strong: var(--color-neutral-600); --color-text: var(--color-neutral-50); --color-text-muted: var(--color-neutral-300); --color-text-on-accent: var(--color-neutral-0); --color-primary: var(--color-accent-400); --color-primary-hover: var(--color-accent-300); --color-primary-active: var(--color-accent-200); --color-focus-ring: var(--color-accent-300); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }