/* ============================ THEME ============================ */
/* Brand colors, fonts, spacing variables + global reset.          */
/* This is the only file that should define design tokens.         */

:root {
  /* --- Core surfaces --- */
  --charcoal: #0E0E12;          /* page background */
  --charcoal-2: #16161D;        /* panels / cards */
  --charcoal-3: #1D1D27;        /* raised panels */

  /* --- Purple accents (from the logo) --- */
  --purple: #7B2CBF;            /* primary accent */
  --purple-bright: #9D4EDD;     /* hover / glow */
  --purple-glow: #B362F0;       /* highlights */
  --purple-deep: #5A189A;

  /* --- Silver / metallic --- */
  --silver-1: #E8EAED;
  --silver-2: #A9AEB6;
  --silver-3: #7E848C;
  --silver-grad: linear-gradient(135deg, #E8EAED 0%, #A9AEB6 45%, #7E848C 100%);

  /* --- Text --- */
  --text: #ECECF2;             /* body text */
  --text-muted: #9A9AA6;       /* secondary */
  --text-dim: #6B6B78;

  /* --- Functional --- */
  --border: rgba(232, 234, 237, 0.10);
  --border-strong: rgba(232, 234, 237, 0.18);
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.06);

  /* --- Gradients & glows --- */
  --purple-gradient: linear-gradient(135deg, #9D4EDD 0%, #7B2CBF 60%, #5A189A 100%);
  --glow-purple: 0 0 40px rgba(157, 78, 221, 0.35);
  --glow-purple-soft: 0 0 60px rgba(123, 44, 191, 0.22);

  /* --- Typography --- */
  --font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  /* --- Spacing scale --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --section-pad: clamp(4rem, 9vw, 8.5rem);

  /* --- Layout --- */
  --max-width: 1200px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --speed: 0.5s;

  /* --- Navbar --- */
  --nav-h: 78px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--charcoal);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

:focus-visible {
  outline: 2px solid var(--purple-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(157, 78, 221, 0.35); color: #fff; }