@font-face {
  font-family: 'Inter';
  src: local('Inter Regular'), local('Inter-Regular'), url('fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('Inter Medium'), local('Inter-Medium'), url('fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('Inter SemiBold'), local('Inter-SemiBold'), url('fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('Inter Bold'), local('Inter-Bold'), url('fonts/inter-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: local('JetBrains Mono Regular'), local('JetBrainsMono-Regular'), url('fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'), url('fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: local('Newsreader Medium Italic'), local('Newsreader-MediumItalic'), url('fonts/newsreader-500-italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}

:root {

  --ink: #0f1e3c;
  --paper: #f4f1ea;
  --bg: #f7f3ec;
  --surface: #fffdf8;
  --surface-warm: var(--paper);
  --fg: var(--ink);
  --fg-2: color-mix(in oklab, var(--fg), transparent 20%);
  --muted: color-mix(in oklab, var(--fg), transparent 35%);
  --meta: var(--muted);
  --border: color-mix(in oklab, var(--fg), transparent 86%);
  --border-soft: color-mix(in oklab, var(--fg), transparent 92%);
  --accent: #de6b4f;
  --accent-on: var(--ink);
  --accent-hover: #c5573c;

  --accent-active: #a03a24;

  --success: #16a34a;
  --warn: #eab308;
  --danger: #dc2626;

  --success-text: #117f3a;
  --warn-text: #8a6a05;
  --danger-text: #d82323;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-style: italic;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --leading-body: 1.55;
  --leading-tight: 1.05;
  --tracking-display: -0.015em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y-desktop: 96px;
  --section-y-tablet: 68px;
  --section-y-phone: 48px;

  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-pill: 9999px;

  --radius-lg: var(--radius-md);
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 30px 60px -32px color-mix(in oklab, var(--fg), transparent 60%);
  --focus-ring: 0 0 0 2px var(--accent-hover);
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 500ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --container-max: 1180px;
  --container-gutter-desktop: 32px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;

  --t-1: clamp(42px, 6.6vw, 78px);
  --t-2: clamp(30px, 4.4vw, 52px);
  --t-3: clamp(22px, 3vw, 32px);
  --t-4: 21px;
  --t-5: 17px;
  --t-6: 15px;
  --t-7: 13.5px;

  --t-8: 12px;

  --lh-display: 1.04;
  --lh-title: 1.35;
  --lh-body: 1.6;
  --lh-dense: 1.5;

  --measure: 38rem;
  --measure-display: 18ch;
  --measure-sm: 28rem;
  --measure-xs: 24rem;
  --panel-prose: calc(var(--measure) + 54px);

  --stack-head: clamp(20px, 2.5vw, 32px);
  --stack-cta: clamp(32px, 3.4vw, 48px);
  --stack-block: clamp(28px, 3vw, 40px);
  --stack-tight: 20px;
  --section-label-gap: clamp(28px, 3vw, 36px);
  --copy-tight: 14px;
  --copy-step: clamp(20px, 1.9vw, 26px);

  --bg-alt: #e6dcc8;

  --section-bg: var(--bg);

  --bp-xs: 390px;
  --bp-sm: 620px;
  --bp-md: 860px;
  --bp-lg: 1100px;
  --bp-xl: 1440px;

  --bp-xxl: 1600px;
}

[data-theme="dark"] {
  --bg: var(--ink);
  --surface: color-mix(in oklab, var(--ink), var(--paper) 6%);
  --surface-warm: color-mix(in oklab, var(--ink), var(--paper) 4%);
  --fg: var(--paper);
  --fg-2: color-mix(in oklab, var(--paper), transparent 15%);
  --muted: color-mix(in oklab, var(--paper), transparent 28%);
  --border: color-mix(in oklab, var(--paper), transparent 84%);
  --border-soft: color-mix(in oklab, var(--paper), transparent 90%);
  --accent-on: var(--ink);

  --accent-active: var(--accent);

  --success: #7fd1a3;
  --danger: #ff9b82;

  --success-text: var(--success);
  --danger-text: var(--danger);
  --warn-text: var(--warn);
  --elev-raised: 0 20px 40px -26px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

[data-theme="dark"] ::placeholder {
  color: color-mix(in oklab, var(--paper), transparent 62%);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}