/* TurnierApp Design System — TSG-Hoffenheim-inspired */

:root {
    /* TSG Blue palette */
    --tsg-blue-900: #0F2347;
    --tsg-blue-800: #1A3870;
    --tsg-blue-700: #1E4285;
    --tsg-blue-600: #2552A8;
    --tsg-blue-400: #5B8FE0;
    --tsg-blue-100: #E8F0FB;
    --tsg-blue-50:  #F0F5FF;

    /* Neutral palette */
    --tsg-white:    #FFFFFF;
    --tsg-gray-50:  #F8FAFC;
    --tsg-gray-100: #F1F5F9;
    --tsg-gray-200: #E2E8F0;
    --tsg-gray-300: #CBD5E1;
    --tsg-gray-500: #64748B;
    --tsg-gray-700: #334155;
    --tsg-gray-900: #0F172A;

    /* Semantic tokens */
    --color-bg:           var(--tsg-gray-50);
    --color-surface:      var(--tsg-white);
    --color-surface-2:    var(--tsg-gray-100);
    --color-border:       var(--tsg-gray-200);
    --color-border-focus: var(--tsg-blue-400);
    --color-text:         var(--tsg-gray-900);
    --color-text-muted:   var(--tsg-gray-500);

    --color-primary:       var(--tsg-blue-800);
    --color-primary-dark:  var(--tsg-blue-900);
    --color-primary-hover: var(--tsg-blue-700);
    --color-primary-light: var(--tsg-blue-100);
    --color-primary-text:  var(--tsg-white);
    --color-link:          var(--tsg-blue-600);

    /* Status */
    --color-live:    #EF4444;
    --color-success: #16A34A;
    --color-warning: #D97706;
    --color-danger:  #DC2626;
    --color-info:    var(--tsg-blue-600);

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

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

    /* Shadows */
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-nav: 0 2px 8px rgba(15, 35, 71, 0.15);

    /* Typography */
    --font-sans: 'Barlow', system-ui, -apple-system, sans-serif;
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --font-size-4xl:  2.25rem;

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

    --line-height-tight:   1.25;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow:   300ms ease;
}