/* ═══════════════════════════════════════════════════════════════════════
   SK8 FREAK — v2 design tokens
   Tech-brutalist × skate-video
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  /* palette */
  --bg:           #0A0A0A;
  --bg-1:         #0F0F0F;
  --bg-2:         #141414;
  --bg-3:         #1A1A1A;
  --line:         rgba(255,255,255,0.08);
  --line-2:       rgba(255,255,255,0.14);
  --ink:          #F2F2F0;
  --ink-dim:      #B8B8B3;
  --mute:         #6A6A66;
  --mute-2:       #3A3A37;

  --o:            #FF5A1F;       /* orange */
  --o-hi:         #FF7A3D;
  --o-lo:         #C43A0A;
  --o-wash:       rgba(255, 90, 31, 0.12);
  --o-line:       rgba(255, 90, 31, 0.3);

  --verify:       #B8FF3C;       /* sensor-verified lime */
  --live:         #FF2E63;       /* live/recording hot pink */

  /* type */
  --f-display:    'Permanent Marker', cursive;
  --f-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-body:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* motion */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}

/* grain overlay */
.grain::after {
  content: ''; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}

/* mono HUD helpers */
.mono      { font-family: var(--f-mono); letter-spacing: 0.02em; }
.mono-mi   { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.mono-sm   { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.mono-md   { font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; }
.hand      { font-family: var(--f-display); }

/* crosshair corner marks (HUD) */
.corners { position: relative; }
.corners::before,
.corners::after {
  content: ''; position: absolute; width: 10px; height: 10px;
  border-color: var(--o); border-style: solid;
  pointer-events: none;
}
.corners::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.corners::after  { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* selection */
::selection { background: var(--o); color: #000; }

/* scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--mute-2); }
::-webkit-scrollbar-thumb:hover { background: var(--mute); }