/* ============================================================
   STUDIO — Foundation Tokens
   Editorial register. Cream (light) and Ink (dark) modes.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;1,8..60,300;1,8..60,400;1,8..60,500&family=Inter:wght@400;500;600&display=swap");

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

  /* Display type scale (clamps for fluid sizing) */
  --t-display-xl: clamp(40px, 5.6vw, 80px);   /* hero / page titles */
  --t-display-l:  clamp(32px, 4.4vw, 56px);   /* secondary titles  */
  --t-display-m:  clamp(24px, 2.8vw, 32px);   /* h3 / step heads   */

  --t-body-l: 22px;   /* lede           */
  --t-body:   19px;   /* prose          */
  --t-body-s: 17px;   /* compact prose  */

  --t-eyebrow: 11px;  /* uppercase eyebrow / nav */
  --t-meta:    13px;  /* nav, mark text          */
  --t-mono:    10px;  /* coords / system labels  */

  --lh-tight: 1.04;
  --lh-snug:  1.2;
  --lh-prose: 1.65;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-eyebrow: 0.22em;
  --tracking-meta:    0.18em;

  /* Spacing scale */
  --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: 80px;
  --s-10: 120px;
  --s-11: 160px;

  /* Layout */
  --content-max: 1200px;
  --gutter: 56px;
  --meta-col: 200px;
  --meta-gap: 80px;

  /* Radii */
  --r-pill: 999px;
  --r-soft: 4px;

  /* Borders */
  --border-w: 1px;
}

/* CREAM (default / light) ---------------------------------- */
[data-theme="cream"], :root {
  --bg:        #F4F0E6;
  --bg-soft:   #EDE7D7;
  --bg-deep:   #ECE5D2;
  --ink:       #1A1815;
  --ink-soft:  rgba(26, 24, 21, 0.72);
  --ink-muted: rgba(26, 24, 21, 0.45);
  --line:      rgba(26, 24, 21, 0.18);
  --line-soft: rgba(26, 24, 21, 0.09);
  --tag-border: rgba(26, 24, 21, 0.22);
  --tag-ink:   rgba(26, 24, 21, 0.62);
  --caret:     #1A1815;
}

/* INK (dark) ----------------------------------------------- */
[data-theme="ink"] {
  --bg:        #0F1B2D;
  --bg-soft:   #142339;
  --bg-deep:   #0A1322;
  --ink:       #E8E1D2;
  --ink-soft:  rgba(232, 225, 210, 0.72);
  --ink-muted: rgba(232, 225, 210, 0.45);
  --line:      rgba(232, 225, 210, 0.16);
  --line-soft: rgba(232, 225, 210, 0.08);
  --tag-border: rgba(232, 225, 210, 0.22);
  --tag-ink:   rgba(232, 225, 210, 0.7);
  --caret:     #E8E1D2;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--ink);
  text-wrap: balance;
}
h1, h2 { letter-spacing: var(--tracking-display); line-height: var(--lh-tight); }
h3     { letter-spacing: var(--tracking-tight);   line-height: var(--lh-snug); font-weight: 400; }

h1 { font-size: var(--t-display-xl); }
h2 { font-size: var(--t-display-l);  }
h3 { font-size: var(--t-display-m);  }

em { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

.meta-text {
  font-family: var(--sans);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  font-weight: 500;
}

.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.prose-lede {
  font-family: var(--serif);
  font-size: var(--t-body-l);
  line-height: 1.45;
  color: var(--ink);
}

.prose p {
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
}

.tag {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tag-ink);
  border: var(--border-w) solid var(--tag-border);
  border-radius: var(--r-pill);
  padding: 5px 10px 4px;
  font-weight: 500;
}

hr.rule { border: 0; border-top: 1px solid var(--line); }
hr.rule-soft { border: 0; border-top: 1px solid var(--line-soft); }