/**
 * BES brand tokens + motion & glow tokens used across the upgraded UI.
 * The ONLY place raw hex values live.
 */

:root {
  /* Core brand */
  --bes-gold: #eac117;
  --bes-silver: #dbdbdb;
  --bes-black: #000000;
  --bes-grey: #6d6968;

  /* Derived */
  --bes-gold-600: #c9a311;
  --bes-gold-500: #d9b015;
  --bes-gold-100: #fbf3cc;
  --bes-black-900: #0b0b0b;
  --bes-black-800: #161515;
  --bes-black-700: #1d1b1b;
  --bes-silver-50: #f5f5f5;
  --bes-white: #ffffff;

  /* Surfaces */
  --bes-bg: var(--bes-white);
  --bes-bg-alt: var(--bes-silver-50);
  --bes-surface-dark: var(--bes-black);
  --bes-surface-dark-2: var(--bes-black-800);
  --bes-border: var(--bes-silver);
  --bes-border-strong: var(--bes-grey);

  /* Text */
  --bes-text: var(--bes-black);
  --bes-text-muted: var(--bes-grey);
  --bes-text-on-dark: var(--bes-silver);
  --bes-text-on-gold: var(--bes-black);

  /* Typography */
  --bes-font-head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --bes-font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  --bes-fs-h1: clamp(2.25rem, 6vw, 5rem);
  --bes-fs-h2: clamp(1.75rem, 3.8vw, 3rem);
  --bes-fs-h3: clamp(1.25rem, 2.4vw, 1.75rem);
  --bes-fs-h4: 1.125rem;
  --bes-fs-body: 1rem;
  --bes-fs-small: 0.875rem;
  --bes-fs-eyebrow: 0.8125rem;

  --bes-lh-tight: 1;
  --bes-lh-head: 1.15;
  --bes-lh-body: 1.65;

  /* Spacing */
  --bes-space-1: 4px;
  --bes-space-2: 8px;
  --bes-space-3: 12px;
  --bes-space-4: 16px;
  --bes-space-5: 24px;
  --bes-space-6: 32px;
  --bes-space-7: 48px;
  --bes-space-8: 64px;
  --bes-space-9: 96px;
  --bes-space-10: 128px;

  /* Layout */
  --bes-container: 1200px;
  --bes-container-narrow: 820px;
  --bes-container-wide: 1440px;
  --bes-gutter: 20px;

  /* Radii */
  --bes-radius-0: 0;
  --bes-radius-sm: 2px;
  --bes-radius-md: 4px;

  /* Shadows */
  --bes-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --bes-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --bes-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.18);
  --bes-shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.28);

  /* NEW — gold glow tokens */
  --bes-glow-sm:
    0 0 0 1px rgba(234, 193, 23, 0.35), 0 6px 24px rgba(234, 193, 23, 0.12);
  --bes-glow-md:
    0 0 0 1px rgba(234, 193, 23, 0.45), 0 12px 40px rgba(234, 193, 23, 0.2);
  --bes-glow-lg:
    0 0 0 1px rgba(234, 193, 23, 0.55), 0 24px 72px rgba(234, 193, 23, 0.28);
  --bes-glow-soft: 0 0 60px rgba(234, 193, 23, 0.28);

  /* Motion */
  --bes-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bes-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bes-ease-in: cubic-bezier(0.6, 0.04, 0.98, 0.34);
  --bes-dur-fast: 150ms;
  --bes-dur: 260ms;
  --bes-dur-slow: 520ms;
  --bes-dur-slower: 900ms;

  /* Accent bars */
  --bes-accent-bar: 4px;

  /* Live mouse position — set by JS, used by glow effects */
  --bes-mouse-x: 50%;
  --bes-mouse-y: 50%;

  /* z-index */
  --bes-z-header: 100;
  --bes-z-overlay: 200;
  --bes-z-drawer: 210;
  --bes-z-modal: 300;
  --bes-z-toast: 400;
  --bes-z-cursor: 9999;

  /* Blueprint grid line color */
  --bes-grid-line: rgba(219, 219, 219, 0.07);
  --bes-grid-size: 48px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bes-dur-fast: 0ms;
    --bes-dur: 0ms;
    --bes-dur-slow: 0ms;
    --bes-dur-slower: 0ms;
  }
}