/* =========================================================
   PITCH. / VARIABLES
   Premium Dark Esports Design System
   ========================================================= */

:root {
  /* =======================================================
     COLORS
     ======================================================= */

  /* Background */
  --color-bg: #05070a;
  --color-bg-deep: #030507;
  --color-bg-soft: #070a0e;

  /* Surfaces */
  --color-surface: #090d12;
  --color-surface-2: #0b1016;
  --color-surface-3: #0e141c;
  --color-surface-hover: #111923;

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-soft: rgba(255, 255, 255, 0.055);
  --color-border-medium: rgba(255, 255, 255, 0.115);
  --color-border-strong: rgba(255, 255, 255, 0.17);

  /* Brand */
  --color-primary: #00ff66;
  --color-primary-hover: #20ff7a;
  --color-primary-active: #00e85e;
  --color-primary-soft: rgba(0, 255, 102, 0.085);
  --color-primary-glow: rgba(0, 255, 102, 0.16);

  /* Text */
  --color-text: #f7f9f8;
  --color-text-primary: #f3f6f5;
  --color-text-secondary: #b4bdc5;
  --color-text-muted: #87929d;
  --color-text-disabled: #606a74;

  /* Status */
  --color-success: #00ff66;
  --color-warning: #ffb020;
  --color-danger: #ff4655;
  --color-info: #4da3ff;

  /* Status backgrounds */
  --color-success-soft: rgba(0, 255, 102, 0.1);
  --color-warning-soft: rgba(255, 176, 32, 0.1);
  --color-danger-soft: rgba(255, 70, 85, 0.1);
  --color-info-soft: rgba(77, 163, 255, 0.1);

  /* =======================================================
     TYPOGRAPHY
     ======================================================= */

  --font-sans:
    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Font sizes */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-md: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 4rem; /* 64px */

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* =======================================================
     SPACING
     ======================================================= */

  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* =======================================================
     LAYOUT
     ======================================================= */

  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  --content-width: 1440px;

  --header-height: 84px;

  --sidebar-width: 248px;
  --sidebar-collapsed: 72px;

  --page-padding: clamp(1rem, 3vw, 3rem);

  /* =======================================================
     BORDER RADIUS
     ======================================================= */

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;

  --radius-full: 999px;

  /* =======================================================
     SHADOWS
     ======================================================= */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);

  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);

  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.38);

  --shadow-xl: 0 24px 72px rgba(0, 0, 0, 0.45);

  --shadow-primary: 0 0 24px rgba(0, 255, 102, 0.12);

  --shadow-primary-lg: 0 0 48px rgba(0, 255, 102, 0.16);

  /* =======================================================
     EFFECTS
     ======================================================= */

  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  --glass-bg: rgba(9, 12, 18, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);

  --overlay: rgba(0, 0, 0, 0.64);

  /* =======================================================
     TRANSITIONS
     ======================================================= */

  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
  --transition-medium: 240ms ease;
  --transition-slow: 360ms ease;

  --transition:
    color 180ms ease, background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, opacity 180ms ease, transform 180ms ease;

  /* =======================================================
     Z-INDEX
     ======================================================= */

  --z-base: 0;
  --z-content: 10;
  --z-header: 100;
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* =======================================================
     INTERACTION
     ======================================================= */

  --focus-ring: 0 0 0 3px rgba(0, 255, 102, 0.18);

  --focus-border: var(--color-primary);

  --interactive-opacity: 0.72;

  --disabled-opacity: 0.45;

  /* =======================================================
     BREAKPOINTS
     ======================================================= */

  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* =======================================================
     MOTION
     ======================================================= */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* =======================================================
     COMPONENT SIZES
     ======================================================= */

  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 48px;
  --control-height-xl: 56px;

  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* =======================================================
     CONTENT
     ======================================================= */

  --prose-width: 720px;
  --reading-width: 760px;

  /* =======================================================
     GRADIENTS
     ======================================================= */

  --gradient-primary: linear-gradient(
    135deg,
    rgba(0, 255, 102, 0.16),
    rgba(0, 255, 102, 0)
  );

  --gradient-surface: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.025),
    rgba(255, 255, 255, 0)
  );

  --gradient-dark: linear-gradient(180deg, #090c12 0%, #05070a 100%);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-medium: 0ms;
    --transition-slow: 0ms;
  }
}