/*
 * tokens.css — shared CSS token layer for jeffreykool.nl.
 * GENERATED from design/tokens/tokens.json — do not edit values by hand;
 * regenerate via the design-token-generator skill. Components consume these
 * variables and must never hardcode raw values.
 */

@layer tokens, base;

/* @font-face — generated from font.webfonts in tokens.json (self-hosted, woff2). */
@font-face {
  font-family: 'Geist';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Geist-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/GeistMono-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Pixel';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/GeistPixel.woff2') format('woff2');
}

@layer tokens {
  :root {
    /* Color */
    --color-primary: #16233a;
    --color-primary-on: #ffffff;
    --color-accent: #2348d6;
    --color-accent-on: #ffffff;
    --color-text: #14171c;
    --color-text-on: #ffffff;
    --color-text-muted: #565e6e;
    --color-surface: #ffffff;
    --color-surface-on: #14171c;
    --color-surface-alt: #f4f5f7;
    --color-surface-invert: #12151b;
    --color-surface-invert-on: #ffffff;
    --color-border: #e4e7ec;
    --color-success: #1f7a4d;
    --color-warning: #9a6b00;
    --color-error: #b3261e;

    /* Typography */
    --font-heading: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
    --font-pixel: 'Geist Pixel', 'Geist Mono', ui-monospace, monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.1875rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.9375rem;
    --font-size-3xl: 2.5rem;
    --font-size-display: clamp(2.75rem, 5.5vw, 4.5rem);

    --line-display: 1.04;
    --line-tight: 1.12;
    --line-snug: 1.35;
    --line-normal: 1.65;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* Spacing (4px base) */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    /* Radius */
    --radius-none: 0;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06);
    --shadow-md: 0 6px 20px rgba(20, 23, 28, 0.08);
    --shadow-lg: 0 18px 48px rgba(20, 23, 28, 0.12);

    /* Breakpoints (reference for container queries / JS) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1280px;
    --breakpoint-xl: 1536px;

    /* Layout (content width constraints) */
    --content-width: 680px;
    --wide-width: 1200px;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--line-normal);
    color: var(--color-text);
    background: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: var(--line-tight);
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    margin: 0;
  }

  p { margin: 0; }

  a { color: var(--color-accent); text-underline-offset: 0.15em; }

  img { max-width: 100%; height: auto; }

  :focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}