/* =============================================================================
   Ballistics Tracker — Design Tokens
   Source of truth: BT_Design_Spec.pdf v1.0 (May 2026, Tanner Sauter)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Font families ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Courier New", monospace;

  /* ---------- Amber / Copper palette ---------- */
  --color-amber-50:  #FAEEDA;   /* Hover tints, light overlays */
  --color-amber-100: #F5D99A;   /* Subtle background highlights */
  --color-amber-200: #EFC860;   /* Borders on light surfaces */
  --color-amber-300: #EFB040;   /* Inactive icon fills */
  --color-amber-400: #EF9F27;   /* PRIMARY ACCENT — text, icons, glows */
  --color-amber-600: #BA7517;   /* Buttons, active nav, badges */
  --color-amber-800: #854F0B;   /* Pressed states, deep shadows */

  /* ---------- Surfaces ---------- */
  --bg-base:      #0E0E0C;      /* Page background */
  --bg-card:      #181713;      /* Cards, panels, sidebar */
  --bg-elevated:  #222018;      /* Dropdowns, modals, tooltips */
  --bg-input:     #2A2820;      /* Form fields */

  /* Legacy / used in code */
  --tactical-black: #0E0E0C;
  --gunmetal: #181713;

  /* ---------- Text ---------- */
  --text-primary: #D9CEB8;      /* Body, headings (warm off-white) */
  --text-muted:   #8A8070;      /* Labels, captions, placeholders */
  --text-accent:  #EF9F27;      /* Highlighted values, links */
  --text-on-primary: #FFFFFF;   /* White on copper button */

  /* ---------- Semantic ---------- */
  --accent:          var(--color-amber-400);
  --primary:         var(--color-amber-600);
  --primary-hover:   var(--color-amber-800);

  --border-subtle:   rgba(239, 159, 39, 0.15);
  --border-hairline: rgba(255, 255, 255, 0.05);
  --border-focus:    var(--color-amber-400);

  --danger:    #E53E3E;
  --danger-soft: rgba(229, 62, 62, 0.15);
  --success:   #38A169;
  --success-soft: rgba(56, 161, 105, 0.15);
  /* legacy tactical green used in app for some success badges */
  --tactical-green: #5A7A3A;

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;     /* buttons, inputs */
  --radius-lg: 12px;    /* cards */
  --radius-xl: 16px;    /* glass-cards */
  --radius-pill: 999px;

  /* ---------- Spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- Elevation (used sparingly per spec — borders do the work) ---------- */
  --shadow-glow-amber: 0 0 15px rgba(239, 159, 39, 0.4);
  --shadow-soft:       0 4px 12px rgba(239, 159, 39, 0.3);
  --shadow-card:       0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 12px 48px rgba(0, 0, 0, 0.5);

  /* ---------- Ambient page glow (used on body bg) ---------- */
  --ambient-glow:
    radial-gradient(circle at 15% 50%, rgba(239, 159, 39, 0.06), transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(186, 117, 23, 0.04), transparent 30%); /* @kind other */

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 300ms; /* @kind other */

  /* ---------- Semantic type tokens ---------- */
  --type-h1-size: 28px;   --type-h1-weight: 700;
  --type-h2-size: 18px;   --type-h2-weight: 600;
  --type-body-size: 14px; --type-body-weight: 400;
  --type-label-size: 12px;--type-label-weight: 500;
  --type-data-size: 16px; --type-data-weight: 600;
  --type-badge-size: 11px;--type-badge-weight: 700;
}

/* =============================================================================
   Daylight (light) mode — proper variable swap (not a filter)
   ============================================================================= */
.daylight-mode {
  --bg-base:     #faf7f0;
  --bg-card:     #f0ebe0;
  --bg-elevated: #ede5d3;
  --bg-input:    #ffffff;
  --text-primary: #1a1a1a;
  --text-muted:   #5a4a30;
  --text-accent:  #854F0B;
  --text-on-primary: #ffffff;
  --primary:      #5A7A3A;  /* tactical green used for primary CTAs in daylight */
  --primary-hover:#854F0B;
  --border-subtle: rgba(0, 0, 0, 0.12);
  --border-hairline: rgba(0, 0, 0, 0.08);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  --ambient-glow: none;
}

/* =============================================================================
   Base element styles
   ============================================================================= */
html, body {
  background: var(--bg-base);
  background-image: var(--ambient-glow);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { color: #fff; letter-spacing: -0.01em; }
.daylight-mode h1, .daylight-mode h2, .daylight-mode h3,
.daylight-mode h4, .daylight-mode h5, .daylight-mode h6 { color: var(--text-primary); }

strong { color: #fff; font-weight: 600; }

/* =============================================================================
   Typography utilities (semantic)
   ============================================================================= */
.h1, h1.h1 { font: 700 var(--type-h1-size)/1.15 var(--font-sans); letter-spacing: -0.02em; }
.h2, h2.h2 { font: 600 var(--type-h2-size)/1.25 var(--font-sans); }
.body      { font: 400 var(--type-body-size)/1.5 var(--font-sans); color: var(--text-primary); }
.label, .micro-label {
  font: 500 var(--type-label-size)/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.data, .mono-data {
  font: 600 var(--type-data-size)/1.2 var(--font-mono);
  letter-spacing: 0.04em;
  color: #fff;
}
.badge-text {
  font: 700 var(--type-badge-size)/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =============================================================================
   Component primitives (paste & use)
   ============================================================================= */

/* Cards */
.bt-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.bt-card--glass {
  background: rgba(24, 23, 19, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) ease;
}
.bt-card--interactive:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Buttons */
.bt-btn-primary {
  background: var(--accent);
  color: var(--bg-base);
  font: 600 var(--type-body-size)/1 var(--font-sans);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.bt-btn-primary:hover { background: #d4891a; box-shadow: 0 8px 20px rgba(239, 159, 39, 0.4); }
.bt-btn-primary:active { background: var(--primary-hover); }
.bt-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.bt-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font: 500 var(--type-body-size)/1 var(--font-sans);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background var(--duration-base), border-color var(--duration-base);
}
.bt-btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }

.bt-btn-ghost {
  background: transparent;
  color: var(--text-accent);
  font: 500 var(--type-body-size)/1 var(--font-sans);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
}
.bt-btn-ghost:hover { background: rgba(239, 159, 39, 0.10); }

/* Inputs */
.bt-input {
  width: 100%;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font: 400 var(--type-body-size)/1.4 var(--font-sans);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.bt-input::placeholder { color: var(--text-muted); }
.bt-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(239, 159, 39, 0.35);
}

/* Badges / chips */
.bt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(239, 159, 39, 0.15);
  color: var(--text-accent);
  font: 700 var(--type-badge-size)/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.bt-badge--success { background: rgba(56, 161, 105, 0.15); color: var(--success); }
.bt-badge--danger  { background: rgba(229, 62, 62, 0.15); color: var(--danger); }
.bt-badge--neutral { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }

/* Dashed divider — repeats across the app */
.bt-divider-dashed { border-top: 1px dashed rgba(255, 255, 255, 0.20); }

/* Tabs (pill row) */
.bt-tabs {
  display: inline-flex; gap: 4px;
  padding: 6px;
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px);
}
.bt-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.bt-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.bt-tab[aria-selected="true"], .bt-tab.is-active {
  background: var(--accent);
  color: var(--bg-base);
  box-shadow: var(--shadow-glow-amber);
}