/* ═══════════════════════════════════════════════════════════

       DESIGN TOKENS & RESET
       All visual constants live here. Never use raw hex values
       outside this block — always reference a CSS variable.
    ═══════════════════════════════════════════════════════════ */
:root {
  /* Palette */
  --color-black: #000000;
  --color-gray: #5B5B5B;
  --color-purple: #6F61C0;
  --color-steel: #89929c;
  --color-ice: #91C8E4;
  --color-white: #F2F0EA;

  /* Shadows (neo-brutalism offset style) */
  --shadow-purple: 6px 6px 0 var(--color-purple);
  --shadow-ice: 6px 6px 0 var(--color-ice);
  --shadow-gray: 6px 6px 0 var(--color-gray);

  /* Typography stacks */
  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'Martian Mono', monospace;

  /* Layout */
  --nav-height: 60px;
  --section-pad-x: 3.5rem;
  --section-pad-y: 5.5rem;
  --diag-h: 60px;
  --max-width: 1380px;

  /* Border shorthand */
  --border-dim: 2px solid var(--color-gray);
  --border-purple: 2px solid var(--color-purple);

  /* Sidebar title (desktop only) */
  --sidebar-scale: 0.21;
  --sidebar-left: 14px;
}

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

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
}



::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: var(--color-black);
}

::-webkit-scrollbar-thumb {
  background: var(--color-steel);
}