/* ==============================================
   SOIKEOPRO - DESIGN SYSTEM V1.0
   Foundation for consistent UI/UX across all pages
   ============================================== */

:root {
    /* ========================================
       BRAND COLORS
       ======================================== */
    --color-brand-primary: #34d399;      /* Emerald 400 - Main brand */
    --color-brand-hover: #10b981;        /* Emerald 500 - Hover state */
    --color-brand-light: #6ee7b7;        /* Emerald 300 - Light accent */
    --color-brand-dark: #059669;         /* Emerald 600 - Dark accent */

    /* ========================================
       SEMANTIC COLORS
       ======================================== */
    /* Success */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-success-dark: #065f46;

    /* Warning */
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-warning-dark: #92400e;

    /* Error */
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-error-dark: #991b1b;

    /* Info */
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    --color-info-dark: #1e40af;

    /* ========================================
       NEUTRAL COLORS (Light Mode)
       ======================================== */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;       /* Slate 50 */
    --color-bg-tertiary: #f1f5f9;        /* Slate 100 */

    --color-text-primary: #0f172a;       /* Slate 900 */
    --color-text-secondary: #475569;     /* Slate 600 */
    --color-text-tertiary: #94a3b8;      /* Slate 400 */

    --color-border-primary: #e2e8f0;     /* Slate 200 */
    --color-border-secondary: #cbd5e1;   /* Slate 300 */

    /* ========================================
       MATCH STATUS COLORS
       ======================================== */
    --color-live: #ef4444;               /* Red 500 - LIVE */
    --color-live-bg: #fef2f2;            /* Red 50 */

    --color-not-started: #64748b;        /* Slate 500 - NS */
    --color-finished: #22c55e;           /* Green 500 - FT */
    --color-halftime: #f59e0b;           /* Amber 500 - HT */

    /* ========================================
       SPACING SCALE
       ======================================== */
    --space-2xs: 0.125rem;  /* 2px */
    --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 */

    /* ========================================
       SEMANTIC SPACING (For consistent UX)
       ======================================== */
    /* Section spacing - khoảng cách giữa các section lớn */
    --section-spacing: 0.75rem;             /* 12px - Spacing compact giữa các khối ⭐ */
    
    /* Card spacing - khoảng cách bên trong card */
    --card-padding: var(--space-md);         /* 16px on mobile */
    --card-padding-lg: 1.25rem;              /* 20px on desktop - cân đối hơn ⭐ */
    
    /* Gap spacing - đồng nhất với section spacing */
    --gap-main: 0.75rem;                     /* 12px - Đồng nhất với space-y-3 ⭐ */

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    /* Font Families */
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-full: 9999px;  /* Fully rounded */

    /* ========================================
       SHADOWS
       ======================================== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========================================
   DARK MODE COLORS
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background */
        --color-bg-primary: #0f172a;        /* Slate 900 */
        --color-bg-secondary: #1e293b;      /* Slate 800 */
        --color-bg-tertiary: #334155;       /* Slate 700 */

        /* Text */
        --color-text-primary: #f8fafc;      /* Slate 50 */
        --color-text-secondary: #cbd5e1;    /* Slate 300 */
        --color-text-tertiary: #64748b;     /* Slate 500 */

        /* Border */
        --color-border-primary: #334155;    /* Slate 700 */
        --color-border-secondary: #475569;  /* Slate 600 */

        /* Status backgrounds (darker in dark mode) */
        --color-live-bg: #450a0a;           /* Red 950 */
    }
}

/* Dark mode class override (for manual toggle) */
.dark {
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;

    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #64748b;

    --color-border-primary: #334155;
    --color-border-secondary: #475569;

    --color-live-bg: #450a0a;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Brand Colors */
.text-brand { color: var(--color-brand-primary); }
.bg-brand { background-color: var(--color-brand-primary); }
.border-brand { border-color: var(--color-brand-primary); }

/* Hover States */
.hover-bg-brand {
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.hover-bg-brand:hover { background-color: var(--color-brand-hover); }

.hover-text-brand {
    transition: color var(--transition-fast), opacity var(--transition-fast);
}
.hover-text-brand:hover { color: var(--color-brand-hover); }

/* Status Colors */
.status-live { color: var(--color-live); }
.status-ns { color: var(--color-not-started); }
.status-ft { color: var(--color-finished); }
.status-ht { color: var(--color-halftime); }

/* Transitions - FIXED: Specific properties only, NO 'all' */
.transition-fast { 
    transition: background-color var(--transition-fast), 
                color var(--transition-fast), 
                border-color var(--transition-fast),
                opacity var(--transition-fast);
}
.transition-base { 
    transition: background-color var(--transition-base), 
                color var(--transition-base), 
                border-color var(--transition-base),
                opacity var(--transition-base);
}
.transition-slow { 
    transition: background-color var(--transition-slow), 
                color var(--transition-slow), 
                border-color var(--transition-slow),
                opacity var(--transition-slow);
}

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

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

/* Section Spacing - Dùng cho khoảng cách giữa các section/khối lớn */
.section-spacing { 
    margin-bottom: var(--section-spacing); 
}

.section-spacing-y > * + * {
    margin-top: var(--section-spacing);
}

/* Đồng nhất với Tailwind's space-y */
.space-section > * + * {
    margin-top: var(--section-spacing);
}

/* Card Padding - Padding bên trong card */
.card-padding {
    padding: var(--card-padding);
}

@media (min-width: 768px) {
    .card-padding {
        padding: var(--card-padding-lg); /* 20px desktop */
    }
}

/* Element Spacing */
.element-spacing {
    gap: var(--element-spacing);
}

.element-spacing-sm {
    gap: var(--element-spacing-sm);
}