/* global.css — shared foundation for every klarhimmel.com page: a box-model
   reset, self-hosted Inter, a fluid type scale, a rem-based spacing/radius
   scale, and the one light/dark colour system the whole site follows
   (prefers-color-scheme, no toggle to wire up — it reacts the instant the
   OS preference changes).

   Load this before a page's own stylesheet (style.css or signals.css).
   Those files hold each page family's actual look; they consume the
   tokens defined here rather than redefining reset/type/spacing/colour
   rules of their own. signals.css additionally layers its own "sky"
   palette for the index page's light mode, and (for now) its own serif
   voice, on top of these tokens — see the comment there.

   Type scale shape (fluid base + relative steps, bigger jumps once a
   large hover-capable screen is confirmed) is adapted from 37signals.com's
   root.css (2026-09-25, Felix) — same structure, klarhimmel's own numbers.
   Unlike 37signals' --spacing (font-relative, 0.75em), layout spacing here
   stays on the rem scale below: type should scale with the viewport,
   layout rhythm should not. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-Italic-Variable.woff2') format('woff2');
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* Fluid type scale: a viewport-responsive base, sized steps relative to
     it. Read a step as "how many multiples of the fluid base," not a
     fixed px/rem — every step grows with the base. */
  --font-size: calc(1em + 0.4vw);
  --font-size-xs: 0.75em;
  --font-size-sm: 0.875em;
  --font-size-lg: 1.125em;
  --font-size-xl: 1.375em;
  --font-size-2xl: 1.75em;
  --font-size-3xl: 2.25em;
  --font-size-4xl: 2.75em;
  --line-height: 1.5;

  /* Spacing scale (rem: stable regardless of a page's local font-size) */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --section-padding-y: 5rem;
  --section-padding-y-lg: 7rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Light theme (default) */
  --color-bg: #ffffff;
  --color-bg-muted: #f3f5f9;
  --color-text: #0f1b33;
  --color-text-muted: #4a5568;
  --color-text-faint: #5f6b80; /* 5.4:1 on white */
  --color-border: #dfe3ea;
  --color-accent: #0b2545;
  --color-link: #1d4ed8;
  --color-link-hover: #15379e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a1220;
    --color-bg-muted: #101a2c;
    --color-text: #f5f7fa;
    --color-text-muted: #aab4c4;
    --color-text-faint: #96a0b3; /* 7.1:1 on #0a1220 */
    --color-border: #223049;
    --color-accent: #4d8dff;
    --color-link: #6ea8ff;
    --color-link-hover: #8fbcff;
  }
}

/* Large, hover-capable screens get a stronger base and bigger jumps between
   steps (headline sizes should feel dramatically larger on desktop, not
   just proportionally so) — same gate 37signals.com uses. */
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  :root {
    --font-size: calc(1em + 0.55vw);
    --font-size-lg: 1.25em;
    --font-size-xl: 1.5em;
    --font-size-2xl: 2.25em;
    --font-size-3xl: 3em;
    --font-size-4xl: 4em;
  }
}