_foundation.css

/* ============================================
   FOUNDATION
   Font faces, @property declarations and design tokens
   ============================================ */

/* ============================================
   FONT FACES - PRODUCTION
   ============================================ */

@font-face {
  font-family: 'Literata';
  src: url('/fonts/Literata-v3.103-2026-01-19.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: 'Literata';
  src: url('/fonts/Literata-Italic-v3.103-2026-01-19.woff2') format('woff2');
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: 'League Spartan';
  src: url('/fonts/LeagueSpartan-v2.220-2026-01-19.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}

/* ============================================
   FONT FACES - TESTING CANDIDATES
   These are loaded via CDN for experimentation.
   Remove this section once font selection is finalized.
   ============================================ */

/* --- BRICOLAGE GROTESQUE ---
   Axes: wght 200-800, wdth 75-100, opsz 12-96
   No italic. The optical size axis is KEY - at large sizes ink traps
   become decorative, at small sizes it adapts for legibility.
   Could potentially serve as UNIFIED sans for both display AND UI.
   Source: https://fonts.google.com/specimen/Bricolage+Grotesque
*/
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/bricolage-grotesque:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
}

/* --- INTER ---
   Axes: wght 100-900, opsz
   Has italic (separate file). Proven Literata pairing, excellent for screens.
   The "safe" choice for UI/short-form.
   Source: https://rsms.me/inter/ or Fontsource
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-italic.woff2') format('woff2-variations');
}

/* --- FIGTREE ---
   Axes: wght 300-900
   Has italic. Friendlier/warmer than Inter. Less common.
   Source: https://fonts.google.com/specimen/Figtree
*/
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/figtree:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-display: swap;
  font-weight: 300 900;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/figtree:vf@latest/latin-wght-italic.woff2') format('woff2-variations');
}

/* --- SATOSHI ---
   Axes: wght 300-900
   Has italic. Current leading display candidate. Clean geometric.
   Source: https://www.fontshare.com/fonts/satoshi
*/
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('https://cdn.fontshare.com/wf/NWBQYJIM7GCZ5XWD7D26ARB3VDY55ZRT/K63EV2KZIGKLE7RANQ2U42S6SVHU5RJ7/X6XYTKIVDUW7GZTZPZNN4EUM5KH54KHF.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: italic;
  font-display: swap;
  font-weight: 300 900;
  src: url('https://cdn.fontshare.com/wf/NWBQYJIM7GCZ5XWD7D26ARB3VDY55ZRT/XCDLPNIPWWHTEBVJQMXMZ45QNILV7HMX/LYBDPA24LJFLVMQKN6WHEO7VHQHM6SZ4.woff2') format('woff2');
}

/* --- FAMILJEN GROTESK ---
   Axes: wght 400-700
   Has italic. Ink traps add craft at display scale. Watch the uppercase N.
   Source: https://fonts.google.com/specimen/Familjen+Grotesk
*/
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/familjen-grotesk:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/familjen-grotesk:vf@latest/latin-wght-italic.woff2') format('woff2-variations');
}

/* --- INSTRUMENT SANS ---
   Axes: wght 400-700, wdth 75-100
   Has italic. "Balances precision with subtle playfulness."
   Source: https://fonts.google.com/specimen/Instrument+Sans
*/
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/instrument-sans:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/instrument-sans:vf@latest/latin-wght-italic.woff2') format('woff2-variations');
}

/* --- GEIST ---
   Axes: wght 100-900
   No italic. Angular terminals add craft at scale. From Vercel.
   Source: https://vercel.com/font
*/
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
}

/* COLOR PROPERTIES */

@property --color-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(70% 0.18 25);
}

@property --hue-coral {
  syntax: '<number>';
  inherits: true;
  initial-value: 25;
}

@property --hue-pink {
  syntax: '<number>';
  inherits: true;
  initial-value: 350;
}

@property --hue-orange {
  syntax: '<number>';
  inherits: true;
  initial-value: 55;
}

@property --hue-purple {
  syntax: '<number>';
  inherits: true;
  initial-value: 300;
}

@property --hue-yellow {
  syntax: '<number>';
  inherits: true;
  initial-value: 95;
}

@property --hue-green {
  syntax: '<number>';
  inherits: true;
  initial-value: 165;
}

@property --hue-blue {
  syntax: '<number>';
  inherits: true;
  initial-value: 250;
}

@property --hue-grey {
  syntax: '<number>';
  inherits: true;
  initial-value: 210;
}

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  /* ======= FONTS ======= */
  /*
   * TESTING WORKFLOW - See docs/tasks-todo/task-x-typography-font-selection.md
   *
   * PHASE 1: Test "Unified Sans" hypothesis with Bricolage Grotesque
   *   - Can one font work for BOTH display AND UI/short-form via optical sizing?
   *   - Uncomment TEST 1 below, check: homepage, /writing, /notes, /now, nav, footer
   *   - Key question: Is lack of italic a dealbreaker for short-form prose?
   *
   * PHASE 2A: If unified works → done! Keep Bricolage for both.
   *
   * PHASE 2B: If unified doesn't work → split the problem:
   *   - For UI/short-form: Test Inter (safe), then Figtree (warmer)
   *   - For Display: Test Satoshi (leading), then others
   *
   * WHAT TO CHECK:
   *   Display contexts: Homepage "DANNY SMITH", "WRITING"/"NOTES" headers, 404
   *   UI contexts: Nav links, footer, pills, buttons
   *   Short-form: /now page prose, note cards, callouts, captions
   *   Pairing: How does the sans look NEXT TO Literata? (article callouts, captions)
   */

  /* === CURRENT (baseline for comparison) === */
  --font-ui: 'League Spartan', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'League Spartan', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* === TEST 1: Bricolage Grotesque (unified hypothesis) ===
   * Try ONE font for both display and UI. The optical size axis should adapt:
   * - Large sizes (display): decorative ink traps
   * - Small sizes (UI/prose): neutral, legible
   * NOTE: No italic available - use font-weight for emphasis instead
   */
  /* --font-ui: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
  /* --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif; */

  /* === TEST 2: Inter for UI, keep testing display separately ===
   * The "safe" choice. Proven Literata pairing, excellent screen rendering.
   */
  /* --font-ui: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; */

  /* === TEST 3: Figtree for UI ===
   * Friendlier/warmer than Inter. Less commonly used.
   */
  /* --font-ui: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif; */

  /* === TEST 4: Satoshi for Display ===
   * Leading display candidate. Clean geometric, modern.
   */
  /* --font-display: 'Satoshi', 'Helvetica Neue', Helvetica, Arial, sans-serif; */

  /* === TEST 5: Familjen Grotesk for Display ===
   * Ink traps add craft. Watch the uppercase N at large sizes.
   */
  /* --font-display: 'Familjen Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; */

  /* === TEST 6: Instrument Sans for Display ===
   * "Balances precision with subtle playfulness"
   */
  /* --font-display: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; */

  /* === TEST 7: Geist for Display ===
   * Angular terminals. No italic. From Vercel.
   */
  /* --font-display: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; */

  /* Prose stays Literata - decision already made */
  --font-prose: 'Literata', Georgia, 'Times New Roman', serif;
  --font-code: 'Fira Code Variable', 'Fira Code', 'Inconsolata', monospace;

  /* ======= COLOURS ======= */

  /* Core Hues */
  --hue-coral: 25;
  --hue-pink: 350;
  --hue-orange: 55;
  --hue-purple: 300;
  --hue-yellow: 95;
  --hue-green: 165;
  --hue-blue: 250;
  --hue-grey: 210;

  /* Absolute colors */
  --color-white: oklch(100% 0 0);
  --color-black: oklch(0% 0 0);
  --color-ink: oklch(28% 0.01 var(--hue-grey));
  --color-charcoal: oklch(24.35% 0 0); /* #202020 */
  --color-beige: oklch(96% 0.02 85);

  /* Adaptive Color Palette */

  --color-coral: light-dark(oklch(70% 0.18 var(--hue-coral)), oklch(80% 0.14 var(--hue-coral)));

  --color-pink: light-dark(oklch(55% 0.15 var(--hue-pink)), oklch(70% 0.13 var(--hue-pink)));

  --color-orange: light-dark(oklch(78% 0.16 var(--hue-orange)), oklch(80% 0.14 var(--hue-orange)));

  --color-purple: light-dark(oklch(60% 0.14 var(--hue-purple)), oklch(72% 0.12 var(--hue-purple)));

  --color-yellow: light-dark(oklch(90% 0.16 var(--hue-yellow)), oklch(82% 0.12 var(--hue-yellow)));

  --color-green: light-dark(oklch(65% 0.12 var(--hue-green)), oklch(72% 0.1 var(--hue-green)));

  --color-blue: light-dark(oklch(62% 0.15 var(--hue-blue)), oklch(70% 0.13 var(--hue-blue)));

  /* ======= SEMANTIC COLOURS ======= */

  --color-accent: var(--color-coral);
  --color-visited: var(--color-purple);
  --color-highlight: var(--color-yellow);
  --color-focus-ring: var(--color-blue);

  --color-background: light-dark(var(--color-beige), var(--color-charcoal));
  --color-background-secondary: light-dark(
    oklch(from var(--color-beige) calc(l + 0.02) c h),
    oklch(from var(--color-charcoal) calc(l - 0.04) c h)
  );
  --color-background-code: light-dark(
    oklch(from var(--color-beige) calc(l - 0.03) 0.01 h),
    oklch(from var(--color-charcoal) calc(l - 0.04) c h)
  );
  --color-text: light-dark(var(--color-ink), var(--color-beige));
  --color-text-secondary: light-dark(
    oklch(55% 0.01 var(--hue-grey)),
    oklch(75% 0.01 var(--hue-grey))
  );
  --color-border: light-dark(
    oklch(from var(--color-black) l c h / 0.1),
    oklch(from var(--color-white) l c h / 0.1)
  );

  /* ======= SPACING ======= */
  /* @link https://utopia.fyi/space/calculator?c=375,16,1.2,1280,20,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --space-3xs: clamp(0.25rem, 0.2241rem + 0.1105vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4482rem + 0.221vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6723rem + 0.3315vw, 0.9375rem);
  --space-s: clamp(1rem, 0.8964rem + 0.442vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3446rem + 0.663vw, 1.875rem);
  --space-l: clamp(2rem, 1.7928rem + 0.884vw, 2.5rem);
  --space-xl: clamp(3rem, 2.6892rem + 1.326vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.5856rem + 1.768vw, 5rem);
  --space-3xl: clamp(6rem, 5.3785rem + 2.6519vw, 7.5rem);

  /* ======= TYPOGRAPHY ======= */
  /* @link https://utopia.fyi/type/calculator?c=375,16,1.2,1280,20,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--2: clamp(0.6944rem, 0.6907rem + 0.016vw, 0.7035rem);
  --step--1: clamp(0.8333rem, 0.7901rem + 0.1846vw, 0.9377rem);
  --step-0: clamp(1rem, 0.8964rem + 0.442vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.0068rem + 0.8243vw, 1.6663rem);
  --step-2: clamp(1.44rem, 1.1163rem + 1.381vw, 2.2211rem);
  --step-3: clamp(1.728rem, 1.2172rem + 2.1794vw, 2.9607rem);
  --step-4: clamp(2.0736rem, 1.2975rem + 3.3115vw, 3.9467rem);
  --step-5: clamp(2.4883rem, 1.3395rem + 4.9018vw, 5.2609rem);

  /* Semantic aliases */
  --font-size-xs: var(--step--2);
  --font-size-sm: var(--step--1);
  --font-size-base: var(--step-0);
  --font-size-md: var(--step-1);
  --font-size-lg: var(--step-2);
  --font-size-xl: var(--step-3);
  --font-size-2xl: var(--step-4);
  --font-size-3xl: var(--step-5);

  /* Line Heights */
  --leading-none: 0.9;
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-loose: 1.7;

  /* Letter Spacing */
  --tracking-tight: -0.02ch;
  --tracking-normal: 0;
  --tracking-wide: 0.05ch;
  --tracking-wider: 0.1ch;

  /* Measure  */
  --measure-standard: 85ch;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 350;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ======= BORDERS ======= */
  /* Hairline: never subpixel, but scales with rem on high-DPI */
  --border-width-hairline: max(0.0625rem, 1px);
  --border-width-base: 2px;
  --border-width-thick: 4px;
  --border-width-heavy: 6px;
  --border-width-accent: 1rem;

  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: calc(infinity * 1px);

  /* ======= MOTION ======= */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ======= SHADOWS ======= */
  --shadow-small: drop-shadow(0px 1px 3px oklch(0% 0 0 / 0.1))
    drop-shadow(0px 1px 2px oklch(0% 0 0 / 0.1));
  --shadow-medium: drop-shadow(0px 1px 3px oklch(0% 0 0 / 0.1))
    drop-shadow(0px 4px 6px oklch(0% 0 0 / 0.1));
}