@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --tm-color-canvas: #f6f3eb;
  --tm-color-surface: #fffdf7;
  --tm-color-surface-raised: #ffffff;
  --tm-color-surface-tint: #eaf0ff;
  --tm-color-ink: #111d35;
  --tm-color-ink-soft: #46516a;
  --tm-color-ink-faint: #6e778b;
  --tm-color-line: #d9d8d2;
  --tm-color-line-strong: #afb4c0;
  --tm-color-brand: #1457ff;
  --tm-color-brand-hover: #003bc7;
  --tm-color-brand-soft: #dce7ff;
  --tm-color-accent: #c8f135;
  --tm-color-accent-ink: #172400;
  --tm-color-success: #087e5b;
  --tm-color-warning: #9a5b00;
  --tm-color-danger: #b4233c;
  --tm-color-focus: #ff8a00;
  --tm-font-ui: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  --tm-font-reading: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --tm-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --tm-font-xs: 0.75rem;
  --tm-font-sm: 0.875rem;
  --tm-font-base: clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem);
  --tm-font-lg: clamp(1.1875rem, 1.1rem + 0.36vw, 1.375rem);
  --tm-font-xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --tm-font-2xl: clamp(2rem, 1.55rem + 1.8vw, 3rem);
  --tm-font-3xl: clamp(2.625rem, 1.8rem + 3.4vw, 4.75rem);
  --tm-leading-tight: 1.02;
  --tm-leading-heading: 1.13;
  --tm-leading-body: 1.72;
  --tm-space-1: 0.25rem;
  --tm-space-2: 0.5rem;
  --tm-space-3: 0.75rem;
  --tm-space-4: 1rem;
  --tm-space-5: 1.5rem;
  --tm-space-6: 2rem;
  --tm-space-7: 3rem;
  --tm-space-8: 4.5rem;
  --tm-space-9: 6.5rem;
  --tm-container: 77.5rem;
  --tm-reading: 45rem;
  --tm-gutter: clamp(1rem, 0.65rem + 1.5vw, 2rem);
  --tm-radius-sm: 0.375rem;
  --tm-radius-md: 0.75rem;
  --tm-radius-lg: 1.25rem;
  --tm-shadow-sm: 0 1px 2px rgb(17 29 53 / 0.08);
  --tm-shadow-lg: 0 24px 70px rgb(17 29 53 / 0.12);
  --tm-duration-fast: 140ms;
  --tm-duration-base: 220ms;
  --tm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tm-color-canvas: #0d1422;
    --tm-color-surface: #131d2f;
    --tm-color-surface-raised: #19253a;
    --tm-color-surface-tint: #17284f;
    --tm-color-ink: #f2f1eb;
    --tm-color-ink-soft: #bdc5d5;
    --tm-color-ink-faint: #929db1;
    --tm-color-line: #303b50;
    --tm-color-line-strong: #58647a;
    --tm-color-brand: #6e9aff;
    --tm-color-brand-hover: #9cb9ff;
    --tm-color-brand-soft: #243a6d;
    --tm-color-accent: #d2f85b;
    --tm-color-accent-ink: #152000;
    --tm-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
    --tm-shadow-lg: 0 24px 70px rgb(0 0 0 / 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --tm-color-canvas: #0d1422;
  --tm-color-surface: #131d2f;
  --tm-color-surface-raised: #19253a;
  --tm-color-surface-tint: #17284f;
  --tm-color-ink: #f2f1eb;
  --tm-color-ink-soft: #bdc5d5;
  --tm-color-ink-faint: #929db1;
  --tm-color-line: #303b50;
  --tm-color-line-strong: #58647a;
  --tm-color-brand: #6e9aff;
  --tm-color-brand-hover: #9cb9ff;
  --tm-color-brand-soft: #243a6d;
  --tm-color-accent: #d2f85b;
  --tm-color-accent-ink: #152000;
  --tm-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
  --tm-shadow-lg: 0 24px 70px rgb(0 0 0 / 0.4);
}

:root[data-theme="light"] { color-scheme: light; }

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