/* ============================================================
   FOXYYY DESIGN SYSTEM — global variables, logo, typography
   Canonical reference for all foxyyy products.
   Import via: <link rel="stylesheet" href="/static/design_system.css">
   ============================================================ */

/* ---------- brand ---------- */
:root {
  --fox-amber: #c9a227;
  --fox-amber-dark: #8b6914;
  --fox-amber-subtle: rgba(201, 162, 39, 0.12);

  /* functional */
  --fox-up: #0ecb81;
  --fox-up-light: #0a9f66;
  --fox-down: #f6465d;
  --fox-down-light: #d93025;
  --fox-warn: #d4a847;
  --fox-warn-light: #a07e1c;
}

/* ---------- dark mode (default) ---------- */
body.dark, body:not(.light) {
  --bg:       #0b0e11;
  --surface:  #12161c;
  --surface2: #1a1f28;
  --border:   #1e2530;
  --tx:       #d1d5db;
  --tx2:      #8892a0;
  --tx3:      #4a5568;
  --up:       var(--fox-up);
  --down:     var(--fox-down);
  --warn:     var(--fox-warn);
  color-scheme: dark;
}

/* ---------- light mode ---------- */
body.light {
  --bg:       #fafafa;
  --surface:  #ffffff;
  --surface2: #f5f5f5;
  --border:   #e5e7eb;
  --tx:       #1a1a1a;
  --tx2:      #6b7280;
  --tx3:      #9ca3af;
  --up:       var(--fox-up-light);
  --down:     var(--fox-down-light);
  --warn:     var(--fox-warn-light);
  color-scheme: light;
}

/* ---------- cockpit mode (dashboard only) ---------- */
body.cockpit {
  --bg:       #0d0d0d;
  --surface:  #141414;
  --surface2: #1a1a17;
  --border:   #2a2520;
  --tx:       #c8b89a;
  --tx2:      #665e4e;
  --tx3:      #4a4538;
  --up:       #8ba865;
  --down:     #f6465d;
  --warn:     #c8a84e;
  --accent-pivot: #a87ec8;
}

/* ---------- reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: -apple-system, 'Inter', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- typography ---------- */
.mono, td.num, .num, code, .ticker-val {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-feature-settings: 'tnum';
}
h1, h2, h3, h4 { font-weight: 600; margin: 0 0 0.5em; }
.section-title {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tx3);
  margin: 0 0 12px;
}

/* ---------- links, buttons ---------- */
a { color: var(--fox-amber); text-decoration: none; }
a:hover { text-decoration: underline; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--fox-amber);
  background: transparent;
  border: 1px solid var(--fox-amber);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn:hover {
  background: var(--fox-amber);
  color: var(--bg);
}
.btn-primary {
  background: var(--fox-amber);
  color: #0b0e11;
  border-color: var(--fox-amber);
}
.btn-primary:hover { background: #b08e1f; }

/* ---------- layout primitives ---------- */
.surface  { background: var(--surface); border: 1px solid var(--border); border-radius: 2px; }
.surface2 { background: var(--surface2); border: 1px solid var(--border); border-radius: 2px; }
.pad      { padding: 16px; }
.gap-sm   { gap: 8px; }
.gap-md   { gap: 16px; }

/* ---------- badges / pills ---------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.5px; text-transform: uppercase;
  border-radius: 2px;
  background: var(--fox-amber-subtle);
  color: var(--fox-amber);
  border: 1px solid rgba(201,162,39,0.25);
}
.badge-up   { background: rgba(14,203,129,0.12); color: var(--up); border-color: rgba(14,203,129,0.25); }
.badge-down { background: rgba(246,70,93,0.12);  color: var(--down); border-color: rgba(246,70,93,0.25); }

/* ---------- status dots (CSS circles, NOT emoji) ---------- */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}
.dot-active  { background: var(--up); }
.dot-idle    { background: var(--warn); }
.dot-dead    { background: var(--down); }
.dot-amber   { background: var(--fox-amber); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tx3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
tr:hover td { background: var(--surface2); }
td.num {
  text-align: right;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-feature-settings: 'tnum';
}
.up   { color: var(--up); }
.down { color: var(--down); }

/* ---------- logo component ---------- */
.fox-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.fox-logo svg { width: 28px; height: 28px; flex-shrink: 0; }
.fox-logo .fox-wordmark {
  font-size: 15px; font-weight: 600;
  letter-spacing: 2px;
  color: var(--fox-amber);
}
.fox-logo .fox-sub {
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx3);
  margin-left: 2px;
}

/* ---------- nav ---------- */
.fox-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.fox-nav-links {
  display: flex; gap: 20px;
  font-size: 12px; font-weight: 500;
}
.fox-nav-links a { color: var(--tx2); }
.fox-nav-links a:hover, .fox-nav-links a.active { color: var(--fox-amber); text-decoration: none; }

/* ---------- theme toggle ---------- */
.theme-toggle {
  cursor: pointer;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--tx3);
  border: 1px solid var(--border);
  border-radius: 2px;
  background: transparent;
}
.theme-toggle:hover { border-color: var(--fox-amber); color: var(--fox-amber); }

/* ---------- ticker band ---------- */
.ticker-band {
  display: flex;
  gap: 32px;
  padding: 8px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  white-space: nowrap;
}
.ticker-item {
  display: flex; flex-direction: column; gap: 1px;
}
.ticker-label {
  font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tx3);
}
.ticker-val {
  font-size: 18px; font-weight: 600;
  line-height: 1.2;
}

/* ---------- footer ---------- */
.fox-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--tx3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.fox-footer a { color: var(--tx2); }
.fox-footer a:hover { color: var(--fox-amber); }

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  .fox-nav { padding: 10px 16px; }
  .ticker-band { padding: 8px 16px; gap: 20px; }
}