/* ═══════════════════════════════════════════════════════════
   Ryft Workout — Design Tokens
   All colors, typography, spacing, and animation values
   are defined here as CSS custom properties.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Color Palette ───────────────────────────────── */
  --color-bg-primary:        #0b1118;
  --color-bg-secondary:      #111820;
  --color-bg-card:           #161e28;
  --color-bg-card-hover:     #1a2332;
  --color-bg-elevated:       #19212b;
  --color-bg-glass:          rgba(22, 30, 40, 0.65);
  --color-bg-glass-border:   rgba(255, 255, 255, 0.06);

  --color-accent:            #33aae2;
  --color-accent-light:      #18b8de;
  --color-accent-dark:       #247ec1;
  --color-accent-glow:       rgba(51, 170, 226, 0.25);
  --color-accent-gradient:   linear-gradient(135deg, #247ec1, #18b8de);
  --color-accent-gradient-h: linear-gradient(180deg, #18b8de 3%, #247ec1 97%);

  --color-text-primary:      #ffffff;
  --color-text-secondary:    #cad3de;
  --color-text-muted:        #91a5b2;
  --color-text-dim:          rgba(255, 255, 255, 0.40);

  --color-border:            rgba(255, 255, 255, 0.07);
  --color-border-hover:      rgba(255, 255, 255, 0.15);

  --color-success:           #2dd4bf;
  --color-warning:           #fbbf24;
  --color-error:             #f87171;

  /* ── Typography ──────────────────────────────────── */
  --font-primary:            'Inter', -apple-system, BlinkMacSystemFont,
                             'Segoe UI', Roboto, sans-serif;
  --font-display:            'Inter', var(--font-primary);

  --fs-hero:                 clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1:                   clamp(2rem, 4vw, 3.25rem);
  --fs-h2:                   clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3:                   clamp(1.15rem, 2vw, 1.5rem);
  --fs-body:                 1rem;
  --fs-body-lg:              1.125rem;
  --fs-small:                0.875rem;
  --fs-xs:                   0.75rem;

  --fw-regular:              400;
  --fw-medium:               500;
  --fw-semibold:             600;
  --fw-bold:                 700;
  --fw-extrabold:            800;

  --lh-tight:                1.2;
  --lh-body:                 1.65;
  --lh-relaxed:              1.8;

  --ls-tight:                -0.02em;
  --ls-normal:               0;
  --ls-wide:                 0.04em;
  --ls-wider:                0.08em;

  /* ── Spacing Scale ──────────────────────────────── */
  --space-xs:                0.25rem;   /*  4px */
  --space-sm:                0.5rem;    /*  8px */
  --space-md:                1rem;      /* 16px */
  --space-lg:                1.5rem;    /* 24px */
  --space-xl:                2rem;      /* 32px */
  --space-2xl:               3rem;      /* 48px */
  --space-3xl:               4rem;      /* 64px */
  --space-4xl:               6rem;      /* 96px */
  --space-5xl:               8rem;      /* 128px */

  /* ── Layout ─────────────────────────────────────── */
  --container-max:           1200px;
  --container-padding:       clamp(1rem, 4vw, 2rem);
  --section-padding:         clamp(4rem, 10vw, 8rem);

  /* ── Borders & Radius ──────────────────────────── */
  --radius-sm:               0.5rem;
  --radius-md:               0.875rem;
  --radius-lg:               1.25rem;
  --radius-xl:               1.5rem;
  --radius-2xl:              2rem;
  --radius-full:             9999px;

  /* ── Shadows ────────────────────────────────────── */
  --shadow-sm:               0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:               0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:               0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow:             0 0 40px rgba(51, 170, 226, 0.15);
  --shadow-glow-strong:      0 0 60px rgba(51, 170, 226, 0.30);

  /* ── Transitions ───────────────────────────────── */
  --ease-default:            cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:             cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:                cubic-bezier(0, 0, 0.2, 1);

  --duration-fast:           150ms;
  --duration-base:           300ms;
  --duration-slow:           500ms;
  --duration-slower:         800ms;

  /* ── Z-Index Layers ────────────────────────────── */
  --z-base:                  1;
  --z-dropdown:              100;
  --z-sticky:                200;
  --z-overlay:               300;
  --z-modal:                 400;
  --z-toast:                 500;
}