/* 
 * SportsCal Unified Design System
 * Consistent variables across all pages for pixel-perfect UX
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* === COLOR SYSTEM === */
    /* Primary - Green */
    --primary: hsl(142, 71%, 45%);           /* #10b981 */
    --primary-dark: hsl(142, 71%, 35%);      /* #059669 */
    --primary-light: hsl(142, 71%, 55%);     /* #34d399 */
    --primary-foreground: hsl(0, 0%, 100%);  /* #FFFFFF */
    
    /* Secondary - Black */
    --secondary: hsl(0, 0%, 0%);             /* #000000 */
    --secondary-dark: hsl(0, 0%, 20%);       /* #333333 */
    --secondary-foreground: hsl(0, 0%, 100%); /* #FFFFFF */
    
    /* Neutral Colors */
    --background: hsl(0, 0%, 100%);          /* #FFFFFF */
    --foreground: hsl(0, 0%, 0%);            /* #000000 */
    --muted: hsl(0, 0%, 96%);                /* #f5f5f5 */
    --muted-foreground: hsl(0, 0%, 45%);     /* #737373 */
    
    /* Semantic Colors */
    --success: hsl(142, 71%, 45%);           /* #10b981 */
    --warning: hsl(36, 100%, 50%);           /* #FF9800 */
    --destructive: hsl(4, 90%, 58%);         /* #F44336 */
    
    /* === BORDER SYSTEM === */
    --border-width: 2px;        /* Standard borders */
    --border-width-thick: 3px;  /* Thick borders */
    --border-width-heavy: 4px;  /* Heavy borders */
    --border-color: #000000;    /* Always black */
    
    /* === SHADOW SYSTEM === */
    --shadow-sm: 3px 3px 0px var(--border-color);
    --shadow-md: 4px 4px 0px var(--border-color);
    --shadow-lg: 5px 5px 0px var(--border-color);
    --shadow-xl: 6px 6px 0px var(--border-color);
    --shadow-2xl: 8px 8px 0px var(--border-color);
    
    /* === HOVER EFFECTS === */
    --hover-translate: translate(-2px, -2px);
    --hover-shadow: 6px 6px 0px var(--border-color);
    --active-translate: translate(1px, 1px);
    --active-shadow: 2px 2px 0px var(--border-color);
    
    /* === LOGO SIZES === */
    --logo-size-desktop: 40px;
    --logo-size-tablet: 36px;
    --logo-size-mobile: 32px;
    
    /* === TOUCH TARGETS === */
    --touch-target-min: 44px;     /* Minimum for accessibility */
    --touch-target-comfortable: 52px; /* Comfortable mobile target */
    
    /* === TYPOGRAPHY SCALE === */
    /* Desktop */
    --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 */
    --text-5xl: 3rem;       /* 48px */
    --text-6xl: 3.75rem;    /* 60px */
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Font Families */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Space Grotesk', 'Inter', sans-serif;
    --font-mono: 'Space Mono', 'Courier New', monospace;

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.8;
    
    /* === SPACING SCALE === */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    
    /* === BREAKPOINTS (for reference in media queries) === */
    /* Use these values in @media queries:
       - Mobile: 320px - 479px
       - Mobile Large: 480px - 767px
       - Tablet: 768px - 1023px
       - Desktop: 1024px+
    */
    
    /* === Z-INDEX SCALE === */
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-fixed: 200;
    --z-modal-backdrop: 500;
    --z-modal: 600;
    --z-popover: 700;
    --z-tooltip: 800;
}

/* === GLOBAL RESETS & BASE STYLES === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: var(--leading-relaxed);
    color: var(--foreground);
    background: var(--background);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
}

/* iOS momentum scrolling */
* {
    -webkit-overflow-scrolling: touch;
}

/* === STANDARDIZED LOGO STYLES === */
.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #000;
}

.logo img {
    height: 32px;
    width: auto;
}

.logo-icon {
    width: var(--logo-size-desktop);
    height: var(--logo-size-desktop);
    background: var(--primary);
    border: var(--border-width) solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-foreground);
    font-size: 1.2rem;
    font-weight: var(--font-black);
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

/* === STANDARDIZED NAV === */
.nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav a {
    text-decoration: none;
    color: #000;
    font-weight: 600;
    font-size: 0.9rem;
}

.nav a:hover {
    text-decoration: underline;
}

.btn-get-started {
    background: #00C853;
    color: #000;
    padding: 0.75rem 1.25rem;
    border: 2px solid #000;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 3px 3px 0 #000;
    transition: all 0.15s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.btn-get-started:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #000;
}

/* === STANDARDIZED HEADER === */
.header {
    background: #fff;
    border-bottom: 3px solid #000;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* === STANDARDIZED BUTTONS === */
.btn {
    padding: 0.75rem 1.5rem;
    border: var(--border-width-thick) solid var(--border-color);
    border-radius: 0;
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-shadow: var(--shadow-md);
    font-family: inherit;
    font-size: 1rem;
    min-height: var(--touch-target-min);
}

.btn:hover {
    transform: var(--hover-translate);
    box-shadow: var(--hover-shadow);
}

.btn:active {
    transform: var(--active-translate);
    box-shadow: var(--active-shadow);
}

.btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.btn-secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
}

/* === RESPONSIVE BREAKPOINTS === */

/* Tablet (768px) */
@media (max-width: 1023px) {
    .logo-icon {
        width: var(--logo-size-tablet);
        height: var(--logo-size-tablet);
        font-size: 1.1rem;
    }
    
    .header-content {
        padding: 0 1.5rem;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    body {
        font-size: var(--text-base); /* Ensure minimum 16px on mobile */
    }
    
    .logo {
        font-size: 1.35rem;
        gap: 0.5rem;
    }
    
    .logo-icon {
        width: var(--logo-size-mobile);
        height: var(--logo-size-mobile);
        font-size: 0.95rem;
    }
    
    .header {
        padding: 0.75rem 0;
    }
    
    .header-content {
        padding: 0 1rem;
    }
    
    .btn {
        width: 100%;
        min-height: var(--touch-target-comfortable); /* 52px for comfortable touch */
        padding: 1rem 1.5rem;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .header-content {
        padding: 0 1rem;
    }
    
    .logo {
        font-size: 1.25rem;
    }
    
    .btn {
        font-size: 0.95rem;
        padding: 0.875rem 1.25rem;
    }
}

/* === iOS SAFE AREA SUPPORT === */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .header {
        padding-top: calc(env(safe-area-inset-top) + 1rem);
    }
}

/* === UTILITY CLASSES === */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}

/* Hide on mobile */
.hide-mobile {
    display: block;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block;
    }
}