initial

src/styles/tokens.css

@@ -0,0 +1,87 @@
+/* Design tokens. The only place where colours, sizes and durations are defined.
+   Components consume these; a hard-coded hex or px value in a component is a defect. */
+
+:root {
+  /* Colour: paper, night, image. Nothing else. */
+  --paper:      #E9E5DF;
+  --paper-deep: #DFDAD1;
+  --ink:        #1A1A18;
+  --ink-muted:  #57564F;
+  --night:      #0E100F;
+  --line:       rgb(26 26 24 / 0.14);
+
+  /* Immutable copies for resetting inside a .night or overlay context */
+  --ink-base:       #1A1A18;
+  --ink-muted-base: #57564F;
+  --line-base:      rgb(26 26 24 / 0.14);
+
+  /* Counterparts on night surfaces */
+  --ink-on-night:       var(--paper);
+  --ink-muted-on-night: rgb(233 229 223 / 0.62);
+  --line-on-night:      rgb(233 229 223 / 0.18);
+
+  /* Image overlay */
+  --overlay: linear-gradient(to top, rgb(14 16 15 / 0.75), rgb(14 16 15 / 0.2));
+
+  /* Type */
+  --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+
+  --step-display: clamp(2.75rem, 1.2rem + 6.2vw, 7rem);
+  --step-h2:      clamp(1.9rem,  1.1rem + 2.6vw, 3.25rem);
+  --step-h3:      clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
+  /* Card and footer titles: between h2 and h3, for headings that name rather than claim. */
+  --step-title:   clamp(1.6rem,  1.2rem + 1.5vw, 2.5rem);
+  --step-body:    clamp(1rem,    0.96rem + 0.2vw, 1.125rem);
+  --step-small:   0.875rem;
+
+  --weight-regular: 400;
+  --weight-medium:  500;
+
+  --track-display: -0.03em;
+  --track-h2:      -0.02em;
+  --track-h3:      -0.01em;
+
+  --leading-display: 1.02;
+  --leading-h2:      1.08;
+  --leading-h3:      1.2;
+  --leading-title:   1.1;
+  --leading-body:    1.55;
+  --leading-small:   1.4;
+
+  --measure: 34em;
+
+  /* Space */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+  --space-9: 6rem;
+
+  --section: clamp(6rem, 12vw, 11rem);
+  --gutter:  clamp(1.25rem, 5vw, 5rem);
+  --gap:     clamp(1rem, 2vw, 2rem);
+  --container: 90rem; /* 1440px */
+
+  /* Shape */
+  --hairline: 1px;
+  --radius: 0;
+  --radius-sm: 2px;
+
+  /* Motion */
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --dur-fast: 180ms;
+  --dur:      240ms;
+  --dur-slow: 320ms;
+  --dur-hero: 1400ms;
+
+  /* Chrome */
+  --header-height: 4.5rem;
+
+  /* Focus */
+  --focus-width: 2px;
+  --focus-offset: 3px;
+}