:root {
  /* Brand palette — court / ball / cream / ink */
  --color-court-deep:        #1A2A6B;
  --color-court-deep-dark:   #0F1A4A;
  --color-court-deep-soft:   #243480;
  --color-ball-yellow:       #D8F26B;
  --color-ball-yellow-soft:  #E4F58B;
  --color-ball-yellow-dark:  #B8D24A;
  --color-cream:             #F1ECDB;
  --color-cream-soft:        #F7F3E6;
  --color-cream-dark:        #E5DFC9;
  --color-ink:               #0B1330;
  --color-ink-soft:          #2A335B;

  /* Semantic surfaces (mapping for legacy variable names used in scaffold) */
  --color-bg:                var(--color-court-deep-dark);
  --color-surface:           #112D5E;
  --color-surface-elevated:  #1A3D7A;
  --color-surface-muted:     #0A1F4A;

  /* Dashboard surfaces (for client/trainer panels — Etap 6) */
  --color-dash-base:         #0A1F4A;
  --color-dash-raised:       #112D5E;
  --color-dash-overlay:      #1A3D7A;

  /* Primary action — żółty ball */
  --color-primary:           var(--color-ball-yellow);
  --color-primary-hover:     var(--color-ball-yellow-soft);
  --color-primary-muted:     rgba(216, 242, 107, 0.15);
  --color-on-primary:        var(--color-ink);

  /* Secondary — granat */
  --color-secondary:         var(--color-court-deep);
  --color-secondary-hover:   var(--color-court-deep-soft);

  /* Text */
  --color-text-heading:      var(--color-cream);
  --color-text-body:         rgba(241, 236, 219, 0.85);
  --color-text-muted:        rgba(241, 236, 219, 0.65);
  --color-text-dim:          rgba(241, 236, 219, 0.4);
  --color-text-on-cream:     var(--color-ink);
  --color-text-on-cream-muted: rgba(11, 19, 48, 0.7);

  /* Borders */
  --color-border:            rgba(241, 236, 219, 0.10);
  --color-border-strong:     rgba(241, 236, 219, 0.25);
  --color-border-on-cream:   rgba(11, 19, 48, 0.10);

  /* Status */
  --color-success:           #22C55E;
  --color-success-muted:     rgba(34, 197, 94, 0.15);
  --color-error:             #EF4444;
  --color-error-muted:       rgba(239, 68, 68, 0.15);
  --color-warning:           #F59E0B;
  --color-warning-muted:     rgba(245, 158, 11, 0.15);
  --color-info:              #6BA3FF;
  --color-info-muted:        rgba(107, 163, 255, 0.15);

  /* Accents (events / labels) */
  --color-accent-event:      #38D5FF;

  /* Typography */
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body:    'Nunito', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;
  --text-8xl:   6rem;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;
  --tracking-mega:    0.25em;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-2-5: 0.625rem;
  --space-3:   0.75rem;
  --space-3-5: 0.875rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-28:  7rem;
  --space-32:  8rem;
  --space-44:  11rem;

  /* Radii */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-3xl:  2.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-glow-yellow: 0 0 16px rgba(216, 242, 107, 0.35);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max:     80rem;       /* 1280px = max-w-7xl */
  --container-padding: var(--space-4);
  --nav-height:        96px;        /* logo row 52 + links row 44 */

  /* Z-index scale */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-8);
  }
}

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