/* ==========================================================================
   Design System — The Club Schedule
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* ---- Brand Colors ---- */
    --color-primary:        #130065;
    --color-primary-700:    #1a0080;
    --color-primary-600:    #1e0a8a;
    --color-primary-500:    #2e1a9e;
    --color-primary-400:    #5040b0;
    --color-primary-300:    #8070c8;
    --color-primary-200:    #b8b0e0;
    --color-primary-100:    #e8e0ff;
    --color-primary-50:     #f5f2ff;

    /* ---- Secondary & Accent ---- */
    --color-secondary:      #004165;
    --color-secondary-100:  #e0f0fa;
    --color-accent:         #6c3fa0;
    --color-accent-100:     #f0e8f8;

    /* ---- Semantic Colors ---- */
    --color-success:        #1a7a3a;
    --color-success-light:  #d4edda;
    --color-success-border: #c3e6cb;
    --color-success-text:   #155724;

    --color-warning:        #b8860b;
    --color-warning-light:  #fff3cd;
    --color-warning-border: #ffeeba;
    --color-warning-text:   #856404;

    --color-danger:         #b81c2e;
    --color-danger-light:   #f8d7da;
    --color-danger-border:  #f5c6cb;
    --color-danger-text:    #721c24;

    --color-info:           #004165;
    --color-info-light:     #d1ecf1;
    --color-info-border:    #bee5eb;
    --color-info-text:      #0c5460;

    /* ---- Text ---- */
    --color-text:           #1a1a2e;
    --color-text-secondary: #4a5568;
    --color-text-muted:     #6c757d;
    --color-text-light:     #adb5bd;

    /* ---- Backgrounds & Borders ---- */
    --color-bg:             #f4f5f7;
    --color-bg-white:       #ffffff;
    --color-bg-hover:       #f8f9fa;
    --color-border:         #e9ecef;
    --color-border-dark:    #dee2e6;

    /* ---- Spacing Scale (4px base) ---- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---- Typography ---- */
    --font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    --text-xs:   12px;
    --text-sm:   14px;
    --text-base: 16px;
    --text-lg:   18px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  28px;

    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;

    --leading-tight:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* ---- Border Radius ---- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:  12px;
    --radius-full: 9999px;

    /* ---- Shadows ---- */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-xl:  0 8px 24px rgba(0, 0, 0, 0.18);

    /* ---- Z-Index Layers ---- */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   500;
    --z-sidebar:   999;
    --z-header:   1000;
    --z-modal:    1100;
    --z-toast:    1200;

    /* ---- Transitions ---- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}