/* ============================================================
   IT'S BROKEN AI — SHOP
   Matches itsbroken.ai brand: amber, warm dark, monospace chrome
   ============================================================ */

@font-face {
  font-family: 'Glitch Pixelated';
  src: url('assets/fonts/glitch-regular-webfont.woff2') format('woff2'),
       url('assets/fonts/glitch-regular-webfont.woff')  format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}

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

:root {
  /* Brand palette — from itsbroken.ai */
  --amber:       #D4A84B;
  --amber-dim:   #8a6e30;
  --amber-glow:  rgba(212, 168, 75, 0.15);
  --deep-amber:  #C65D07;

  /* Surfaces */
  --bg:      #0a0a0a;
  --bg-2:    #111111;
  --bg-3:    #1a1a1a;
  --surface: #151515;

  /* Text */
  --text:       #e0d5c0;
  --text-2:     #b8a88a;
  --text-muted: #6b5e4a;

  /* Borders */
  --border: #2a2218;

  /* Code */
  --code-bg: #151510;

  /* Error */
  --error: #ff6b35;

  /* Typography */
  --font-display: 'Glitch Pixelated', 'VT323', monospace;
  --font-heading: 'Space Grotesk', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* Type scale */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: var(--amber);
  color: var(--bg);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--amber-dim); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }