/* ═══════════════════════════════════════════════════════════════════════
   v3 theme — "Warm Editorial"  ·  2026-04-23
   A complete visual refresh from the v2 cool-slate GitHub-dark palette.
   Keeps all v2 class names + data bindings intact — pure skin overlay.

   Design language:
   - Warm charcoal base (#14100e) instead of cold slate (#0d1117)
   - Amber / copper / rose accents instead of blue / purple
   - Serif display face (Cormorant Garamond) for hero numbers
   - Inter body text for UI
   - Soft warm shadows + subtle grain
   - Generous letter-spacing on section labels
   - Columnar rhythm, editorial dividers
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Warm charcoal base — replaces --bg-primary etc. */
  --v3-bg-0: #14100e;          /* page background */
  --v3-bg-1: #1e1814;          /* card */
  --v3-bg-2: #2a2218;          /* elevated */
  --v3-bg-3: #362a1f;          /* hover */

  /* Warm text */
  --v3-text-0: #f5ebd6;        /* primary (warm cream) */
  --v3-text-1: #d4c2a0;        /* secondary */
  --v3-text-2: #9a8873;        /* tertiary */
  --v3-text-3: #6b5d4a;        /* muted */

  /* Editorial accents */
  --v3-amber: #f59e0b;         /* primary accent */
  --v3-amber-deep: #d97706;
  --v3-copper: #c2410c;
  --v3-rose: #e11d48;          /* signal/alert */
  --v3-rose-soft: #fb7185;
  --v3-forest: #4ade80;        /* success */
  --v3-forest-deep: #15803d;
  --v3-gold: #facc15;          /* offer / highlight */
  --v3-sky: #38bdf8;           /* info secondary */
  --v3-violet: #a78bfa;        /* networking */

  /* Warm borders */
  --v3-border: #3d3024;
  --v3-border-soft: #2a2218;

  /* Shadows */
  --v3-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --v3-shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(245,158,11,0.08);
  --v3-shadow-lg: 0 12px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(245,158,11,0.12);

  /* Fonts */
  --v3-font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --v3-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
}

/* ═══ Base layer — body + container ═══ */

body {
  background: var(--v3-bg-0) !important;
  color: var(--v3-text-0) !important;
  font-family: var(--v3-font-sans) !important;
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: -0.005em;
}

body::before {
  /* Subtle grain overlay for editorial feel */
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(245,158,11,0.03), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(225,29,72,0.02), transparent 40%);
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

.container, main {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 24px !important;
}

/* ═══ Header / masthead ═══ */

header, .header, .site-header {
  background: var(--v3-bg-0) !important;
  border-bottom: 1px solid var(--v3-border) !important;
  padding: 20px 24px !important;
}

h1, .header h1 {
  font-family: var(--v3-font-serif) !important;
  font-weight: 700 !important;
  font-size: 2em !important;
  color: var(--v3-text-0) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

h2, h3, h4 {
  font-family: var(--v3-font-sans) !important;
  font-weight: 600 !important;
  color: var(--v3-text-0) !important;
  letter-spacing: -0.01em !important;
}

.v2-section-title {
  font-size: 0.75em !important;
  font-weight: 700 !important;
  color: var(--v3-amber) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--v3-border) !important;
  margin-bottom: 16px !important;
}

.v2-section-sub {
  color: var(--v3-text-2) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.85em !important;
}

/* ═══ Hero sections ═══ */

.v2-hero, .v2-page-hero {
  background: linear-gradient(135deg, var(--v3-bg-1), var(--v3-bg-2)) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 8px !important;
  padding: 28px 32px !important;
  margin: 20px 0 !important;
  box-shadow: var(--v3-shadow-md) !important;
  position: relative;
}

.v2-hero::before, .v2-page-hero::before {
  /* Editorial rule above hero */
  content: '';
  position: absolute;
  top: -1px; left: 32px; right: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--v3-amber), transparent);
}

.v2-page-hero-title {
  font-family: var(--v3-font-serif) !important;
  font-size: 1.6em !important;
  font-weight: 600 !important;
  color: var(--v3-text-0) !important;
  letter-spacing: -0.015em !important;
}

.v2-page-hero-sub {
  color: var(--v3-text-2) !important;
  font-size: 0.9em !important;
}

.v2-hero-row {
  grid-template-columns: 1fr 2fr !important;
  gap: 28px !important;
}

/* ═══ Countdown — the deadline clock ═══ */

.v2-countdown {
  background: linear-gradient(135deg, rgba(225,29,72,0.08), rgba(225,29,72,0.15)) !important;
  border: 1px solid var(--v3-rose) !important;
  border-radius: 8px !important;
  padding: 24px 16px !important;
  box-shadow: 0 0 32px rgba(225,29,72,0.12) !important;
}

.v2-countdown-num {
  font-family: var(--v3-font-serif) !important;
  font-size: 4.5em !important;
  font-weight: 700 !important;
  color: var(--v3-rose-soft) !important;
  letter-spacing: -0.04em !important;
  line-height: 0.9 !important;
  text-shadow: 0 0 24px rgba(251,113,133,0.3);
}

.v2-countdown-label {
  font-size: 0.7em !important;
  color: var(--v3-rose-soft) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.25em !important;
  margin-top: 10px !important;
}

/* ═══ Interview / Live Opp / Action cards ═══ */

.v2-interviews-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
}

.v2-interview-card {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-border) !important;
  border-left: 3px solid var(--v3-forest) !important;
  border-radius: 6px !important;
  padding: 16px 18px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: var(--v3-shadow-sm) !important;
}

.v2-interview-card:hover {
  background: var(--v3-bg-2) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--v3-shadow-lg) !important;
}

.v2-interview-co {
  font-family: var(--v3-font-sans) !important;
  font-weight: 600 !important;
  color: var(--v3-text-0) !important;
  font-size: 0.95em !important;
  letter-spacing: -0.005em !important;
}

.v2-interview-role {
  color: var(--v3-text-2) !important;
  font-size: 0.82em !important;
  margin-top: 4px !important;
}

.v2-interview-status {
  font-size: 0.7em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
  margin-top: 10px !important;
}

/* ═══ Metrics strip — the funnel ═══ */

.v2-metrics-strip {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 14px !important;
  margin: 24px 0 !important;
}

.v2-metric {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-border) !important;
  border-top: 3px solid var(--v3-amber) !important;
  border-radius: 6px !important;
  padding: 20px 18px !important;
  transition: all 0.2s !important;
  box-shadow: var(--v3-shadow-sm) !important;
}

.v2-metric:hover {
  background: var(--v3-bg-2) !important;
  box-shadow: var(--v3-shadow-md) !important;
}

.v2-metric-num {
  font-family: var(--v3-font-serif) !important;
  font-size: 2.6em !important;
  font-weight: 700 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.03em !important;
  color: var(--v3-text-0) !important;
}

.v2-metric-label {
  font-size: 0.68em !important;
  color: var(--v3-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-top: 12px !important;
  font-weight: 600 !important;
}

.v2-metric-sub {
  font-size: 0.72em !important;
  color: var(--v3-text-3) !important;
  margin-top: 4px !important;
  font-style: italic;
}

/* Metric color variants */
.v2-metric-applied { border-top-color: var(--v3-amber) !important; }
.v2-metric-applied .v2-metric-num { color: var(--v3-amber) !important; }
.v2-metric-interview { border-top-color: var(--v3-forest) !important; }
.v2-metric-interview .v2-metric-num { color: var(--v3-forest) !important; }
.v2-metric-offer { border-top-color: var(--v3-gold) !important; }
.v2-metric-offer .v2-metric-num { color: var(--v3-gold) !important; }
.v2-metric-network { border-top-color: var(--v3-violet) !important; }
.v2-metric-network .v2-metric-num { color: var(--v3-violet) !important; }

/* ═══ Hero stats ═══ */

.v2-hero-stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 14px !important;
}

.v2-hero-stat {
  background: rgba(245,158,11,0.04) !important;
  border: 1px solid rgba(245,158,11,0.15) !important;
  border-radius: 6px !important;
  padding: 16px 18px !important;
  transition: all 0.2s !important;
}

.v2-hero-stat:hover {
  background: rgba(245,158,11,0.08) !important;
  border-color: rgba(245,158,11,0.3) !important;
  transform: translateY(-2px) !important;
}

.v2-hero-stat-num {
  font-family: var(--v3-font-serif) !important;
  font-size: 2.2em !important;
  font-weight: 700 !important;
  line-height: 0.95 !important;
  color: var(--v3-amber) !important;
  letter-spacing: -0.02em !important;
}

.v2-hero-stat-label {
  font-size: 0.68em !important;
  color: var(--v3-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-top: 10px !important;
}

.v2-hero-stat-sub {
  font-size: 0.72em !important;
  color: var(--v3-text-3) !important;
  margin-top: 4px !important;
  font-style: italic;
}

/* ═══ Actions / triggers ═══ */

.v2-actions {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 8px !important;
  padding: 20px 24px !important;
  margin: 20px 0 !important;
}

.v2-actions-title {
  font-size: 0.75em !important;
  font-weight: 700 !important;
  color: var(--v3-amber) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
}

.v2-actions-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}

.v2-btn {
  background: var(--v3-bg-2) !important;
  color: var(--v3-text-0) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-family: var(--v3-font-sans) !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.15s !important;
  cursor: pointer;
}

.v2-btn:hover:not(:disabled) {
  background: var(--v3-bg-3) !important;
  border-color: var(--v3-amber) !important;
  color: var(--v3-amber) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(245,158,11,0.15) !important;
}

/* ═══ Automation status bar ═══ */

.v2-automation {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-border) !important;
  border-left: 3px solid var(--v3-forest) !important;
  border-radius: 6px !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
}

.v2-auto-num {
  font-family: var(--v3-font-serif) !important;
  font-size: 1.8em !important;
  font-weight: 700 !important;
  color: var(--v3-text-0) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.v2-auto-label {
  font-size: 0.65em !important;
  color: var(--v3-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-top: 6px !important;
  font-weight: 600 !important;
}

/* ═══ Filter bars ═══ */

.v2-filter-bar {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 6px !important;
  padding: 12px 18px !important;
  gap: 10px !important;
}

.v2-filter-bar-label {
  font-size: 0.7em !important;
  color: var(--v3-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-weight: 600 !important;
}

/* ═══ Tables & generic cards ═══ */

table {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

th {
  background: var(--v3-bg-2) !important;
  color: var(--v3-amber) !important;
  font-size: 0.75em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--v3-border) !important;
  text-align: left;
}

td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--v3-border-soft) !important;
  color: var(--v3-text-1) !important;
}

tr:hover td {
  background: var(--v3-bg-2) !important;
}

a { color: var(--v3-amber) !important; }
a:hover { color: var(--v3-amber-deep) !important; }

/* ═══ Nav links ═══ */

nav a, .nav a, .v2-nav a {
  color: var(--v3-text-1) !important;
  font-size: 0.85em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  transition: all 0.15s !important;
}

nav a:hover, .nav a:hover, .v2-nav a:hover {
  color: var(--v3-amber) !important;
  background: var(--v3-bg-1) !important;
}

nav a.active, .nav a.active {
  color: var(--v3-amber) !important;
  border-bottom: 2px solid var(--v3-amber) !important;
}

/* ═══ Scrollbar (webkit) — warm tone ═══ */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--v3-bg-0); }
::-webkit-scrollbar-thumb { background: var(--v3-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--v3-amber-deep); }

/* ═══ Responsive ═══ */

@media (max-width: 768px) {
  .container, main { padding: 16px !important; }
  .v2-hero, .v2-page-hero { padding: 20px !important; }
  .v2-hero-row { grid-template-columns: 1fr !important; }
  .v2-countdown-num { font-size: 3.5em !important; }
  .v2-metric-num { font-size: 2em !important; }
  h1 { font-size: 1.6em !important; }
}