/* ==========================================================================
   Variables — Design tokens RingCoach
   ========================================================================== */

:root {
  /* Sfondi */
  --bg-base: #080A0F;
  --bg-elevated: #0A0D14;
  --bg-card: #0E1117;
  --bg-card-hover: #131724;

  /* Bordi */
  --border-subtle: #1E2433;
  --border-strong: #2A3245;
  --border-grid: rgba(255, 255, 255, 0.04);

  /* Accenti */
  --accent: #00FF87;
  --accent-dim: rgba(0, 255, 135, 0.6);
  --accent-soft: rgba(0, 255, 135, 0.12);
  --accent-glow: rgba(0, 255, 135, 0.35);
  --accent-secondary: #0099FF;

  /* Difficoltà */
  --easy: #22C55E;
  --medium: #F59E0B;
  --hard: #EF4444;

  /* Testo */
  --text-primary: #E8EDF5;
  --text-secondary: #6B7A99;
  --text-tertiary: #4A5670;
  --text-on-accent: #021A0E;

  /* Tipografia */
  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

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

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --navbar-height: 72px;

  /* Transizioni */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;
  --t-slow: 400ms ease;

  /* Ombre */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-hover: 0 10px 40px rgba(0, 255, 135, 0.08);
  --shadow-glow: 0 0 0 1px var(--accent), 0 0 24px var(--accent-glow);
}