/* ADRO brand tokens — JDM tuning / black + red */
:root {
  --bg: #0a0a0b;
  --bg-2: #111114;
  --bg-3: #17171c;
  --panel: #1a1a20;
  --panel-2: #20202a;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --line-strong: rgba(255,255,255,0.22);
  --ink: #f4f4f6;
  --ink-2: #c9c9d1;
  --ink-3: #8a8a95;
  --ink-4: #5c5c66;
  --red: #e0201c;          /* signature ADRO red */
  --red-2: #ff3b32;
  --red-soft: rgba(224,32,28,0.14);
  --red-glow: rgba(255,59,50,0.35);
  --green: #1ed773;
  --amber: #ffb020;
  --blue: #4aa6ff;

  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Anton", "Bebas Neue", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

button { font-family: inherit; }

/* Carbon-fibre / brushed pattern utility — used very sparingly */
.carbon {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}

/* Diagonal red hazard tape (used for borders / accents) */
.hazard {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--red) 0 8px,
    #0a0a0b 8px 16px
  );
}

/* Thin red rule */
.rule-red {
  height: 2px;
  background: var(--red);
  width: 28px;
}

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

/* Mono styling */
.mono { font-family: var(--mono); letter-spacing: 0.01em; }

/* Display headings */
.display { font-family: var(--display); letter-spacing: 0.02em; text-transform: uppercase; }

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Chrome scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); background-clip: content-box; border: 2px solid transparent; }