/**
 * Preflop Edge — Design Tokens (build-002 foundation)
 * Single source of truth for colors, typography, spacing, motion.
 * Import via: <link rel="stylesheet" href="css/tokens.css">
 *
 * Aesthetic: dark terminal — poker felt + gold accent + monospace data.
 * Fonts: Inter (UI), JetBrains Mono (data/numbers).
 */
:root {
  /* Palette */
  --pe-bg: #0a0e14;
  --pe-bg-elevated: #11161f;
  --pe-surface: #1a2030;
  --pe-surface-hover: #232b3d;
  --pe-border: #2a3346;
  --pe-border-strong: #3a4555;

  --pe-text: #e4e9f0;
  --pe-text-muted: #8b94a8;
  --pe-text-dim: #5a6478;

  --pe-accent: #d4af37;          /* poker gold */
  --pe-accent-bright: #f0c850;
  --pe-accent-dim: #8a7424;

  --pe-felt: #0a4d2c;
  --pe-felt-dark: #032a18;

  /* Semantic */
  --pe-good: #2ecc71;
  --pe-warn: #f1c40f;
  --pe-bad: #e74c3c;
  --pe-info: #3498db;

  /* Tier badge colors */
  --pe-tier-god: #6b2c8e;
  --pe-tier-elite: #2980b9;
  --pe-tier-premium: #27ae60;
  --pe-tier-strong: #2ecc71;
  --pe-tier-playable: #f1c40f;
  --pe-tier-marginal: #e67e22;
  --pe-tier-trash: #c0392b;

  /* Heat scale (win % buckets) */
  --pe-h85: #6b2c8e;
  --pe-h80: #1a5276;
  --pe-h75: #1e8449;
  --pe-h70: #27ae60;
  --pe-h65: #2ecc71;
  --pe-h60: #58d68d;
  --pe-h55: #f1c40f;
  --pe-h50: #f39c12;
  --pe-h45: #e67e22;
  --pe-h40: #d35400;
  --pe-h35: #c0392b;
  --pe-h30: #922b21;
  --pe-h25: #7b241c;
  --pe-h20: #641e16;
  --pe-h15: #4a1410;

  /* Typography */
  --pe-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pe-font-mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  --pe-fs-xs: 0.7rem;
  --pe-fs-sm: 0.8rem;
  --pe-fs-base: 0.9rem;
  --pe-fs-md: 1rem;
  --pe-fs-lg: 1.25rem;
  --pe-fs-xl: 1.5rem;
  --pe-fs-2xl: 2rem;
  --pe-fs-3xl: 2.75rem;

  /* Spacing scale (4px base) */
  --pe-sp-1: 4px;
  --pe-sp-2: 8px;
  --pe-sp-3: 12px;
  --pe-sp-4: 16px;
  --pe-sp-5: 20px;
  --pe-sp-6: 24px;
  --pe-sp-8: 32px;
  --pe-sp-10: 40px;
  --pe-sp-12: 48px;

  /* Radii */
  --pe-radius-sm: 4px;
  --pe-radius: 8px;
  --pe-radius-lg: 12px;
  --pe-radius-full: 999px;

  /* Shadows */
  --pe-shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --pe-shadow: 0 4px 15px rgba(0,0,0,.3);
  --pe-shadow-lg: 0 8px 30px rgba(0,0,0,.4);

  /* Motion */
  --pe-transition: 150ms ease;
  --pe-transition-slow: 300ms ease;

  /* Layout */
  --pe-max-width: 1200px;
  --pe-nav-height: 56px;
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--pe-font-ui);
  background: var(--pe-bg);
  color: var(--pe-text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Monospace for numerical data */
.mono, code, .grid-val, .grid-hand, td.numeric {
  font-family: var(--pe-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Focus visibility for a11y */
:focus-visible {
  outline: 2px solid var(--pe-accent);
  outline-offset: 2px;
}

/* Container */
.pe-container {
  max-width: var(--pe-max-width);
  margin: 0 auto;
  padding: var(--pe-sp-4);
}

/* Nav shell (build-002 will fill this in) */
.pe-nav {
  height: var(--pe-nav-height);
  background: var(--pe-bg-elevated);
  border-bottom: 1px solid var(--pe-border);
  display: flex;
  align-items: center;
  padding: 0 var(--pe-sp-4);
  position: sticky;
  top: 0;
  z-index: 100;
}

.pe-nav-brand {
  font-weight: 700;
  color: var(--pe-accent);
  text-decoration: none;
  font-size: var(--pe-fs-lg);
}

.pe-nav-links {
  display: flex;
  gap: var(--pe-sp-4);
  margin-left: auto;
}

.pe-nav-links a {
  color: var(--pe-text-muted);
  text-decoration: none;
  font-size: var(--pe-fs-base);
  padding: var(--pe-sp-2) var(--pe-sp-3);
  border-radius: var(--pe-radius-sm);
  transition: color var(--pe-transition), background var(--pe-transition);
}

.pe-nav-links a:hover,
.pe-nav-links a.active {
  color: var(--pe-accent);
  background: var(--pe-surface);
}

/* Section card */
.pe-section {
  background: var(--pe-surface);
  border-radius: var(--pe-radius-lg);
  padding: var(--pe-sp-5);
  margin-bottom: var(--pe-sp-4);
  box-shadow: var(--pe-shadow);
}

.pe-section h2 {
  color: var(--pe-accent);
  font-size: var(--pe-fs-lg);
  margin-bottom: var(--pe-sp-3);
  padding-bottom: var(--pe-sp-2);
  border-bottom: 1px solid var(--pe-border);
}

/* Tier badges (reusable) */
.pe-tier-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--pe-radius-sm);
  font-weight: 700;
  font-size: var(--pe-fs-xs);
  color: #fff;
  letter-spacing: 0.5px;
}
.pe-tier-god { background: var(--pe-tier-god); }
.pe-tier-elite { background: var(--pe-tier-elite); }
.pe-tier-premium { background: var(--pe-tier-premium); }
.pe-tier-strong { background: var(--pe-tier-strong); color: #000; }
.pe-tier-playable { background: var(--pe-tier-playable); color: #000; }
.pe-tier-marginal { background: var(--pe-tier-marginal); }
.pe-tier-trash { background: var(--pe-tier-trash); }

/* Buttons */
.pe-btn {
  display: inline-block;
  padding: var(--pe-sp-2) var(--pe-sp-5);
  border-radius: var(--pe-radius);
  border: 1px solid var(--pe-border-strong);
  background: var(--pe-surface);
  color: var(--pe-text);
  font-family: var(--pe-font-ui);
  font-size: var(--pe-fs-base);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--pe-transition);
}
.pe-btn:hover { background: var(--pe-surface-hover); border-color: var(--pe-accent-dim); }
.pe-btn-primary {
  background: var(--pe-accent);
  color: #000;
  border-color: var(--pe-accent);
  font-weight: 600;
}
.pe-btn-primary:hover { background: var(--pe-accent-bright); }

/* Mobile-first grid breakpoints */
@media (max-width: 640px) {
  .pe-container { padding: var(--pe-sp-2); }
  .pe-section { padding: var(--pe-sp-3); }
  .pe-nav-links { gap: var(--pe-sp-1); }
  .pe-nav-links a { padding: var(--pe-sp-1) var(--pe-sp-2); font-size: var(--pe-fs-sm); }
}