/* ============================================================================
   CP Coach Design System — Tokens (opt-in / non-destructive build)
   "Paper + Ink" warm minimalism.

   This is the RETROFIT variant of the kit, safe to drop into an existing site:
     - Defines design variables on :root (inert — defining a CSS var changes
       nothing until it is used).
     - Provides opt-in component + helper classes (apply only when you add them).
     - Does NOT set global body / heading styles.
     - Does NOT define --background / --foreground (avoids clobbering existing
       theme variables).

   Nothing on the page changes until you apply a class like `btn-primary`,
   `card-hero`, `bg-paper-2`, etc. Pairs with cp-design-preset.js (Tailwind).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Font families ── */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', Consolas, 'Courier New', monospace;

  /* ── Core Palette: Paper + Ink ── */
  --paper-1: #FAF8F4;
  --paper-2: #F4F1EA;
  --paper-3: #EDE8DE;
  --paper-4: #E4DDD0;

  --ink-1: #1F1B16;
  --ink-2: #3D3730;
  --ink-3: #6B655C;
  --ink-4: #9A938A;
  --ink-5: #BFB8AD;

  /* ── Accent Colors ── */
  --sage: #8FA68A;
  --sage-soft: #D9E0D4;
  --clay: #B5836A;
  --clay-soft: #E8D7CB;
  --ink-accent: #2C3742;

  /* ── Semantic Colors (muted) ── */
  --ok: #6B8E5A;    --ok-bg: #DCE5D2;
  --warn: #A88B4A;  --warn-bg: #EDDFC2;
  --alert: #9C5642; --alert-bg: #E8D2C8;
  --info: #5A7B8E;  --info-bg: #D2DEE5;

  /* ── Heatmap Scale (single-hue clay) ── */
  --heat-0: #F4F1EA;
  --heat-1: #E5DCC6;
  --heat-2: #D9C9A6;
  --heat-3: #C9A878;
  --heat-4: #B5835A;
  --heat-5: #9C5E3D;

  /* ── Shadows (warm ink, never pure black) ── */
  --shadow-1: 0 1px 2px rgba(31, 27, 22, 0.04);
  --shadow-2: 0 2px 6px rgba(31, 27, 22, 0.06), 0 1px 2px rgba(31, 27, 22, 0.04);
  --shadow-3: 0 4px 12px rgba(31, 27, 22, 0.08), 0 2px 4px rgba(31, 27, 22, 0.04);
  --shadow-4: 0 8px 24px rgba(31, 27, 22, 0.10), 0 4px 8px rgba(31, 27, 22, 0.04);

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ── Borders ── */
  --border-1: 1px solid var(--paper-4);
  --border-soft: 1px solid var(--paper-3);
  --border-strong: 1px solid var(--ink-4);
  --border-focus: 2px solid var(--sage);
}

/* Tabular nums helper (opt-in) */
.tabular { font-feature-settings: "tnum"; }

/* ============================================================================
   COMPONENT CLASSES (opt-in)
   ============================================================================ */

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--ink-accent); color: var(--paper-1);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  border-radius: var(--radius-md); padding: 8px 16px; height: 36px;
  box-shadow: var(--shadow-1); border: none; cursor: pointer;
  transition: background-color 100ms ease, box-shadow 80ms ease; outline: none;
}
.btn-primary:hover { background-color: var(--ink-1); box-shadow: var(--shadow-2); }
.btn-primary:active { box-shadow: none; }
.btn-primary:focus-visible { outline: var(--border-focus); outline-offset: 2px; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--paper-1); color: var(--ink-1);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  border: var(--border-1); border-radius: var(--radius-md);
  padding: 8px 16px; height: 36px; cursor: pointer;
  transition: background-color 100ms ease; outline: none;
}
.btn-secondary:hover { background-color: var(--paper-2); }
.btn-secondary:focus-visible { outline: var(--border-focus); outline-offset: 2px; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: transparent; color: var(--ink-2);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  border: none; border-radius: var(--radius-md); padding: 6px 10px;
  cursor: pointer; transition: background-color 100ms ease; outline: none;
}
.btn-ghost:hover { background-color: var(--paper-3); }

/* ── Cards ── */
.card-inline {
  background-color: var(--paper-2); border: var(--border-soft);
  border-radius: var(--radius-md); padding: 16px; box-shadow: none;
  transition: background-color 100ms ease;
}
.card-inline:hover { background-color: var(--paper-3); }

.card-standalone {
  background-color: var(--paper-2); border: none;
  border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-1);
}

.card-hero {
  background-color: var(--paper-2); border: var(--border-soft);
  border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-2);
}

/* ── Verdict / status pills ── */
.verdict-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.verdict-pill::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background-color: currentColor;
}
.verdict-ok    { background-color: var(--ok-bg);    color: var(--ok); }
.verdict-alert { background-color: var(--alert-bg); color: var(--alert); }
.verdict-warn  { background-color: var(--warn-bg);  color: var(--warn); }
.verdict-info  { background-color: var(--info-bg);  color: var(--info); }

/* ── Tags ── */
.tag {
  display: inline-block; padding: 3px 8px; border-radius: var(--radius-sm);
  background-color: var(--paper-3); border: var(--border-soft);
  font-family: var(--font-sans); font-size: 11px; font-weight: 400; color: var(--ink-2);
}

/* ── Section label (uppercase metadata) ── */
.label-caps {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}

/* ── Shimmer loading state ── */
.shimmer {
  background: linear-gradient(90deg, var(--paper-3) 0%, var(--paper-2) 50%, var(--paper-3) 100%);
  background-size: 200% 100%; animation: shimmer-sweep 1.6s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* ── Data table ── */
.data-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: var(--font-sans); font-size: 13px;
}
.data-table th {
  background-color: var(--paper-3); color: var(--ink-3);
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 16px; text-align: left; border-bottom: var(--border-1);
}
.data-table td {
  background-color: var(--paper-1); padding: 10px 16px;
  border-bottom: var(--border-soft); color: var(--ink-1);
  transition: background-color 100ms ease;
}
.data-table tr:hover td { background-color: var(--paper-2); }

/* ── Nav item ── */
.nav-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: var(--radius-md); font-family: var(--font-sans);
  font-size: 13px; font-weight: 400; color: var(--ink-3); cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease; text-decoration: none;
}
.nav-item:hover  { color: var(--ink-1); background-color: var(--paper-3); }
.nav-item.active { color: var(--ink-1); background-color: var(--paper-3); font-weight: 500; }

/* ── Empty state (serif italic) ── */
.empty-state-text {
  font-family: var(--font-serif); font-size: 17px; line-height: 28px;
  font-style: italic; color: var(--ink-3); text-align: center; padding: 48px 0;
}

/* ── Hero numerics (serif, tabular, tight) ── */
.hero-number {
  font-family: var(--font-serif); font-size: 36px; line-height: 44px;
  font-weight: 400; letter-spacing: -0.02em; font-feature-settings: "tnum"; color: var(--ink-1);
}

/* ============================================================================
   HELPER UTILITIES (opt-in, plain CSS — no Tailwind required)
   Note: serif/mono helpers are named cp-* to avoid clashing with Tailwind's
   own .font-serif / .font-mono utilities on existing sites.
   ============================================================================ */
.cp-serif { font-family: var(--font-serif); }
.cp-mono  { font-family: var(--font-mono); }

.text-ink-1 { color: var(--ink-1); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.text-ink-4 { color: var(--ink-4); }

.bg-paper-1 { background-color: var(--paper-1); }
.bg-paper-2 { background-color: var(--paper-2); }
.bg-paper-3 { background-color: var(--paper-3); }
.bg-paper-4 { background-color: var(--paper-4); }

.text-sage  { color: var(--sage); }
.text-clay  { color: var(--clay); }
.text-ok    { color: var(--ok); }
.text-warn  { color: var(--warn); }
.text-alert { color: var(--alert); }
.text-info  { color: var(--info); }

.border-paper-4 { border-color: var(--paper-4); }
.border-paper-3 { border-color: var(--paper-3); }
.border-sage    { border-color: var(--sage); }

.shadow-warm-1 { box-shadow: var(--shadow-1); }
.shadow-warm-2 { box-shadow: var(--shadow-2); }
.shadow-warm-3 { box-shadow: var(--shadow-3); }
.shadow-warm-4 { box-shadow: var(--shadow-4); }

/* ── Keyframes ── */
@keyframes shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}