/* ============================================================
   site.css — TireGuy App / Tire Data Metrics
   Shared styles for all pages
   ============================================================ */

/* ── DARK MODE VARIABLES ── */
[data-bs-theme="dark"] {
  --tdm-black:           #08080f;
  --tdm-black-rgb:       8, 8, 15;
  --tdm-surface:         #0f0f1a;
  --tdm-elevated:        #16162a;
  --tdm-border:          rgba(139, 92, 246, 0.18);
  --tdm-purple:          #8b5cf6;
  --tdm-purple-hi:       #a855f7;
  --tdm-purple-rgb:      139, 92, 246;
  --tdm-purple-hi-rgb:   168, 85, 247;
  --tdm-chrome:          #c8c8e0;
  --tdm-white:           #f0f0ff;
  --tdm-text:            #8888aa;
  --tdm-ghost-border:    rgba(200, 200, 228, 0.22);
  --tdm-grain-opacity:   0.03;
  --tdm-nav-bg:          rgba(8, 8, 15, 0.88);
  --tdm-green:           #10b981;
  --tdm-green-rgb:       16, 185, 129;
  --tdm-amber:           #f59e0b;
  --tdm-red:             #ef4444;
  --tdm-stat-gradient:   linear-gradient(130deg, #f0f0ff 0%, #a855f7 100%);
  --bs-body-bg:          var(--tdm-black);
  --bs-body-color:       var(--tdm-text);
  --bs-body-font-family: 'Barlow', sans-serif;
  --bs-primary:          var(--tdm-purple);
  --bs-primary-rgb:      139, 92, 246;
}

/* ── LIGHT MODE VARIABLES ── */
[data-bs-theme="light"] {
  --tdm-black:           #f0f0f8;
  --tdm-black-rgb:       240, 240, 248;
  --tdm-surface:         #ffffff;
  --tdm-elevated:        #e8e8f2;
  --tdm-border:          rgba(109, 40, 217, 0.16);
  --tdm-purple:          #6d28d9;
  --tdm-purple-hi:       #7c3aed;
  --tdm-purple-rgb:      109, 40, 217;
  --tdm-purple-hi-rgb:   124, 58, 237;
  --tdm-chrome:          #2d2d4a;
  --tdm-white:           #1a1a2e;
  --tdm-text:            #4a4a6a;
  --tdm-ghost-border:    rgba(45, 45, 74, 0.28);
  --tdm-grain-opacity:   0.015;
  --tdm-nav-bg:          rgba(240, 240, 248, 0.92);
  --tdm-green:           #0f766e;
  --tdm-green-rgb:       15, 118, 110;
  --tdm-amber:           #d97706;
  --tdm-red:             #dc2626;
  --tdm-stat-gradient:   linear-gradient(130deg, #1a1a2e 0%, #6d28d9 100%);
  --bs-body-bg:          var(--tdm-black);
  --bs-body-color:       var(--tdm-text);
  --bs-body-font-family: 'Barlow', sans-serif;
  --bs-primary:          var(--tdm-purple);
  --bs-primary-rgb:      109, 40, 217;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── BASE BODY ── */
body {
  background:   var(--tdm-black);
  color:        var(--tdm-text);
  font-family:  'Barlow', sans-serif;
  font-weight:  400;
  line-height:  1.7;
  overflow-x:   hidden;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 {
  font-family: 'Exo 2', sans-serif;
  color: var(--tdm-white);
  line-height: 1.1;
}

.label-tag {
  font-family:    'Space Mono', monospace;
  font-size:      0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--tdm-green);
  border:         1px solid rgba(var(--tdm-green-rgb), 0.38);
  padding:        0.25rem 0.8rem;
  border-radius:  2px;
  display:        inline-block;
  margin-bottom:  1.25rem;
}

.divider-chrome {
  width:         44px;
  height:        3px;
  background:    linear-gradient(90deg, var(--tdm-purple), var(--tdm-purple-hi));
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

/* ── THEME TOGGLE BUTTON ── */
.btn-theme-toggle {
  background:  transparent;
  border:      1px solid var(--tdm-border);
  color:       var(--tdm-text);
  width:       34px;
  height:      34px;
  border-radius: 5px;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   0.95rem;
  cursor:      pointer;
  transition:  color 0.18s, border-color 0.18s, background 0.18s;
}
.btn-theme-toggle:hover {
  color:        var(--tdm-purple);
  border-color: rgba(var(--tdm-purple-rgb), 0.4);
  background:   rgba(var(--tdm-purple-rgb), 0.06);
}
.btn-theme-toggle:active { transform: scale(0.93); }
.btn-theme-toggle:focus-visible {
  outline:        2px solid var(--tdm-purple);
  outline-offset: 2px;
}

[data-bs-theme="light"] .btn-theme-toggle {
  border-color: rgba(139, 92, 246, 0.22);
  color: #8888aa;
}
[data-bs-theme="light"] .btn-theme-toggle:hover { color: #8b5cf6; }