/*
 * theme.css — Circular. A quiet editorial palette: cream and ink, one
 * terracotta accent-text for links, hairline borders, no shadow tier.
 */

:root {
  --canvas: #f6f2ea;
  --surface: #fbf9f6;
  --surface-2: color-mix(in srgb, #1c1b19 6%, #f6f2ea);
  --border: color-mix(in srgb, #1c1b19 14%, #f6f2ea);
  --border-strong: color-mix(in srgb, #1c1b19 32%, #f6f2ea);
  --ink: #1c1b19;
  --muted: #62605c;
  --accent: #1c1b19;
  --accent-hover: color-mix(in srgb, #1c1b19 88%, white);
  --accent-ink: #f6f2ea;
  --accent-text: #8a3b2e;
  --accent-strong: #1c1b19;
  --accent-soft: color-mix(in srgb, #8a3b2e 12%, #fbf9f6);
  --accent-border: color-mix(in srgb, #8a3b2e 38%, var(--border));
  --success: #3f6b47;
  --success-ink: #f6f2ea;
  --success-soft: color-mix(in srgb, #3f6b47 14%, #fbf9f6);
  --success-strong: #2c4e32;
  --warning: #92600f;
  --warning-ink: #f6f2ea;
  --warning-soft: color-mix(in srgb, #92600f 14%, #fbf9f6);
  --warning-strong: #6e480a;
  --danger: #a13327;
  --danger-ink: #f6f2ea;
  --danger-soft: color-mix(in srgb, #a13327 14%, #fbf9f6);
  --danger-strong: #7c261c;
  --chart-1: #1c1b19;
  --chart-2: #8a3b2e;
  --chart-3: #6b7a4f;
  --chart-4: #3d5a6c;
  --chart-5: #a97b3f;
  --chart-6: #5c4a72;

  --font-display: "Fraunces", "Iowan Old Style", ui-serif, Georgia, serif;
  --font-body: "Source Serif 4", ui-serif, Georgia, serif;
  --font-sans: var(--font-body);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-btn: none;
  --shadow-raised: 0 16px 40px color-mix(in srgb, var(--ink) 16%, transparent);
  --card-pad: 2rem;
  --caps: none;
  --caps-tracking: 0em;
  --btn-weight: 500;
  --measure: 64ch;
}

html[data-theme="dark"] {
  --canvas: #17140f;
  --surface: #1e1a14;
  --surface-2: color-mix(in srgb, #f2ede2 8%, #17140f);
  --border: color-mix(in srgb, #f2ede2 16%, #17140f);
  --border-strong: color-mix(in srgb, #f2ede2 34%, #17140f);
  --ink: #f2ede2;
  --muted: #a89f8f;
  --accent: #f2ede2;
  --accent-hover: color-mix(in srgb, #f2ede2 85%, black);
  --accent-ink: #17140f;
  --accent-text: #dd8f75;
  --accent-strong: #f2ede2;
  --accent-soft: color-mix(in srgb, #dd8f75 18%, #1e1a14);
  --accent-border: color-mix(in srgb, #dd8f75 42%, var(--border));
  --success: #6fae7c;
  --success-ink: #10190f;
  --success-soft: color-mix(in srgb, #6fae7c 18%, #1e1a14);
  --success-strong: #a3d1ab;
  --warning: #cf9c4f;
  --warning-ink: #1f1508;
  --warning-soft: color-mix(in srgb, #cf9c4f 18%, #1e1a14);
  --warning-strong: #e2bd82;
  --danger: #c56a5c;
  --danger-ink: #1f0e0a;
  --danger-soft: color-mix(in srgb, #c56a5c 18%, #1e1a14);
  --danger-strong: #e29f93;
  --chart-1: #f2ede2;
  --chart-2: #dd8f75;
  --chart-3: #9db27c;
  --chart-4: #85b0c6;
  --chart-5: #d9b06a;
  --chart-6: #ac97c9;
}

/*
 * app.css — Circular's own stylesheet. Everything no primitive covers:
 * the page's ground, the letterhead-style issue card, the writing-room
 * mock, and the one entrance the hero uses.
 */

/* A faint, warm vignette on the page itself — paper under a reading lamp,
   never a gradient behind the headline. */
body {
  background-image: radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent-text) 5%, transparent), transparent 60%);
  background-repeat: no-repeat;
}

/* The excerpt "issue" reads like a letterhead: a heavier rule at the top,
   the rest hairline. */
.issue-card {
  border-top-width: 3px;
  border-top-color: var(--ink);
}

/* ---- Hero entrance (motion: hero-only) -----------------------------------
   Rests fully visible; the offset is the only thing that moves, so a
   visitor with no JS — or with reduced motion — sees the finished page. */
.reveal {
  transform: translateY(28px);
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in {
  transform: none;
}
.reveal:nth-of-type(2) {
  --reveal-delay: 120ms;
}
html.reduced-motion .reveal {
  transform: none;
  transition: none;
}