/* Compelle Shared Design System
   Include on EVERY page. This is the single source of truth. */

/* ===== TOKENS ===== */
:root {
  /* Surfaces */
  --hall: #262421;
  --hall-soft: #302e2b;
  --parchment: #f7f5f2;
  --parchment-deep: #efece7;
  --page: #ffffff;
  --page-hover: #faf9f7;

  /* Ink */
  --ink: #2c2a27;
  --ink-soft: #4a4845;
  --ink-muted: #7a7875;
  --ink-faint: #a8a6a3;

  /* Brand */
  --amber: #d97706;
  --amber-dim: #b45309;
  --amber-glow: rgba(217,119,6,0.12);

  /* Debate */
  --pro: #059669;
  --pro-soft: #ecfdf5;
  --con: #dc2626;
  --con-soft: #fef2f2;
  --draw: #d97706;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(44,42,39,0.04);
  --shadow-md: 0 4px 12px rgba(44,42,39,0.07);
  --shadow-lg: 0 8px 24px rgba(44,42,39,0.10);

  /* Borders */
  --border: rgba(44,42,39,0.08);

  /* Type */
  --display: 'Cinzel', serif;
  --body: 'Outfit', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--body);
  background: var(--parchment);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ===== SHARED NAV ===== */
.c-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--hall);
  display: flex; align-items: center;
  padding: 0 32px; height: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.c-nav-logo {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  color: #f0ede6; letter-spacing: .22em; text-decoration: none;
}
.c-nav-links {
  display: flex; gap: 20px; margin-left: auto; align-items: center;
}
.c-nav-link {
  font-family: var(--body); font-size: 12px; font-weight: 600;
  color: rgba(240,237,230,0.5); text-decoration: none;
  letter-spacing: .04em; transition: color .15s;
}
.c-nav-link:hover { color: rgba(240,237,230,0.8); }
.c-nav-link.active { color: #f0ede6; }
.c-nav-cta {
  font-family: var(--body); font-size: 11px; font-weight: 700;
  color: var(--hall); background: var(--amber);
  padding: 6px 16px; border-radius: 4px;
  text-decoration: none; letter-spacing: .06em;
  text-transform: uppercase;
}
.c-nav-cta:hover { background: #f59e0b; }
.c-nav-hamburger {
  display: none; background: none; border: none;
  color: #f0ede6; font-size: 18px; cursor: pointer; margin-left: auto;
}

/* ===== SHARED FOOTER ===== */
.c-footer {
  background: var(--hall); padding: 40px 32px; margin-top: 40px;
  color: rgba(240,237,230,0.4);
}
.c-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: start;
  gap: 32px; flex-wrap: wrap;
}
.c-footer-brand { display: flex; align-items: center; gap: 8px; }
.c-footer-icon {
  width: 20px; height: 20px; background: var(--amber); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 10px; color: var(--hall);
}
.c-footer-text {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  color: #f0ede6; letter-spacing: .2em;
}
.c-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.c-footer-links a {
  font-size: 12px; color: rgba(240,237,230,0.4); text-decoration: none;
}
.c-footer-links a:hover { color: rgba(240,237,230,0.7); }
.c-footer-copy { font-size: 11px; width: 100%; margin-top: 16px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .c-nav { padding: 0 16px; }
  .c-nav-hamburger { display: block; }
  .c-nav-links {
    display: none; position: absolute; top: 52px; left: 0; right: 0;
    background: var(--hall); flex-direction: column;
    padding: 16px 24px; gap: 12px;
  }
  .c-nav-links.open { display: flex; }
  .c-footer { padding: 30px 16px; }
}