/**
 * KickersCup - Central CSS Variables
 *
 * This file contains all shared CSS Custom Properties with --kc- prefix.
 * Import this BEFORE all other CSS files in the layout.
 *
 * @version 1.0.0
 */

:root {
    /* ==========================================================================
       COLORS - Primary Palette
       ========================================================================== */

    /* Turquoise (Brand Color) */
    --kc-turquoise: #00c78b;
    --kc-turquoise-light: #4ade80;
    --kc-turquoise-bright: #00e6a0;
    --kc-turquoise-dark: #059669;
    --kc-turquoise-glow: rgba(0, 199, 139, 0.3);
    --kc-turquoise-shadow: rgba(0, 199, 139, 0.25);

    /* Status Colors */
    --kc-success: #10b981;
    --kc-warning: #f59e0b;
    --kc-danger: #ef4444;
    --kc-info: #3b82f6;

    /* ==========================================================================
       BACKGROUNDS
       ========================================================================== */

    --kc-bg-primary: #0d0d0d;
    --kc-bg-secondary: #1a1a1a;

    /* Card Backgrounds */
    --kc-card-bg: rgba(13, 13, 13, 0.85);
    --kc-card-bg-hover: rgba(255, 255, 255, 0.03);

    /* ==========================================================================
       BORDERS
       ========================================================================== */

    --kc-card-border: rgba(0, 199, 139, 0.2);
    --kc-card-border-subtle: rgba(255, 255, 255, 0.04);
    --kc-card-border-highlight: rgba(0, 199, 139, 0.4);

    /* ==========================================================================
       TEXT COLORS
       ========================================================================== */

    --kc-text-primary: #ffffff;
    --kc-text-secondary: #b8b8b8;
    --kc-text-muted: #71717a;
    --kc-text-hint: #8c8c8c;
    /* WCAG 2.1 AA compliant muted text */
    --kc-text-muted-accessible: #999999;

    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */

    --kc-font-title: 'Rajdhani', sans-serif;
    --kc-font-body: 'Poppins', sans-serif;

    /* Font Sizes */
    --kc-fs-title: 1.75rem;
    --kc-fs-card-title: 0.8rem;
    --kc-fs-body: 0.875rem;
    --kc-fs-small: 0.75rem;
    --kc-fs-xs: 0.6875rem;

    /* ==========================================================================
       SPACING
       ========================================================================== */

    --kc-spacing-xs: 0.25rem;
    --kc-spacing-sm: 0.5rem;
    --kc-spacing-md: 1rem;
    --kc-spacing-lg: 1.5rem;
    --kc-spacing-xl: 2rem;

    /* ==========================================================================
       BORDER RADIUS
       ========================================================================== */

    --kc-radius-sm: 0.5rem;
    --kc-radius-md: 0.75rem;
    --kc-radius-lg: 1rem;
    --kc-radius-xl: 16px;
    --kc-radius-full: 50%;

    /* Card-specific (alias) */
    --kc-card-radius: 16px;

    /* ==========================================================================
       SHADOWS
       ========================================================================== */

    --kc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --kc-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
    --kc-shadow-lg: 0 8px 32px rgba(0, 199, 139, 0.15);
    --kc-shadow-glow: 0 0 20px var(--kc-turquoise-glow);

    /* ==========================================================================
       TRANSITIONS
       ========================================================================== */

    --kc-transition-fast: 150ms;
    --kc-transition-normal: 200ms;
    --kc-transition-slow: 300ms;

    /* ==========================================================================
       POSITION AREA COLORS (for Team/Lineup views)
       ========================================================================== */

    --kc-area-tw: #ffd700;
    --kc-area-tw-dark: #b8860b;
    --kc-area-def: #3b82f6;
    --kc-area-def-dark: #1d4ed8;
    --kc-area-mid: #22c55e;
    --kc-area-mid-dark: #16a34a;
    --kc-area-atk: #ef4444;
    --kc-area-atk-dark: #dc2626;
}