/* ============================================================
   Plate — Lunch Design Tokens
   Extracted from the Lunch blog theme system.
   Source of truth: Lunch-Site/blog/theme.css + base.css
   Structural tokens: Lunch Design System/colors_and_type.css
   ============================================================ */

/* ─── Webfont: Crimson Pro ────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap");

/* ─── IBM Plex Mono (local) ───────────────────────────────── */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ─── Semantic palette: LIGHT (clay & ink) ────────────────── */
:root,
[data-theme="light"] {
  --bg: #f1ece2;
  --paper: #faf5ea;
  --surface: #ece3cf;
  --surface-2: #ddd1b7;
  --border-faint: #d8c9ab;
  --border: #b8a584;
  --ink: #1a1410;
  --ink-strong: #0d0907;
  --ink-dim: #6b5945;
  --ink-mute: #a08c6e;
  --accent: #8c2818;
  --shadow: 0 24px 56px -28px rgba(60, 38, 10, 0.35);

  /* Status colors — from Lunch material palette */
  --green: #6f8a55;
  --green-bg: #e6ebd9;
  --yellow: #c79a49;
  --yellow-bg: #f5f0e0;
  --red: #b45538;
  --red-bg: #fbe8df;
  --blue: #566d7a;
  --blue-bg: #e0eaf0;
}

/* ─── Semantic palette: DARK (cocoa & cream) — default ───── */
[data-theme="dark"] {
  --bg: #222323;
  --paper: transparent;
  --surface: #312e2c;
  --surface-2: #34281d;
  --border-faint: #54483a;
  --border: #4d3f2e;
  --ink: #ebdcc4;
  --ink-strong: #fbeed3;
  --ink-dim: #a89479;
  --ink-mute: #6a5946;
  --accent: #db9871;
  --shadow: 0 24px 56px -28px rgba(0, 0, 0, 0.7);

  /* Status colors — lighter on dark ground */
  --green: #8aa36e;
  --green-bg: #2a3b22;
  --yellow: #e0b267;
  --yellow-bg: #3a3020;
  --red: #ef9c7a;
  --red-bg: #3a2218;
  --blue: #7b8f9a;
  --blue-bg: #1e2e38;
}

/* ─── Font tokens ─────────────────────────────────────────── */
:root {
  --font-serif: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
}

/* ─── Type scale — 8px baseline ───────────────────────────── */
:root {
  --baseline: 8px;

  --t-caption: 14px;
  --t-body: 17px;
  --t-lead: 22px;
  --t-h3: 22px;
  --t-h2: 28px;
  --t-h1: 44px;

  --lh-caption: 24px;
  --lh-body: 28px;
  --lh-lead: 32px;
  --lh-h3: 32px;
  --lh-h2: 40px;
  --lh-h1: 56px;
}

/* ─── Spacing scale ───────────────────────────────────────── */
:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
}

/* ─── Radii ───────────────────────────────────────────────── */
:root {
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;
}

/* ─── Motion ──────────────────────────────────────────────── */
:root {
  --ease-paper: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-ink: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ─── Reset ───────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base ────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  background-color: var(--bg);
  color: var(--ink);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

body {
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings:
    "onum" 1,
    "liga" 1;
}

::selection {
  background: #f2b69c;
  color: #1a1410;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --t-body: 16px;
    --lh-body: 24px;
    --t-h2: 24px;
    --lh-h2: 32px;
  }
}