/* ========================================================================== TheCalculatory — Design Tokens (v2) Evolved from Design_test/precision_utility/DESIGN.md THIS IS THE SINGLE SOURCE OF TRUTH FOR ALL VISUAL VALUES. No hex, px, radius or shadow may appear anywhere else. Stylelint enforces this and fails the build on violation. Colour is authored in OKLCH: perceptually uniform, so tints and gradients stay even in lightness instead of muddying the way HSL does. Names are SEMANTIC so a dark theme is an additive block, not a rewrite. ========================================================================== */ @property --grad-angle { syntax: ""; inherits: false; initial-value: 135deg; } :root { color-scheme: light; /* ---------- Brand ramp ---------- */ --brand-50: oklch(97.5% 0.014 258); --brand-100: oklch(94.5% 0.032 258); --brand-200: oklch(89% 0.062 258); --brand-300: oklch(81% 0.098 258); --brand-400: oklch(70% 0.148 258); --brand-500: oklch(61% 0.191 258); --brand-600: oklch(54% 0.213 262); --brand-700: oklch(47% 0.196 264); --brand-800: oklch(40% 0.163 264); --brand-900: oklch(33% 0.122 264); /* Indigo partner — used only for brand gradients, never for text */ --indigo-400: oklch(70% 0.148 276); --indigo-500: oklch(61% 0.191 278); --indigo-600: oklch(54% 0.208 280); /* ---------- Neutral ramp (cool, slightly blue) ---------- */ --n-0: oklch(100% 0 0); --n-25: oklch(99% 0.002 258); --n-50: oklch(98% 0.004 258); --n-100: oklch(96.3% 0.006 258); --n-150: oklch(94% 0.008 258); --n-200: oklch(91% 0.011 258); --n-300: oklch(85% 0.015 258); --n-400: oklch(70% 0.022 258); --n-500: oklch(58% 0.026 258); --n-600: oklch(48% 0.030 258); --n-700: oklch(38% 0.032 260); --n-800: oklch(28% 0.032 262); --n-900: oklch(21% 0.030 264); --n-950: oklch(16% 0.026 264); /* ---------- Surfaces ---------- */ --canvas: var(--n-50); --surface: var(--n-0); --surface-recessed: var(--n-100); --surface-sunken: var(--n-150); --surface-inverse: var(--n-950); /* ---------- Text ---------- */ --on-surface: var(--n-900); --on-surface-variant: var(--n-700); --on-surface-muted: var(--n-500); --on-surface-inverse: var(--n-50); /* ---------- Primary ---------- */ --primary: var(--brand-600); --primary-hover: var(--brand-700); --primary-active: var(--brand-800); --on-primary: var(--n-0); --primary-subtle: var(--brand-50); --primary-tint: var(--brand-100); --primary-border: var(--brand-200); --focus-ring: oklch(54% 0.213 262 / 0.18); /* ---------- Semantic ---------- */ --success: oklch(58% 0.145 158); --success-subtle: oklch(96.5% 0.035 158); --success-border: oklch(88% 0.083 158); --warning: oklch(70% 0.157 65); --warning-text: oklch(48% 0.128 60); --warning-subtle: oklch(97% 0.040 80); --warning-border: oklch(88% 0.090 75); --danger: oklch(57% 0.212 25); --danger-subtle: oklch(96.5% 0.028 25); --danger-border: oklch(88% 0.075 25); /* ---------- Chart series ---------- */ --series-1: var(--brand-600); --series-2: oklch(58% 0.145 158); --series-3: oklch(70% 0.157 65); --series-4: oklch(58% 0.185 300); --series-5: oklch(66% 0.135 220); --series-6: var(--n-500); /* ---------- Category accents ---------- Each top-level category owns a hue. Applied to icon chips and hover states so a directory of 427 tools stays navigable by colour. */ --cat-financial: oklch(58% 0.145 158); --cat-math: oklch(58% 0.191 278); --cat-conversion: oklch(62% 0.135 220); --cat-health: oklch(62% 0.175 15); --cat-science: oklch(58% 0.185 300); --cat-statistics: oklch(65% 0.155 55); --cat-everyday: oklch(64% 0.160 40); --cat-datetime: var(--brand-600); --cat-construction: oklch(56% 0.105 90); --cat-tech: oklch(52% 0.070 250); /* ---------- Borders ---------- */ --border: var(--n-200); --border-subtle: var(--n-150); --border-strong: var(--n-300); --border-focus: var(--primary); /* ---------- Typography ---------- */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; /* Fluid scale — clamp() so type breathes between phone and desktop without a stack of breakpoints. */ --text-display: clamp(2.25rem, 1.30rem + 4.2vw, 4rem); --lh-display: 1.05; --text-headline-xl: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem); --lh-headline-xl: 1.12; --text-headline-lg: clamp(1.5rem, 1.25rem + 1.0vw, 1.875rem); --lh-headline-lg: 1.22; --text-headline-md: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem); --lh-headline-md: 1.32; --text-body-lg: 1rem; --lh-body-lg: 1.6; --text-body-md: 0.875rem; --lh-body-md: 1.55; --text-body-sm: 0.8125rem; --lh-body-sm: 1.45; --text-calc-lg: clamp(2.25rem, 1.55rem + 3.1vw, 3.5rem); --lh-calc-lg: 1.06; --text-calc-md: clamp(1.5rem, 1.30rem + 0.9vw, 1.875rem); --lh-calc-md: 1.2; --text-mono-md: 0.8125rem; --lh-mono-md: 1.4; --text-mono-sm: 0.6875rem; --lh-mono-sm: 1.3; --tracking-tighter: -0.035em; --tracking-tight: -0.025em; --tracking-snug: -0.017em; --tracking-normal: -0.008em; --tracking-wide: 0.06em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Spacing (4px sub-grid) ---------- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-lg: 1.25rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 6rem; --gutter: 1rem; --gutter-lg: 1.5rem; --gutter-xl: 2rem; /* ---------- Layout ---------- */ --container-max: 82.5rem; --container-prose: 42rem; --header-height: 4rem; /* ---------- Radius — generously rounded. This single change does more for "inviting" than anything else in the system. ---------- */ --radius-xs: 0.375rem; /* 6px — tags, tiny chips */ --radius-sm: 0.5rem; /* 8px — badges */ --radius: 0.75rem; /* 12px — inputs, small buttons */ --radius-md: 0.875rem; /* 14px — selects, wells */ --radius-lg: 1.25rem; /* 20px — cards */ --radius-xl: 1.5rem; /* 24px — panels, hero surfaces */ --radius-2xl: 2rem; /* 32px — feature containers */ --radius-full: 9999px; /* ---------- Elevation — physical, layered depth ---------- Every raised surface combines four things: an inner top highlight (the light catching its top edge), a hairline ring, a tight contact shadow, and a wide ambient shadow. That combination is what reads as a real object rather than a rectangle with a drop shadow. */ --shadow-color: 250 35% 18%; --highlight-top: inset 0 1px 0 oklch(100% 0 0 / 0.85); --highlight-soft: inset 0 1px 0 oklch(100% 0 0 / 0.55); --ring-hairline: inset 0 0 0 1px hsl(var(--shadow-color) / 0.06); --elev-recessed: inset 0 2px 4px hsl(var(--shadow-color) / 0.08), inset 0 1px 1px hsl(var(--shadow-color) / 0.05); --elev-1: var(--highlight-soft), 0 1px 2px hsl(var(--shadow-color) / 0.05), 0 2px 6px -1px hsl(var(--shadow-color) / 0.05); --elev-2: var(--highlight-top), 0 1px 1px hsl(var(--shadow-color) / 0.05), 0 3px 6px -1px hsl(var(--shadow-color) / 0.07), 0 10px 20px -6px hsl(var(--shadow-color) / 0.09); --elev-3: var(--highlight-top), 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 6px 12px -3px hsl(var(--shadow-color) / 0.09), 0 20px 36px -10px hsl(var(--shadow-color) / 0.13); --elev-4: var(--highlight-top), 0 2px 4px hsl(var(--shadow-color) / 0.06), 0 12px 24px -6px hsl(var(--shadow-color) / 0.10), 0 32px 64px -16px hsl(var(--shadow-color) / 0.20); /* Tactile key — weighted bottom edge, like a real keycap */ --elev-key: var(--highlight-top), 0 1px 1px hsl(var(--shadow-color) / 0.06), 0 2px 0 0 hsl(var(--shadow-color) / 0.10), 0 4px 10px -2px hsl(var(--shadow-color) / 0.10); --elev-key-hover: var(--highlight-top), 0 1px 1px hsl(var(--shadow-color) / 0.06), 0 3px 0 0 hsl(var(--shadow-color) / 0.11), 0 8px 18px -3px hsl(var(--shadow-color) / 0.14); --elev-pressed: inset 0 2px 5px hsl(var(--shadow-color) / 0.16), inset 0 1px 1px hsl(var(--shadow-color) / 0.10); --glow-primary: inset 0 1px 0 oklch(100% 0 0 / 0.28), 0 1px 2px oklch(40% 0.163 264 / 0.30), 0 2px 0 0 oklch(40% 0.163 264 / 0.35), 0 10px 24px -6px oklch(54% 0.213 262 / 0.42); --glow-primary-hover: inset 0 1px 0 oklch(100% 0 0 / 0.30), 0 1px 2px oklch(40% 0.163 264 / 0.32), 0 3px 0 0 oklch(40% 0.163 264 / 0.38), 0 16px 32px -8px oklch(54% 0.213 262 / 0.50); /* ---------- Gradients ---------- */ --grad-brand: linear-gradient(var(--grad-angle), var(--brand-600) 0%, var(--indigo-500) 100%); --grad-surface: linear-gradient(180deg, var(--n-0) 0%, var(--n-50) 100%); --grad-key: linear-gradient(180deg, var(--n-0) 0%, var(--n-100) 100%); --grad-key-primary: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 100%); --grad-sunken: linear-gradient(180deg, var(--n-150) 0%, var(--n-100) 100%); --grad-result: linear-gradient(160deg, oklch(54% 0.213 262 / 0.05) 0%, oklch(61% 0.191 278 / 0.01) 55%, transparent 100%); /* ---------- Motion ---------- */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 130ms; --duration: 220ms; --duration-slow: 420ms; /* ---------- Ad slots — heights RESERVED so nothing shifts on load ---------- */ --ad-mobile-banner-h: 6.25rem; /* 100px — 320x100 mobile banner */ --ad-leaderboard-h: 6.25rem; --ad-leaderboard-h-lg: 5.625rem; /* 90px — 728x90 leaderboard */ --ad-billboard-h: 15.625rem; /* 250px — 970x250 billboard */ --ad-rectangle-h: 15.625rem; --ad-rail-h: 37.5rem; /* ---------- Z-index ---------- */ --z-base: 1; --z-header: 100; --z-overlay: 200; --z-modal: 300; }