/* ========================================================================== Anti — Design tokens Single source of truth for colour, type, space, radius and motion. Nothing downstream of this file should introduce a raw hex value or an off-scale spacing number. ========================================================================== */ :root { /* --- Raw palette -------------------------------------------------- */ --cream-50: #fbfaf5; --cream-100: #f5f3ea; --cream-200: #efece1; --cream-300: #e3dfcf; --cream-400: #cfcab4; --ink-950: #071a10; --ink-900: #0c2a1b; --ink-800: #103823; --ink-700: #1d5238; --ink-600: #357454; --moss-700: #3f5a4a; --moss-500: #55655b; --moss-300: #63726a; --lime-500: #b6d92b; --lime-400: #c6e63f; --lime-300: #d8ee79; --lime-200: #e9f6b8; --signal-up: #157a3f; --signal-down: #c0392b; --signal-warm: #e8a33d; /* --- Semantic colour ---------------------------------------------- */ --color-bg: var(--cream-100); --color-bg-alt: var(--cream-50); --color-surface: #ffffff; --color-surface-sunk: var(--cream-50); --color-border: var(--cream-300); --color-border-strong: var(--cream-400); --color-text: var(--ink-950); --color-text-muted: var(--moss-500); --color-text-subtle: var(--moss-300); --color-accent: var(--lime-400); --color-accent-strong: var(--lime-500); --color-accent-soft: var(--lime-200); /* Lime is a background colour: at 1.5:1 on cream it can never carry text. This is the accent tuned to pass AA for large text on light surfaces. */ --color-accent-text: #6b8d15; --color-on-accent: var(--ink-950); --color-inverse-bg: var(--ink-900); --color-inverse-bg-alt: var(--ink-800); --color-inverse-text: #f3f6ee; --color-inverse-muted: #9fb3a6; --color-inverse-border: rgba(255, 255, 255, 0.12); --color-focus: var(--ink-700); /* --- Band grounds ---------------------------------------------------- Five grounds so a long page has rhythm. A page of white and one grey is legible but flat: every section reads as equally important. */ --ground-white: #ffffff; --ground-mist: var(--cream-100); /* cool light neutral - the default */ --ground-sand: #eef3dd; /* warm light neutral, lime-tinted */ --ground-brand: var(--ink-900); /* the product talking about itself */ --ground-ink: var(--ink-950); /* a closing statement */ /* --- Typography ---------------------------------------------------- */ /* Two families, two jobs. Sora carries the headlines: geometric, wide apertures, real weight at 700-800. Inter carries everything a person actually reads or operates - body, nav, labels, numbers. */ --font-display: "Sora", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; /* Fluid where it earns it, fixed where it must stay predictable. */ --text-2xs: 0.6875rem; /* 11px — micro labels inside mockups */ --text-xs: 0.75rem; /* 12px — eyebrow pills, captions */ --text-sm: 0.8125rem; /* 13px — nav, meta */ --text-base:0.9375rem; /* 15px — body */ --text-md: 1rem; /* 16px — lead paragraphs */ --text-lg: 1.125rem; /* 18px */ --text-h4: 1.0625rem; /* 17px — card titles */ --text-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); --text-h2: clamp(1.75rem, 1.24rem + 2.1vw, 2.625rem); --text-h1: clamp(2.25rem, 1.45rem + 3.4vw, 3.5rem); --text-display: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem); --leading-tight: 1.08; --leading-snug: 1.22; --leading-normal: 1.45; --leading-relaxed: 1.65; --tracking-display: -0.04em; --tracking-tight: -0.028em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.06em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; /* --- Spacing scale (4px base) -------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Section rhythm scales with the viewport but stays on the scale ends. */ --space-section: clamp(var(--space-16), 6vw, var(--space-24)); /* --- Radius --------------------------------------------------------- Capped, not blanket-rounded. Nothing here reaches the soft "rounded-2xl" look; structure is carried by hairline borders instead. */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 14px; /* retained alias: nothing rounds past xl */ --radius-pill: 999px; /* --- Elevation ------------------------------------------------------ Deliberately restrained: the reference design leans on borders and surface contrast, not stacked shadows. */ --shadow-xs: 0 1px 2px rgba(12, 42, 27, 0.05); --shadow-sm: 0 2px 8px rgba(12, 42, 27, 0.06); --shadow-md: 0 12px 32px -12px rgba(12, 42, 27, 0.18); --shadow-lg: 0 32px 64px -28px rgba(12, 42, 27, 0.28); /* --- Icon tiles ------------------------------------------------------ Three layers are what make a small square read as a physical object: a bright edge along the top where the light lands, a dark hairline beneath where it does not, and a short cast shadow under the whole thing. One soft blurred shadow on its own just looks out of focus. The cast shadow is offset downward only - a shadow with no direction reads as a glow. Shade comes from ink-950 rather than black, so it stays in the green family. */ --shadow-tile: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(7, 26, 16, 0.55), 0 2px 4px -1px rgba(7, 26, 16, 0.38); --shadow-tile-hover: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(7, 26, 16, 0.5), 0 5px 10px -3px rgba(7, 26, 16, 0.42); /* Pressed: the cast shadow goes entirely and the light flips to the inside. That is the whole trick - the tile has gone into the surface. */ --shadow-tile-press: inset 0 2px 4px rgba(7, 26, 16, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.1); /* --- Layout --------------------------------------------------------- */ /* Three widths, one gutter ladder. Anything wider than "wide" is a table that should scroll inside its own region, not a wider page. */ --container-default: 80rem; /* the normal page */ --container-narrow: 56rem; /* prose, legal, long copy */ --container-wide: 90rem; /* wide tables and matrices */ --container-max: var(--container-default); --container-pad: var(--space-5); --header-height: 72px; /* --- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-both: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-base: 220ms; --duration-slow: 420ms; /* Reveal entrances. 32px is the lateral offset, and until an element reveals those 32px are real page width - which is why every band clips on the x axis. */ --reveal-shift: 32px; --reveal-rise: 18px; --reveal-duration: 620ms; --reveal-stagger: 80ms; }