/* ============================================================
   Heartbeat — design tokens
   Self-hosted JetBrains Mono. Warm paper palette.
   Sourced from .design-fetch/deadmanswitch/project/tokens.css.
   Source Serif 4 / Inter fall back to system stacks (no woff2
   self-hosting; paper-mono is the brand voice).
   ============================================================ */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/JetBrainsMono-400.woff2") format("woff2-variations"),
       url("/static/fonts/JetBrainsMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/JetBrainsMono-400italic.woff2") format("woff2-variations"),
       url("/static/fonts/JetBrainsMono-400italic.woff2") format("woff2");
}

/* ---------- TOKENS: light (default) ---------- */
:root {
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Surfaces — paper-like off-white, never pure white */
  --bg-0: #f4f1ea;        /* page */
  --bg-1: #ece8de;        /* sunken / code blocks */
  --bg-2: #e2dccd;        /* hover */
  --bg-elev: #fbf9f3;     /* raised cards / popovers */

  /* Foreground — warm near-black, never pure black */
  --fg-0: #16140f;        /* primary text */
  --fg-1: #3a362d;        /* secondary text */
  --fg-2: #6b6657;        /* tertiary / labels */
  --fg-3: #9a9482;        /* placeholder / disabled */

  /* Lines — keep it boring; the grid is the brand */
  --line-1: #16140f;      /* hard rules (1px) */
  --line-2: #c8c1ad;      /* soft rules / dividers */
  --line-3: #d9d3c0;      /* subtlest */

  /* Selection / focus — inverted box */
  --select-bg: #16140f;
  --select-fg: #f4f1ea;

  /* Semantic — desaturated, kept inside the warm grayscale */
  --ok: #16140f;
  --warn: #16140f;
  --err: #16140f;
  --orange: #b85a1f;      /* sparing accent: "I'm here" CTA, crit pulse */

  /* Sizes — strict mono scale, ratio 1.125 */
  --fs-xxs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;       /* base body */
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 44px;
  --fs-5xl: 60px;

  /* Line-height — tight; mono looks better packed */
  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  /* Tracking — JetBrains Mono is wide; pull it in slightly at display sizes */
  --tr-tight: -0.02em;
  --tr-norm:   0em;
  --tr-loose:  0.06em;   /* CAPS labels */

  /* Weights */
  --wt-reg: 400;
  --wt-med: 500;
  --wt-bold: 700;

  /* Spacing — 4px base */
  --ch: 1ch;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Corners — square. Use radius only when truly needed. */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;

  /* Borders */
  --bw: 1px;
  --bw-2: 2px;

  /* Elevation — borders + offset, not shadows */
  --shadow-0: none;
  --shadow-1: 2px 2px 0 0 var(--line-1);
  --shadow-2: 4px 4px 0 0 var(--line-1);

  /* Motion */
  --dur-1: 80ms;
  --dur-2: 160ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* ---------- TOKENS: dark ---------- */
:root[data-theme="dark"],
.theme-dark {
  --bg-0: #0e0e0c;
  --bg-1: #161614;
  --bg-2: #1f1f1c;
  --bg-elev: #1a1a17;

  --fg-0: #e8e4d6;
  --fg-1: #b8b3a3;
  --fg-2: #807c6f;
  --fg-3: #56534a;

  --line-1: #e8e4d6;
  --line-2: #2e2d29;
  --line-3: #232220;

  --select-bg: #e8e4d6;
  --select-fg: #0e0e0c;

  --shadow-1: 2px 2px 0 0 var(--line-1);
  --shadow-2: 4px 4px 0 0 var(--line-1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-0: #0e0e0c;
    --bg-1: #161614;
    --bg-2: #1f1f1c;
    --bg-elev: #1a1a17;
    --fg-0: #e8e4d6;
    --fg-1: #b8b3a3;
    --fg-2: #807c6f;
    --fg-3: #56534a;
    --line-1: #e8e4d6;
    --line-2: #2e2d29;
    --line-3: #232220;
    --select-bg: #e8e4d6;
    --select-fg: #0e0e0c;
  }
}

/* ============================================================
   SEMANTIC TYPE — apply directly OR use as utility classes.
   ============================================================ */

html, body {
  font-family: var(--mono);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-0);
  background: var(--bg-0);
  font-feature-settings: "calt" 1, "liga" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--select-bg); color: var(--select-fg); }

/* Headings */
h1, .t-h1 {
  font-family: var(--mono);
  font-size: var(--fs-4xl);
  font-weight: var(--wt-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--mono);
  font-size: var(--fs-2xl);
  font-weight: var(--wt-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--mono);
  font-size: var(--fs-xl);
  font-weight: var(--wt-bold);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .t-h4 {
  font-family: var(--mono);
  font-size: var(--fs-lg);
  font-weight: var(--wt-bold);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Display — for hero moments. Uses serif for warmth. */
.t-display {
  font-family: var(--serif);
  font-size: var(--fs-5xl);
  font-weight: var(--wt-reg);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-style: italic;
}

/* Body */
p, .t-body {
  font-family: var(--mono);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  margin: 0;
  color: var(--fg-0);
}
.t-body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* Labels — UPPERCASE WITH TRACKING. The brand voice. */
.t-label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: var(--wt-med);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-label-strong {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: var(--wt-bold);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--fg-0);
}

/* Caption / meta */
.t-caption {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

/* Code — same family, but visually distinct via background */
code, .t-code, kbd, samp, pre {
  font-family: var(--mono);
  font-size: 0.94em;
}
code, .t-code {
  background: var(--bg-1);
  padding: 0.05em 0.4em;
  border: var(--bw) solid var(--line-2);
}
pre {
  background: var(--bg-1);
  padding: var(--sp-4);
  border: var(--bw) solid var(--line-2);
  overflow-x: auto;
  line-height: var(--lh-snug);
}
kbd {
  background: var(--bg-elev);
  border: var(--bw) solid var(--line-2);
  border-bottom-width: var(--bw-2);
  padding: 0.05em 0.45em;
  font-size: 0.85em;
}

/* Links — underlined always */
a, .t-link {
  color: var(--fg-0);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { background: var(--fg-0); color: var(--bg-0); text-decoration: none; }

/* Rules */
hr, .rule {
  border: 0;
  border-top: var(--bw) solid var(--line-1);
  margin: var(--sp-4) 0;
}
.rule-soft { border-top-color: var(--line-2); }
.rule-double { border: 0; border-top: 3px double var(--line-1); }
.rule-dashed { border: 0; border-top: 1px dashed var(--line-2); }

/* Numeric tabular — for tables and data */
.t-num {
  font-variant-numeric: tabular-nums;
}