@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-500-700.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin-400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-400-500.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --background: #f4f1eb;
  --card: #faf9f5;
  --foreground: #222528;
  --prose-foreground: #33373a;
  --muted: #eeefea;
  --muted-foreground: #595e60;
  --primary: #d8ff6b;
  --primary-foreground: #172010;
  --primary-edge: #8fb12f;
  --secondary: #ffffff;
  --secondary-edge: #b9bcb4;
  --accent: #edf3df;
  --accent-foreground: #455824;
  --ring: #455824;
  --border: #d4d8d0;
  --input: #7d8178;
  --destructive: #963c34;
  --destructive-surface: #f5e2dd;
  --nested-fill: #ffffff57;
  --island-fill: #ffffffa8;
  --eyebrow-fill: #ffffff88;
  --menu-fill: #faf9f5;

  --bezel-shell: linear-gradient(145deg, #ffffff99, #dadcd680);
  --core-fill: linear-gradient(145deg, #ffffffec, #faf9f5df);
  --bezel-highlight: inset 0 1px 0 #ffffffee;
  --bezel-shadow: 0 22px 62px -30px #343b3029;
  --control-highlight: inset 0 1px 1px #ffffff99;
  --island-shadow: 0 8px 32px #343b3010;
  --ambient-mesh: radial-gradient(ellipse at 83% 8%, #edf3df, transparent 48%), radial-gradient(ellipse at 12% 74%, #e4e6e4a0, transparent 54%);
  --portrait-fill: linear-gradient(155deg, #edf3df, #e5e7dd);

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-article: 1.0625rem;
  --text-lead: 1.125rem;
  --text-title: 1.375rem;
  --text-card-title: 1.5rem;
  --text-prose-heading: 1.75rem;
  --text-heading: clamp(1.875rem, 1.3rem + 2vw, 2.625rem);
  --text-display-page: clamp(2.3125rem, 1.4rem + 3vw, 3.25rem);
  --text-display: clamp(2.75rem, 1.5rem + 4.4vw, 4.75rem);
  --text-portrait: clamp(2rem, 1.4rem + 2vw, 2.5rem);
  --text-figure: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --text-eyebrow: 0.6875rem;
  --text-brand: 1.3125rem;
  --tracking-display: -0.045em;
  --tracking-title: -0.025em;
  --tracking-label: 0.13em;
  --tracking-code: 0.2em;

  --control-height: 3.25rem;
  --control-font-size: 1rem;
  --nested-size: 2.5rem;
  --nested-inset: 0.375rem;
  --reach: 2.75rem;
  --mark-size: 2rem;
  --tile-size: 3.5rem;
  --dot-size: 6px;
  --bar-height: 6px;
  --spinner-size: 18px;
  --field-border-width: 1.5px;
  --ring-width: 3px;
  --ring-offset: 4px;
  --nudge: 2px;
  --press-scale: 0.98;
  --enter-rise: 12px;

  --radius-mark: 11px;
  --radius-field: 17px;
  --radius-node: 20px;
  --radius-menu: 25px;
  --radius-tile: 26px;
  --radius-core: 32px;
  --radius-bezel: 39px;
  --radius-pill: 999px;
  --bezel-pad: 7px;

  --space-hairline: 0.25rem;
  --space-tight: 0.5rem;
  --space-within: 0.75rem;
  --space-label: 1rem;
  --space-group: 1.375rem;
  --space-card: 1.875rem;
  --gutter: 2.75rem;
  --rhythm-section: 5rem;
  --rhythm-opens-the-page: 4.5rem;
  --max-width: 86.25rem;
  --measure: 48.75rem;
  --centred-width: 46rem;

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-enter: 850ms;
  --duration-control: 450ms;
  --stagger: 70ms;
}

[data-theme="dark"] {
  color-scheme: dark;

  --background: #151715;
  --card: #1d201e;
  --foreground: #f1efe8;
  --prose-foreground: #c9ccc4;
  --muted: #262a27;
  --muted-foreground: #a6aaa3;
  --primary-edge: #b9dc52;
  --secondary: #262a27;
  --secondary-edge: #5f665f;
  --accent: #252c1d;
  --accent-foreground: #d8ff6b;
  --ring: #d8ff6b;
  --border: #2f332f;
  --input: #737a74;
  --destructive: #f0a196;
  --destructive-surface: #3a2421;
  --nested-fill: #ffffff40;
  --island-fill: #1d201ee0;
  --eyebrow-fill: #ffffff0d;
  --menu-fill: #1d201e;

  --bezel-shell: linear-gradient(145deg, #ffffff1a, #ffffff06);
  --core-fill: linear-gradient(145deg, #222623, #1c1f1d);
  --bezel-highlight: inset 0 1px 0 #ffffff1a;
  --bezel-shadow: 0 22px 62px -30px #00000099;
  --control-highlight: inset 0 1px 1px #ffffff66;
  --island-shadow: 0 8px 32px #00000040;
  --ambient-mesh: radial-gradient(ellipse at 83% 8%, #252c1d, transparent 48%), radial-gradient(ellipse at 12% 74%, #1f2320, transparent 54%);
  --portrait-fill: linear-gradient(155deg, #252c1d, #1f2320);
}

@media (min-width: 768px) and (max-width: 1100px) {
  :root {
    --gutter: 1.75rem;
    --space-card: 1.5rem;
  }
}

@media (max-width: 767px) {
  :root {
    --radius-core: 27px;
    --radius-bezel: 33px;
    --bezel-pad: 6px;
    --space-card: 1.5rem;
    --gutter: 1.125rem;
    --rhythm-section: 3rem;
    --rhythm-opens-the-page: 2.875rem;
    --text-lead: 1.0625rem;
    --text-brand: 1.1875rem;
  }
}