/* ==========================================================================
   Augmify Design Tokens
   Single source of truth for colour, type, space, radius, motion.
   Loaded first; every other stylesheet consumes these custom properties.
   ========================================================================== */

:root {
  /* ---- Surfaces ------------------------------------------------------- */
  --bg-0: #050506;
  --bg-1: #0b0b0e;
  --bg-2: #121217;

  /* ---- Brand ---------------------------------------------------------- */
  --orange-500: #ff6a00;
  --orange-400: #ff8534;
  --orange-600: #e05a00;
  --ember-700: #9a3a00;
  --gold-400: #e8b45a;
  --gold-300: #f2cd8a;

  /* ---- Ink (text) ------------------------------------------------------ */
  --ink-100: #f7f4ef;
  --ink-300: #c9c5bd;
  --ink-500: #8d8a84;

  /* ---- Glass ----------------------------------------------------------- */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-stroke: rgba(255, 255, 255, 0.10);
  --glass-stroke-hot: rgba(255, 106, 0, 0.35);
  --glass-blur: 18px;

  /* ---- Glow ------------------------------------------------------------ */
  --glow-spark: 0 0 60px rgba(255, 106, 0, 0.45), 0 0 160px rgba(255, 106, 0, 0.18);
  --glow-soft: 0 0 40px rgba(255, 106, 0, 0.18);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  --text-hero: clamp(2.5rem, 1rem + 6vw, 5.5rem);
  --text-h2: clamp(1.9rem, 1rem + 3vw, 3.25rem);
  --text-h3: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-eyebrow: 0.8125rem;
  --tracking-eyebrow: 0.18em;

  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.65;

  /* ---- Spacing — 4px scale --------------------------------------------- */
  --sp-1: 0.25rem;   /*   4px */
  --sp-2: 0.5rem;    /*   8px */
  --sp-3: 0.75rem;   /*  12px */
  --sp-4: 1rem;      /*  16px */
  --sp-5: 1.25rem;   /*  20px */
  --sp-6: 1.5rem;    /*  24px */
  --sp-7: 1.75rem;   /*  28px */
  --sp-8: 2rem;      /*  32px */
  --sp-10: 2.5rem;   /*  40px */
  --sp-12: 3rem;     /*  48px */
  --sp-14: 3.5rem;   /*  56px */
  --sp-16: 4rem;     /*  64px */
  --sp-20: 5rem;     /*  80px */
  --sp-24: 6rem;     /*  96px */

  /* ---- Shape ----------------------------------------------------------- */
  --radius-card: 20px;
  --radius-input: 12px;
  --radius-pill: 999px;

  /* ---- Layout ---------------------------------------------------------- */
  --container: 72rem;
  --container-wide: 84rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --nav-height: 4.5rem;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  /* ---- Stacking -------------------------------------------------------- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-skip: 999;

  color-scheme: dark;
}

/* ---- Selection ---------------------------------------------------------- */
::selection {
  background: var(--orange-500);
  color: #0b0602;
  text-shadow: none;
}

/* ---- Dark scrollbar ------------------------------------------------------ */
html {
  scrollbar-color: #2a2a30 var(--bg-0);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-0);
}

::-webkit-scrollbar-thumb {
  background: #2a2a30;
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-0);
}

::-webkit-scrollbar-thumb:hover {
  background: #3d3d45;
}