/* 
   KCC Hockey Motion - Design System 
   Based on .cursor/rules/design-prd.mdc
*/

:root {
    /* Color Palette */
    --primary-color: #28642c;
    /* Club Green */
    --primary-light: #367C39;
    /* Hover state */
    --secondary-color: #0D1B2A;
    /* Navy */
    --accent-color: #F5A623;
    /* Gold */
    --bg-color: #F8F9FA;
    /* Light neutral gray */
    --surface-color: #FFFFFF;
    /* White */
    --text-primary: #1A1A2E;
    /* Near-black */
    --text-secondary: #6C757D;
    /* Muted text */
    --status-danger: #DC3545;

    /* Spacing */
    --section-padding-desktop: 64px;
    --section-padding-mobile: 40px;
}

/* Typography Defaults */
body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--secondary-color);
}

.font-data {
    font-family: 'JetBrains Mono', monospace;
}

/* Utility Classes */
.text-primary-custom {
    color: var(--primary-color) !important;
}

.text-secondary-custom {
    color: var(--secondary-color) !important;
}

.text-accent {
    color: var(--accent-color) !important;
}

.bg-primary-custom {
    background-color: var(--primary-color) !important;
}

.bg-surface {
    background-color: var(--surface-color) !important;
}

/* Card Styling */
.card-modern {
    background: var(--surface-color);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Buttons */
.btn-primary-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-primary-custom:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: white;
}

/* Match Landing Specifics */
.event-title {
    color: var(--primary-color);
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    text-shadow: none;
    /* Removed legacy text shadow if any */
}

.pitch-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.pitch-card:hover {
    box-shadow: 0 4px 12px rgba(40, 100, 44, 0.15);
    border-color: var(--primary-color);
}

.age-badge {
    background-color: var(--secondary-color);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}

.group-badge {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

/* Overwrite existing layout helpers if needed */
.section-padding {
    padding-top: var(--section-padding-mobile);
    padding-bottom: var(--section-padding-mobile);
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: var(--section-padding-desktop);
        padding-bottom: var(--section-padding-desktop);
    }
}