@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");

:root {
  --font-core: "Quicksand", ui-rounded, "Segoe UI", sans-serif;
  --font-mono: var(--font-core);
  --font-display: var(--font-core);
  --font-body: var(--font-core);
  --font-meta: var(--font-mono);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display-1: clamp(56px, 7.5vw, 124px);
  --fs-display-2: clamp(40px, 5vw, 76px);
  --fs-display-3: clamp(30px, 3.4vw, 50px);
  --fs-title-1: 32px;
  --fs-title-2: 24px;
  --fs-title-3: 19px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-meta: 12px;
  --fs-meta-sm: 10px;

  --lh-display: 0.94;
  --lh-title: 1.14;
  --lh-body: 1.6;
  --lh-meta: 1.2;

  --ls-display: -0.03em;
  --ls-title: -0.015em;
  --ls-body: 0em;
  --ls-meta: 0.16em;
  --ls-meta-wide: 0.3em;

  --text-display: var(--fw-semibold) var(--fs-display-2) / var(--lh-display) var(--font-display);
  --text-body: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font-body);
  --text-meta: var(--fw-medium) var(--fs-meta) / var(--lh-meta) var(--font-meta);

  --sage-50: #f2f4ee;
  --sage-100: #e7ebe1;
  --sage-200: #d5dbcb;
  --sage-300: #bfc7b4;
  --sage-400: #9aa48d;
  --sage-500: #77826b;
  --sage-600: #59634f;
  --sage-700: #475040;

  --ink-900: #161613;
  --ink-800: #121412;
  --ink-700: #1b1e1a;
  --ink-600: #272b25;
  --ink-500: #3b4038;
  --ink-400: #585e53;

  --yellow-500: #f5a80c;
  --yellow-600: #d18f04;
  --yellow-400: #f9bc3d;
  --yellow-100: #fdeec2;
  --yellow-800: #6f5000;

  --white: #ffffff;
  --red-500: #bf3b26;
  --red-700: #9e2e1e;
  --red-100: #f6ddd7;
  --green-500: #4c7a3d;
  --green-700: #3a5f2e;
  --green-100: #dfeada;

  --surface-page: var(--sage-200);
  --surface-raised: var(--sage-100);
  --surface-card: var(--sage-50);
  --surface-inverse: var(--ink-900);
  --surface-sunken: var(--sage-300);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted: var(--sage-700);
  --text-on-inverse: var(--sage-100);
  --text-on-accent: var(--ink-900);
  --text-accent: var(--yellow-800);

  --accent: var(--yellow-500);
  --accent-hover: var(--yellow-400);
  --accent-press: var(--yellow-600);
  --accent-soft: var(--yellow-100);

  --border-hairline: color-mix(in oklab, var(--ink-900) 14%, transparent);
  --border-strong: color-mix(in oklab, var(--ink-900) 34%, transparent);
  --border-accent: var(--yellow-800);

  --focus-ring: var(--yellow-800);
  --overlay-scrim: color-mix(in oklab, var(--ink-900) 62%, transparent);

  --status-danger: var(--red-500);
  --status-danger-soft: var(--red-100);
  --on-danger-soft: var(--red-700);
  --status-success: var(--green-500);
  --status-success-soft: var(--green-100);
  --on-success-soft: var(--green-700);
  --status-warning: var(--yellow-500);
  --status-warning-soft: var(--yellow-100);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;
  --space-11: 200px;
  --gutter: var(--space-5);
  --page-margin: clamp(20px, 4vw, 64px);
  --section-gap: var(--space-10);
  --content-max: 1320px;
  --prose-max: 62ch;
  --grid-cols: 12;
  --control-h-sm: 32px;
  --control-h-md: 42px;
  --control-h-lg: 54px;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --border-w: 1px;
  --border-w-strong: 2px;

  --shadow-none: none;
  --shadow-hairline: inset 0 0 0 1px var(--border-hairline);
  --shadow-sm: 0 1px 2px color-mix(in oklab, var(--ink-900) 8%, transparent);
  --shadow-md: 0 8px 24px -8px color-mix(in oklab, var(--ink-900) 22%, transparent);
  --shadow-lg: 0 28px 60px -24px color-mix(in oklab, var(--ink-900) 34%, transparent);
  --shadow-accent: 0 10px 30px -12px color-mix(in oklab, var(--yellow-500) 60%, transparent);
  --blur-veil: blur(14px);
  --veil: color-mix(in oklab, var(--surface-page) 72%, transparent);
  --grain-opacity: 0.05;

  --dur-instant: 80ms;
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-agent: 640ms;
  --dur-reveal: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;
  --transition-control: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

[data-theme="light"] {
  --surface-page: var(--sage-200);
  --surface-raised: var(--sage-100);
  --surface-card: var(--sage-50);
  --surface-inverse: var(--ink-900);
  --surface-sunken: var(--sage-300);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted: var(--sage-700);
  --text-on-inverse: var(--sage-100);
  --text-on-accent: var(--ink-900);
  --text-accent: var(--yellow-800);

  --border-hairline: color-mix(in oklab, var(--ink-900) 14%, transparent);
  --border-strong: color-mix(in oklab, var(--ink-900) 34%, transparent);
  --border-accent: var(--yellow-800);
  --focus-ring: var(--yellow-800);
  --overlay-scrim: color-mix(in oklab, var(--ink-900) 62%, transparent);
}

[data-theme="dark"] {
  --surface-page: var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-card: var(--ink-700);
  --surface-inverse: var(--sage-100);
  --surface-sunken: var(--ink-800);

  --text-primary: var(--sage-100);
  --text-secondary: var(--sage-400);
  --text-muted: #939d86;
  --text-on-inverse: var(--ink-900);
  --text-accent: var(--yellow-500);
  --text-on-accent: var(--ink-900);
  --on-danger-soft: var(--red-700);
  --on-success-soft: var(--green-700);

  --border-hairline: color-mix(in oklab, var(--sage-100) 9%, transparent);
  --border-strong: color-mix(in oklab, var(--sage-100) 38%, transparent);
  --border-accent: var(--yellow-500);
  --focus-ring: var(--yellow-500);
  --overlay-scrim: color-mix(in oklab, var(--ink-900) 78%, transparent);
}

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

html,
body {
  margin: 0;
}

body {
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-accent);
  transition: var(--transition-control);
}

a:hover {
  color: var(--text-accent);
  border-bottom-color: var(--accent);
}

::selection {
  background: var(--accent);
  color: var(--ink-900);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}