/* ============================================================================
   PLANTRIPPR DESIGN SYSTEM
   Single source of truth for all design tokens across the site.
   Every tool page loads this file and must never redefine these token names.
   Only override --bg and --accent per page.
   ============================================================================ */

/* ============================================================================
   TYPE TOKENS
   ============================================================================ */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem; /* hero h1 */
}

/* ============================================================================
   SPACING TOKENS (4px base unit)
   ============================================================================ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ============================================================================
   SHAPE TOKENS
   ============================================================================ */
:root {
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px; /* phase tags, chips, tabs */
}

/* ============================================================================
   LIGHT THEME (default for most tools)
   ============================================================================ */
.theme-light {
  --status-green: #1E8E3E;
  --status-amber: #B7791F;
  --status-red: #C0392B;
  --status-blue: #1E5FBF; /* neutral/informational verdict, e.g. "not required" */
  --ink: #1A1A1A;
  --muted: #6B7280;
  --line: #E4E1DC;
  --surface: #FFFFFF;
}

/* ============================================================================
   DARK THEME (aviation theme for Transit-phase tools)
   ============================================================================ */
.theme-dark {
  --status-green: #3DDB85;
  --status-amber: #FFB84D;
  --status-red: #FF5C5C;
  --status-blue: #4F6EFF;
  --ink: #F2F4F8;
  --muted: #8A93A6;
  --line: rgba(255, 255, 255, 0.08);
  --surface: #161D2E; /* default; individual dark tools may override slightly */
}

/* ============================================================================
   RESULT COMPONENTS (Section 0 — shared across every tool's results area)
   Verdict card, stat cards, and check-breakdown table share these class
   names on every tool page. Only --bg/--accent vary per tool; status colors
   and structure here are locked.
   ============================================================================ */
.verdict-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  padding: var(--space-6);
  background: var(--surface);
}
.verdict-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}
.verdict-card__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.verdict-card[data-status="pass"] .verdict-card__badge {
  color: var(--status-green);
  background: color-mix(in srgb, var(--status-green) 12%, transparent);
}
.verdict-card[data-status="pass"] { border-color: color-mix(in srgb, var(--status-green) 35%, var(--line)); }
.verdict-card[data-status="warn"] .verdict-card__badge {
  color: var(--status-amber);
  background: color-mix(in srgb, var(--status-amber) 14%, transparent);
}
.verdict-card[data-status="warn"] { border-color: color-mix(in srgb, var(--status-amber) 35%, var(--line)); }
.verdict-card[data-status="fail"] .verdict-card__badge {
  color: var(--status-red);
  background: color-mix(in srgb, var(--status-red) 12%, transparent);
}
.verdict-card[data-status="fail"] { border-color: color-mix(in srgb, var(--status-red) 35%, var(--line)); }
.verdict-card[data-status="info"] .verdict-card__badge {
  color: var(--status-blue);
  background: color-mix(in srgb, var(--status-blue) 12%, transparent);
}
.verdict-card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.verdict-card p {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  line-height: 1.55;
}
.verdict-card p:last-child { margin-bottom: 0; }
.verdict-card .figure { color: var(--ink); font-weight: 700; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  text-align: left;
}
.stat-card__value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.stat-card__label {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.check-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: var(--text-sm);
}
.check-table th,
.check-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.check-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--bg);
}
.check-table tr:last-child td { border-bottom: none; }
.check-table__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  white-space: nowrap;
}
.check-table tr[data-ok="true"] .check-table__status { color: var(--status-green); }
.check-table tr[data-ok="false"] .check-table__status { color: var(--status-red); }

.summary-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5, var(--space-4));
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.55;
}
.summary-box__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.note-box {
  padding: var(--space-4);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--status-blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-blue) 30%, transparent);
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.55;
}
.note-box__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--status-blue);
  margin-bottom: var(--space-2);
}

/* ============================================================================
   EMPTY AD SLOTS
   Keep the reserved ad footprints (leaderboard 728×90 and rectangle 300×250)
   for future ad code, but remove every visible empty-slot treatment — no
   background, border, shadow, label, or placeholder text — while preserving
   each slot's placement and dimensions.
   ============================================================================ */
.ad-slot .ad-slot__label,
.ad-slot:has(.ad-slot__box[style*="90px"]) .ad-slot__label,
.ad-slot:has(.ad-slot__box[style*="250px"]) .ad-slot__label,
.ad-slot--rect .ad-slot__label,
.ad-slot__box[style*="90px"] + * {
  display: none !important;
}
.ad-slot--lead .ad-slot__box,
.ad-slot--rect .ad-slot__box,
.ad-slot__box[style*="90px"],
.ad-slot__box[style*="250px"] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
}
.ad-slot--lead .ad-slot__box::before,
.ad-slot--rect .ad-slot__box::before,
.ad-slot__box[style*="90px"]::before,
.ad-slot__box[style*="250px"]::before {
  display: none !important;
  background: none !important;
}
.ad-slot--lead .ad-slot__box span,
.ad-slot--rect .ad-slot__box span,
.ad-slot__box[style*="90px"] span,
.ad-slot__box[style*="250px"] span {
  display: none !important;
}

/* Remove the empty ad band treatment while preserving its space. */
.ad-wrap:has(.ad-slot--lead),
.ad-wrap:has(.ad-slot--rect),
.ad-wrap:has(.ad-slot__box[style*="90px"]),
.ad-wrap:has(.ad-slot__box[style*="250px"]),
body > div:has(.ad-slot--lead),
body > div:has(.ad-slot--rect),
body > div:has(.ad-slot__box[style*="90px"]),
body > div:has(.ad-slot__box[style*="250px"]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ============================================================================
   NOTES
   ============================================================================
   - Every tool sets its own --bg and --accent on top of whichever theme
     class it uses (.theme-light or .theme-dark).
   - --bg and --accent are the ONLY tokens that vary per tool.
   - Status colors (--status-green/amber/red/blue) are NEVER redefined per tool.
     This consistency ensures green always means good, amber always means caution,
     red always means bad, regardless of which tool the visitor is on.
   ============================================================================ */