/* ==========================================================================
   base.css — design tokens, reset, typography primitives

   Direction: "verified dossier" — a numbered archive of revenue-verified
   operator notes. Paper-white ground, near-black ink, one restrained
   oxblood accent reserved for verification/CTA marks, monospace for every
   figure (No. 001, dates, prices, view counts) so the ledger reads as data.
   Grounded in how real paid-analysis publications (Stratechery, LongBlack)
   actually look: white paper + ink + a single accent, not a dark SaaS glow.
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --color-background: #f0efe9;
  --color-surface: #ffffff;
  --color-paper: #f7f5f0;
  --color-paper-2: #ece7db;

  --color-text: #1c1b18;
  --color-text-muted: #5c584f;
  --color-text-light: #8c8778;

  --color-accent: #7a2436;
  --color-accent-strong: #5c1a29;
  --color-accent-deep: #431220;
  --color-accent-soft: #f3e2e1;
  --color-accent-ink: #f7f2ee;
  --color-link: #7a2436;

  --color-border: #e2ddd0;
  --color-border-dark: #cfc7b3;
  --color-divider: #e2ddd0;

  --color-success: #3f6b4f;
  --color-success-bg: #e7efe4;
  --color-error: #a3352b;
  --color-error-bg: #f6e4e1;
  --color-warning: var(--color-accent);
  --color-warning-bg: var(--color-accent-soft);

  --font-serif: "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans: "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container: 1180px;
  --container-narrow: 720px;
  --container-article: 920px;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 27, 24, 0.07);
  --shadow-md: 0 10px 24px -8px rgba(28, 27, 24, 0.12);
  --shadow-lg: 0 20px 48px -14px rgba(28, 27, 24, 0.16);
  --shadow-glow: 0 0 0 1px rgba(122, 36, 54, 0.14);

  /* mobile: iOS home-indicator / notch clearance */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 800;
  margin: 0;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.wrap-article { max-width: var(--container-article); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow::before { content: ""; width: 14px; height: 1px; background: var(--color-accent-deep); }

.divider { color: var(--color-border-dark); text-align: center; font-size: 14px; letter-spacing: 0.3em; }

.icon { width: 15px; height: 15px; flex-shrink: 0; }