/* Predator Helmets — Warehouse design tokens */

:root {
  /* Brand */
  --brand: #C8102E;          /* Predator red, taken from logo */
  --brand-soft: #E03447;
  --brand-deep: #8E0A1F;
  --brand-12: rgba(200, 16, 46, 0.12);
  --brand-20: rgba(200, 16, 46, 0.20);

  /* Neutrals — cool, near-black */
  --bg-0: #0A0B0E;           /* page */
  --bg-1: #111319;           /* surface */
  --bg-2: #161922;           /* raised */
  --bg-3: #1D2130;           /* hover */
  --bg-4: #262B3D;           /* selected */

  --line-1: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.10);
  --line-3: rgba(255,255,255,0.16);

  --text-1: #F4F5F7;         /* primary */
  --text-2: #B7BBC7;         /* secondary */
  --text-3: #7A8094;         /* muted */
  --text-4: #4F5466;         /* dim */

  /* Status */
  --ok: #2DD27A;
  --ok-12: rgba(45, 210, 122, 0.14);
  --warn: #F2B441;
  --warn-12: rgba(242, 180, 65, 0.14);
  --danger: #FF5C5C;
  --danger-12: rgba(255, 92, 92, 0.14);
  --info: #5B9DFF;
  --info-12: rgba(91, 157, 255, 0.14);

  /* Categories — for groups (Helmets / Visors / Details) */
  --cat-helmets: #5B9DFF;
  --cat-visors:  #2DD27A;
  --cat-details: #F2B441;
  --cat-helmets-12: rgba(91,157,255,0.14);
  --cat-visors-12:  rgba(45,210,122,0.14);
  --cat-details-12: rgba(242,180,65,0.14);

  /* Type */
  --font-sans: 'Inter Tight', 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Radii */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.6);
  --shadow-pop: 0 18px 50px rgba(0,0,0,0.7), 0 2px 0 rgba(255,255,255,0.05) inset;
}

[data-theme="light"] {
  --bg-0: #F4F5F7;
  --bg-1: #FFFFFF;
  --bg-2: #F9FAFB;
  --bg-3: #EEF0F4;
  --bg-4: #E2E5EC;

  --line-1: rgba(10,12,18,0.07);
  --line-2: rgba(10,12,18,0.12);
  --line-3: rgba(10,12,18,0.20);

  --text-1: #0E1117;
  --text-2: #41475A;
  --text-3: #6B7388;
  --text-4: #9098AC;

  --brand-12: rgba(200, 16, 46, 0.10);
  --brand-20: rgba(200, 16, 46, 0.16);

  --shadow-1: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(10,12,18,0.06);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 20px rgba(10,12,18,0.08);
  --shadow-pop: 0 18px 50px rgba(10,12,18,0.18), 0 1px 0 rgba(255,255,255,0.6) inset;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; font-feature-settings: inherit; }
input, textarea, select { font-family: inherit; }

::selection { background: var(--brand-20); color: var(--text-1); }

/* Scrollbars */
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 999px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* No tap highlight */
button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Tabular numerals everywhere */
.tnum { font-variant-numeric: tabular-nums; }

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }