/* ========================================
   CSS Custom Properties — Denim Theme
   Neo-skeuomorphic denim palette: indigo base, copper accent, gold thread
   ======================================== */

:root {
  /* Backgrounds — deep indigo denim */
  --bg-base: #1B2838;
  --bg-raised: #0F1923;
  --bg-card: rgba(42,63,85,0.85);
  --bg-card-hover: #3B5068;
  --bg-surface: #2A3F55;

  /* Borders — gold stitch */
  --border-subtle: rgba(200,169,81,0.15);
  --border-medium: rgba(200,169,81,0.3);

  /* Text */
  --text-primary: #F0EDE8;
  --text-secondary: #8FA4B8;
  --text-muted: #5A7088;

  /* Accent — copper rivet */
  --accent: #B87333;
  --accent-bright: #D4914A;
  --accent-glow: rgba(184,115,51,0.12);
  --accent-dim: rgba(184,115,51,0.06);

  /* Hero number — pure white for maximum contrast */
  --gold: #FFFFFF;

  /* Yellow stitch for decorative borders */
  --stitch: #BFA068;

  /* Denim sub-metric color */
  --denim: #8AACDA;
  --denim-dim: rgba(138,172,218,0.15);

  /* Semantic colors */
  --green: #E8E0D4;
  --green-bg: rgba(232,224,212,0.10);
  --yellow: #BFA068;
  --yellow-bg: rgba(191,160,104,0.10);
  --red: #C23B22;
  --red-bg: rgba(194,59,34,0.10);

  /* Content type accents (denim-compatible) */
  --cyan: #6B8DB5;
  --purple: #A07858;
  --pink: #9E7080;

  /* Wash scale (replaces green/yellow/red traffic lights) */
  --wash-1: #283A5A;
  --wash-2: #2E4A6B;
  --wash-3: #5B7A9E;
  --wash-4: #8EABC4;
  --wash-5: #C4D4E0;

  /* Typography */
  --font-display: 'Oswald', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', 'SF Mono', 'Consolas', monospace;

  /* Layout */
  --max-width: 940px;

  /* Jeans card tiers — denim wash gradients */
  --jeans-tier-1: linear-gradient(135deg, #1A2744, #283A5A);
  --jeans-tier-2: linear-gradient(135deg, #1F3555, #2E4A6B);
  --jeans-tier-3: linear-gradient(135deg, #3E6080, #5B7A9E);
  --jeans-tier-4: linear-gradient(135deg, #6A8FAE, #8EABC4);
  --jeans-tier-5: linear-gradient(135deg, #A0BFD4, #C4D4E0);
}