/* ===========================================================================
   ENDPOINT · SPACING, RADIUS, SHADOW, BORDER, MOTION, Z, BLUR
   8px base grid. Angular brand → tight, mostly-square radii.
   =========================================================================== */

:root {
  /* --- Spacing scale (8px grid, with 2/4 micro steps) --------------------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */

  /* --- Radii — angular brand keeps corners crisp -------------------------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;     /* default control radius */
  --radius-lg: 10px;    /* cards */
  --radius-xl: 14px;    /* large panels */
  --radius-pill: 999px; /* badges, avatars, tags */

  /* Clip path for the signature angled / cut corner (echoes hex mark) */
  --clip-notch: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); /* @kind other */
  --clip-notch-sm: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); /* @kind other */

  /* --- Borders ------------------------------------------------------------ */
  --border-width: 1px; /* @kind spacing */
  --border-width-thick: 2px; /* @kind spacing */
  --border-accent: 3px;   /* @kind spacing */

  /* --- Elevation / shadows (cool, near-black on dark) --------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.62);

  /* Inner hairline that gives surfaces a crisp top edge on dark */
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Brand glows — esports energy. Use sparingly. */
  --glow-brand: 0 0 0 1px var(--ep-blue-500), 0 0 24px var(--ep-blue-glow);
  --glow-accent: 0 0 0 1px var(--ep-purple-500), 0 0 24px var(--ep-purple-glow);
  --glow-live: 0 0 0 1px var(--ep-red-500), 0 0 20px rgba(240, 58, 82, 0.45);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --dur-instant: 90ms; /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* --- Blur (overlays, glass headers) ------------------------------------- */
  --blur-sm: 6px;
  --blur-md: 14px;
  --blur-lg: 28px;

  /* --- Z-index ------------------------------------------------------------ */
  --z-base: 0; /* @kind other */
  --z-raised: 10; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-header: 200; /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal: 900; /* @kind other */
  --z-toast: 1000; /* @kind other */
  --z-tooltip: 1100; /* @kind other */

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1240px;
  --container-wide: 1440px;
  --header-height: 64px;
  --sidebar-width: 248px;
}