/* ============================================================
   Calor — Colors & Type tokens
   Two-surface system: Primary (dark) + Secondary (light/print)
   ============================================================ */

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Barlow Condensed and JetBrains Mono still loaded from Google Fonts
   (no local files supplied; not used on the dark landing page). */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- PRIMARY SURFACE (dark — landing page, lead magnet PDF) ---------- */
  --primary-bg:        #141414;   /* anchor */
  --primary-bg-2:      #1B1B1B;   /* card / lifted surface */
  --primary-bg-3:      #232323;   /* elevated panel, divider fill */
  --primary-line:      #2A2A2A;   /* hairline borders */
  --primary-line-2:    #3A3A3A;   /* heavier hairlines */

  --primary-fg:        #F0EBE3;   /* warm bone — body text */
  --primary-fg-muted:  #B8B2A8;   /* secondary text */
  --primary-fg-dim:    #6B6B6B;   /* tertiary / metadata */

  --primary-accent:    #C87941;   /* warm amber — sparingly */
  --primary-accent-hi: #D88A52;   /* hover */
  --primary-accent-lo: #A6602F;   /* press / shade */
  --primary-accent-glow: rgba(200, 121, 65, 0.18);

  --primary-secondary: #6B6B6B;   /* mid-gray support */

  /* ---------- SECONDARY SURFACE (light — book cover, thumbnails, print) ---------- */
  --secondary-bg:        #FFFFFF;
  --secondary-bg-2:      #F5F4F1;   /* off-white panel */
  --secondary-line:      #E5E3DE;
  --secondary-line-2:    #C9C6C0;

  --secondary-fg:        #0D0D0D;
  --secondary-fg-muted:  #3A3A3A;
  --secondary-fg-dim:    #757575;

  --secondary-accent:    #E05E1A;   /* hotter signal orange */
  --secondary-accent-hi: #F2702C;
  --secondary-accent-lo: #B8470F;

  --secondary-secondary: #757575;

  /* ---------- Cross-surface semantic ---------- */
  --signal-heat:     var(--primary-accent);   /* primary brand signal */
  --signal-hot:      var(--secondary-accent); /* louder, print/cover */

  /* ---------- Typography stacks ---------- */
  --font-display:   "Playfair Display", "Caslon", Georgia, serif;
  --font-condensed: "Barlow Condensed", "Oswald", "Bebas Neue", "Helvetica Neue Condensed", sans-serif;
  --font-body:      "Inter", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:      "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (fluid-ish, rem-based) ---------- */
  --fs-display-xl: 96px;
  --fs-display-l:  72px;
  --fs-display-m:  56px;
  --fs-h1:         44px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;   /* uppercase, tracked */

  --lh-tight:    1.04;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  --tr-loose:    0.16em;   /* eyebrows, all-caps labels */
  --tr-wide:     0.06em;
  --tr-normal:   0;
  --tr-tight:    -0.01em;
  --tr-display:  -0.02em;  /* large display serif */

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-pill: 999px;

  /* ---------- Hairlines, shadows ---------- */
  --bd-1: 1px solid var(--primary-line);
  --bd-2: 1px solid var(--primary-line-2);

  --shadow-1: 0 1px 0 rgba(255,255,255,0.02), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.03), 0 24px 60px rgba(0,0,0,0.55);
  --shadow-print: 0 12px 32px rgba(13,13,13,0.18);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   420ms;

  /* ---------- Semantic application — defaults to PRIMARY surface ---------- */
  --bg:        var(--primary-bg);
  --bg-2:      var(--primary-bg-2);
  --bg-3:      var(--primary-bg-3);
  --fg:        var(--primary-fg);
  --fg-muted:  var(--primary-fg-muted);
  --fg-dim:    var(--primary-fg-dim);
  --line:      var(--primary-line);
  --accent:    var(--primary-accent);
  --accent-hi: var(--primary-accent-hi);
  --accent-lo: var(--primary-accent-lo);
}

/* Surface override — wrap any block in .surface-light to flip tokens */
.surface-light {
  --bg:        var(--secondary-bg);
  --bg-2:      var(--secondary-bg-2);
  --bg-3:      var(--secondary-bg-2);
  --fg:        var(--secondary-fg);
  --fg-muted:  var(--secondary-fg-muted);
  --fg-dim:    var(--secondary-fg-dim);
  --line:      var(--secondary-line);
  --accent:    var(--secondary-accent);
  --accent-hi: var(--secondary-accent-hi);
  --accent-lo: var(--secondary-accent-lo);
}

/* ============================================================
   Element-level defaults — apply to body or scope to .calor
   ============================================================ */

.calor, .calor * { box-sizing: border-box; }

.calor {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.calor h1, .calor .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  margin: 0;
}

.calor h2, .calor .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  margin: 0;
}

.calor h3, .calor .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}

.calor h4, .calor .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

.calor p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  margin: 0;
  text-wrap: pretty;
  max-width: 64ch;
}

.calor .display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-xl);
  line-height: 0.96;
  letter-spacing: var(--tr-display);
}
.calor .display-l {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-l);
  line-height: 1.0;
  letter-spacing: var(--tr-display);
}

/* Condensed display — used on secondary (book/cover/thumbnail) surface */
.calor .condensed-xl {
  font-family: var(--font-condensed);
  font-weight: 900;
  font-size: var(--fs-display-xl);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.calor .condensed-l {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: var(--fs-display-l);
  line-height: 0.94;
  text-transform: uppercase;
}

.calor .eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--accent);
}

.calor .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.calor a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.calor a:hover { color: var(--accent-hi); border-color: var(--accent-hi); }

.calor code, .calor .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg);
}

/* Buttons — see ui_kits for full variants */
.calor .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body-s);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  background: var(--accent);
  color: var(--primary-bg);
  border: none;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.calor .btn:hover { background: var(--accent-hi); }
.calor .btn:active { transform: translateY(1px); background: var(--accent-lo); }

.calor .btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
}
.calor .btn--ghost:hover { border-color: var(--fg); background: transparent; }