/* ============================================================
   variables.css
   CrossFit Indefinite — design tokens (single source of truth).
   Premium fitness brand: carbon black + electric blue.
   All other stylesheets reference these custom properties.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     Colour Palette — CrossFit Indefinite
  --------------------------------------------------------- */
  /* Brand accent — Electric Blue */
  --color-primary: #00A8FF;          /* electric blue */
  --color-primary-dark: #0077C2;
  --color-primary-light: #4CC5FF;
  --color-accent: #0A84FF;           /* deep electric blue (gradients) */
  --color-steel: #8A9099;            /* supporting steel grey */

  /* Neutrals — carbon / graphite */
  --color-black: #0D0D0D;            /* carbon black (primary bg) */
  --color-graphite: #17181A;         /* graphite grey (secondary bg) */
  --color-graphite-2: #202226;
  --color-gray-900: #2A2D33;
  --color-gray-700: #4A4E57;
  --color-gray-500: #71767F;
  --color-gray-300: #B8BCC4;         /* light grey (muted text) */
  --color-gray-100: #EDEFF2;
  --color-white: #FFFFFF;

  /* Surfaces */
  --color-bg: var(--color-black);
  --color-bg-alt: var(--color-graphite);
  --color-surface: var(--color-graphite-2);
  --color-border: var(--color-gray-900);

  /* Text */
  --color-text: var(--color-white);
  --color-text-muted: var(--color-gray-300);
  --color-text-inverse: var(--color-black);

  /* Status */
  --color-success: #22C55E;
  --color-warning: #F5B400;
  --color-error: #EF4444;
  --color-info: var(--color-primary);

  /* Gradients — premium blue lighting */
  --gradient-brand: linear-gradient(135deg, #00A8FF 0%, #0A84FF 50%, #0056B3 100%);
  --gradient-blue-glow: radial-gradient(circle at 50% 0%, rgba(0, 168, 255, 0.25), transparent 60%);
  --gradient-surface: linear-gradient(160deg, var(--color-graphite-2), var(--color-graphite));
  --gradient-carbon: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 6px);

  /* ---------------------------------------------------------
     Typography
  --------------------------------------------------------- */
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;   /* athletic condensed */
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Fluid-ready sizes (base 16px) */
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: 1.5rem;     /* 24 */
  --fs-xl: 2rem;       /* 32 */
  --fs-2xl: 2.5rem;    /* 40 */
  --fs-3xl: 3.25rem;   /* 52 */
  --fs-4xl: 4.5rem;    /* 72 */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  --ls-tight: -0.02em;
  --ls-wide: 0.08em;
  --ls-wider: 0.15em;

  /* ---------------------------------------------------------
     Spacing scale (8px base)
  --------------------------------------------------------- */
  --space-2xs: 0.25rem;  /* 4  */
  --space-xs: 0.5rem;    /* 8  */
  --space-sm: 0.75rem;   /* 12 */
  --space-md: 1rem;      /* 16 */
  --space-lg: 1.5rem;    /* 24 */
  --space-xl: 2rem;      /* 32 */
  --space-2xl: 3rem;     /* 48 */
  --space-3xl: 4rem;     /* 64 */
  --space-4xl: 6rem;     /* 96 */
  --space-5xl: 8rem;     /* 128 */

  /* Section rhythm */
  --section-padding-y: var(--space-4xl);
  --container-max: 1280px;
  --container-pad: var(--space-lg);

  /* ---------------------------------------------------------
     Border radius
  --------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------------------------------------------------------
     Shadows & premium blue glow
  --------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 28px rgba(0, 168, 255, 0.55);       /* electric blue glow */
  --shadow-glow-soft: 0 0 18px rgba(0, 168, 255, 0.30);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Glass morphism */
  --glass-bg: rgba(23, 24, 26, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 16px;

  /* ---------------------------------------------------------
     Transitions / motion
  --------------------------------------------------------- */
  --speed-fast: 150ms;
  --speed-base: 250ms;
  --speed-slow: 400ms;
  --speed-slower: 700ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------------------------------------------------------
     Layout helpers
  --------------------------------------------------------- */
  --header-height: 72px;
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 500;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

/* ------------------------------------------------------------
   Optional light-theme override hook (future scalability)
------------------------------------------------------------ */
:root[data-theme="light"] {
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-gray-100);
  --color-surface: var(--color-white);
  --color-border: var(--color-gray-300);
  --color-text: var(--color-black);
  --color-text-muted: var(--color-gray-700);
  --color-text-inverse: var(--color-white);
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------------
   Extended tokens — floating nav, verified badge, richer glass
------------------------------------------------------------ */
:root {
  /* Performance Blue is the primary accent (see --color-primary above) */
  --color-verified: #22C55E;          /* verified member badge (green) */

  /* Floating glass navigation */
  --nav-bg: rgba(20, 21, 24, 0.55);
  --nav-bg-scrolled: rgba(13, 13, 13, 0.75);
  --nav-blur: 18px;
  --nav-radius: var(--radius-pill);
  --nav-float-top: var(--space-md);

  /* Glass + glow used across premium cards */
  --glass-glow: 0 0 0 1px rgba(0, 168, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 168, 255, 0.10);
  --glass-glow-hover: 0 0 0 1px rgba(0, 168, 255, 0.45), 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 168, 255, 0.25);

  /* Animated brand gradient (buttons, headings, banners) */
  --gradient-animated: linear-gradient(120deg, #0056B3, #00A8FF, #4CC5FF, #0A84FF, #0056B3);

  --icon-stroke: 1.75;
}