/* ========================================================================== Flexopack — Design Tokens (OKLCH edition) -------------------------------------------------------------------------- Ported from FLEXOPACK-REAPER/extracted/css/tokens.css. Project-specific palette + font overrides live in theme.css. Shared vocabulary uses these semantic tokens, never raw color values. Cascade layers are declared here once for the whole project: tokens → theme → base → components → utilities. ========================================================================== */ @layer reset, tokens, theme, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- FONT FAMILIES (defaults; theme.css points --font-primary at the brand face) ---------------------------------------------------------------- */ --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-secondary: var(--font-primary); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---------------------------------------------------------------- PRIMARY COLOR + Dynamic Variants (--primary is set per-project in theme.css) ---------------------------------------------------------------- */ --primary: oklch(0.62 0.18 142); --primary-5: color-mix(in oklch, var(--primary) 5%, transparent); --primary-10: color-mix(in oklch, var(--primary) 10%, transparent); --primary-20: color-mix(in oklch, var(--primary) 20%, transparent); --primary-30: color-mix(in oklch, var(--primary) 30%, transparent); --primary-40: color-mix(in oklch, var(--primary) 40%, transparent); --primary-50: color-mix(in oklch, var(--primary) 50%, transparent); --primary-60: color-mix(in oklch, var(--primary) 60%, transparent); --primary-70: color-mix(in oklch, var(--primary) 70%, transparent); --primary-80: color-mix(in oklch, var(--primary) 80%, transparent); --primary-90: color-mix(in oklch, var(--primary) 90%, transparent); --primary-d-1: color-mix(in oklch, var(--primary), black 20%); --primary-d-2: color-mix(in oklch, var(--primary), black 40%); --primary-d-3: color-mix(in oklch, var(--primary), black 60%); --primary-d-4: color-mix(in oklch, var(--primary), black 80%); --primary-l-1: color-mix(in oklch, var(--primary), white 20%); --primary-l-2: color-mix(in oklch, var(--primary), white 40%); --primary-l-3: color-mix(in oklch, var(--primary), white 60%); --primary-l-4: color-mix(in oklch, var(--primary), white 80%); /* ---------------------------------------------------------------- SECONDARY COLOR + Dynamic Variants ---------------------------------------------------------------- */ --secondary: oklch(0.20 0 0); --secondary-5: color-mix(in oklch, var(--secondary) 5%, transparent); --secondary-10: color-mix(in oklch, var(--secondary) 10%, transparent); --secondary-20: color-mix(in oklch, var(--secondary) 20%, transparent); --secondary-30: color-mix(in oklch, var(--secondary) 30%, transparent); --secondary-40: color-mix(in oklch, var(--secondary) 40%, transparent); --secondary-50: color-mix(in oklch, var(--secondary) 50%, transparent); --secondary-60: color-mix(in oklch, var(--secondary) 60%, transparent); --secondary-70: color-mix(in oklch, var(--secondary) 70%, transparent); --secondary-80: color-mix(in oklch, var(--secondary) 80%, transparent); --secondary-90: color-mix(in oklch, var(--secondary) 90%, transparent); --secondary-d-1: color-mix(in oklch, var(--secondary), black 20%); --secondary-d-2: color-mix(in oklch, var(--secondary), black 40%); --secondary-d-3: color-mix(in oklch, var(--secondary), black 60%); --secondary-d-4: color-mix(in oklch, var(--secondary), black 80%); --secondary-l-1: color-mix(in oklch, var(--secondary), white 20%); --secondary-l-2: color-mix(in oklch, var(--secondary), white 40%); --secondary-l-3: color-mix(in oklch, var(--secondary), white 60%); --secondary-l-4: color-mix(in oklch, var(--secondary), white 80%); /* ---------------------------------------------------------------- SURFACE & TEXT ---------------------------------------------------------------- */ --bg-body: oklch(1 0 0); --bg-surface: oklch(0.98 0 0); --bg-elevated: oklch(1 0 0); --bg-muted: oklch(0.96 0 0); --text-body: oklch(0.20 0 0); --text-title: oklch(0 0 0); --text-muted: oklch(0.45 0 0); --text-light: oklch(1 0 0); --text-dark: oklch(0 0 0); --always-light: oklch(1 0 0); --always-dark: oklch(0 0 0); /* ---------------------------------------------------------------- LIGHT & DARK UTILITY COLORS (kept invariant — used for overlays on imagery regardless of theme) ---------------------------------------------------------------- */ --light: oklch(1 0 0); --light-5: color-mix(in oklch, var(--light) 5%, transparent); --light-10: color-mix(in oklch, var(--light) 10%, transparent); --light-20: color-mix(in oklch, var(--light) 20%, transparent); --light-30: color-mix(in oklch, var(--light) 30%, transparent); --light-40: color-mix(in oklch, var(--light) 40%, transparent); --light-50: color-mix(in oklch, var(--light) 50%, transparent); --light-60: color-mix(in oklch, var(--light) 60%, transparent); --light-70: color-mix(in oklch, var(--light) 70%, transparent); --light-80: color-mix(in oklch, var(--light) 80%, transparent); --light-90: color-mix(in oklch, var(--light) 90%, transparent); --dark: oklch(0 0 0); --dark-5: color-mix(in oklch, var(--dark) 5%, transparent); --dark-10: color-mix(in oklch, var(--dark) 10%, transparent); --dark-20: color-mix(in oklch, var(--dark) 20%, transparent); --dark-30: color-mix(in oklch, var(--dark) 30%, transparent); --dark-40: color-mix(in oklch, var(--dark) 40%, transparent); --dark-50: color-mix(in oklch, var(--dark) 50%, transparent); --dark-60: color-mix(in oklch, var(--dark) 60%, transparent); --dark-70: color-mix(in oklch, var(--dark) 70%, transparent); --dark-80: color-mix(in oklch, var(--dark) 80%, transparent); --dark-90: color-mix(in oklch, var(--dark) 90%, transparent); /* ---------------------------------------------------------------- GRAY RAMP ---------------------------------------------------------------- */ --gray: oklch(0.18 0 0); --gray-d-1: color-mix(in oklch, var(--gray), black 20%); --gray-d-2: color-mix(in oklch, var(--gray), black 40%); --gray-d-3: color-mix(in oklch, var(--gray), black 60%); --gray-d-4: color-mix(in oklch, var(--gray), black 80%); --gray-l-1: color-mix(in oklch, var(--gray), white 20%); --gray-l-2: color-mix(in oklch, var(--gray), white 40%); --gray-l-3: color-mix(in oklch, var(--gray), white 60%); --gray-l-4: color-mix(in oklch, var(--gray), white 80%); /* ---------------------------------------------------------------- FEEDBACK COLORS ---------------------------------------------------------------- */ --success: oklch(0.58 0.19 142); --success-10: color-mix(in oklch, var(--success) 10%, transparent); --success-20: color-mix(in oklch, var(--success) 20%, transparent); --success-d-1: color-mix(in oklch, var(--success), black 20%); --error: oklch(0.63 0.26 29); --error-10: color-mix(in oklch, var(--error) 10%, transparent); --error-20: color-mix(in oklch, var(--error) 20%, transparent); --error-d-1: color-mix(in oklch, var(--error), black 20%); /* ---------------------------------------------------------------- BORDER & SHADOW ---------------------------------------------------------------- */ --border-primary: oklch(0.50 0 0 / 0.25); --shadow-primary: oklch(0 0 0 / 0.15); /* ---------------------------------------------------------------- SPACING — using rem for a 10px = 1rem base (set in base.css via 62.5%) Values mirror the extracted draft; some clamp() entries are kept for fluid future expansion even where they currently resolve to a single value (matches reference fidelity). ---------------------------------------------------------------- */ --space-4xs: 0.2rem; --space-3xs: 0.4rem; --space-2xs: 0.6rem; --space-xs: 0.8rem; --space-s: 1.2rem; --space-m: 1.6rem; --space-l: 2rem; --space-xl: 2.4rem; --space-2xl: 2.8rem; --space-3xl: 4rem; --space-4xl: 4.8rem; --space-5xl: 6.4rem; --space-6xl: 8rem; --space-7xl: 9.6rem; --space-8xl: 11.2rem; --space-9xl: 12.8rem; /* ---------------------------------------------------------------- TYPOGRAPHY SCALE ---------------------------------------------------------------- */ --text-4xs: 0.6rem; --text-3xs: 0.8rem; --text-2xs: 1rem; --text-xs: 1.2rem; --text-s: 1.4rem; --text-m: 1.6rem; --text-ml: 1.8rem; --text-l: 2rem; --text-xl: 2.4rem; --text-2xl: clamp(3.2rem, calc(0.38vw + 3.08rem), 3.6rem); --text-3xl: clamp(3.6rem, calc(1.15vw + 3.23rem), 4.8rem); --text-4xl: clamp(4.8rem, calc(1.15vw + 4.43rem), 6rem); --text-5xl: clamp(6rem, calc(1.15vw + 5.63rem), 7.2rem); --hero-title-size: var(--text-4xl); --post-title-size: var(--text-2xl); --nav-link-size: var(--text-s); --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.75; /* ---------------------------------------------------------------- LAYOUT ---------------------------------------------------------------- */ --section-padding-y: clamp(3rem, calc(3rem + ((1vw - 0.32rem) * 2.8681)), 6rem); --section-padding-x: clamp(1rem, calc(1rem + ((1vw - 0.32rem) * 1.912)), 3rem); --container-width: 1366px; --container-narrow: 96rem; --columns-1: repeat(1, minmax(0, 1fr)); --columns-2: repeat(2, minmax(0, 1fr)); --columns-3: repeat(3, minmax(0, 1fr)); --columns-4: repeat(4, minmax(0, 1fr)); --columns-5: repeat(5, minmax(0, 1fr)); --columns-6: repeat(6, minmax(0, 1fr)); /* ---------------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------------- */ --radius-xs: 0.3rem; --radius-s: 0.5rem; --radius-m: 1rem; --radius-l: 2rem; --radius-xl: 3rem; --radius-full: 999rem; /* ---------------------------------------------------------------- SHADOWS ---------------------------------------------------------------- */ --shadow-xs: 0 1px 2px var(--shadow-primary); --shadow-s: 0 1.5px 3px var(--shadow-primary); --shadow-m: 0 2px 6px var(--shadow-primary); --shadow-l: 0 3px 12px var(--shadow-primary); --shadow-xl: 0 6px 48px var(--shadow-primary); /* ---------------------------------------------------------------- MOTION ---------------------------------------------------------------- */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); } }