/**
 * Play Golf Pro - Design Tokens
 * Version: 1.0.0
 * 
 * Mobile-first design system with consistent spacing, colors, and typography.
 * Base design: 360px mobile → scales up to 1280px+ desktop
 */

/* ========================================
   CSS Custom Properties (Design Tokens)
   ======================================== */
:root {
    /* ----------------------------------------
       Colors - Primary Palette
       ---------------------------------------- */
    --gsp-color-primary-50: #ecfdf5;
    --gsp-color-primary-100: #d1fae5;
    --gsp-color-primary-200: #a7f3d0;
    --gsp-color-primary-300: #6ee7b7;
    --gsp-color-primary-400: #34d399;
    --gsp-color-primary-500: #10b981;
    --gsp-color-primary-600: #059669;
    --gsp-color-primary-700: #047857;
    --gsp-color-primary-800: #065f46;
    --gsp-color-primary-900: #064e3b;

    /* Colors - Neutral Palette */
    --gsp-color-gray-50: #f9fafb;
    --gsp-color-gray-100: #f3f4f6;
    --gsp-color-gray-200: #e5e7eb;
    --gsp-color-gray-300: #d1d5db;
    --gsp-color-gray-400: #9ca3af;
    --gsp-color-gray-500: #6b7280;
    --gsp-color-gray-600: #4b5563;
    --gsp-color-gray-700: #374151;
    --gsp-color-gray-800: #1f2937;
    --gsp-color-gray-900: #111827;

    /* Colors - Semantic */
    --gsp-color-success: #059669;
    --gsp-color-success-light: #ecfdf5;
    --gsp-color-success-dark: #047857;
    
    --gsp-color-warning: #d97706;
    --gsp-color-warning-light: #fffbeb;
    --gsp-color-warning-dark: #b45309;
    
    --gsp-color-error: #dc2626;
    --gsp-color-error-light: #fef2f2;
    --gsp-color-error-dark: #b91c1c;
    
    --gsp-color-info: #2563eb;
    --gsp-color-info-light: #eff6ff;
    --gsp-color-info-dark: #1d4ed8;

    /* Colors - Golf Specific */
    --gsp-color-eagle: #fbbf24;
    --gsp-color-birdie: #22c55e;
    --gsp-color-par: #6b7280;
    --gsp-color-bogey: #f97316;
    --gsp-color-double: #ef4444;
    --gsp-color-triple: #991b1b;

    /* ----------------------------------------
       Typography
       ---------------------------------------- */
    --gsp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --gsp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* Font Sizes - Mobile First (clamp for fluid scaling) */
    --gsp-text-xs: clamp(0.6875rem, 0.65rem + 0.1875vw, 0.75rem);     /* 11-12px */
    --gsp-text-sm: clamp(0.8125rem, 0.775rem + 0.1875vw, 0.875rem);   /* 13-14px */
    --gsp-text-base: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);        /* 14-16px */
    --gsp-text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);           /* 16-18px */
    --gsp-text-xl: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);       /* 18-20px */
    --gsp-text-2xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);          /* 20-24px */
    --gsp-text-3xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);        /* 24-30px */
    --gsp-text-4xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);      /* 30-36px */
    --gsp-text-5xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);            /* 36-48px */

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

    /* Line Heights */
    --gsp-leading-none: 1;
    --gsp-leading-tight: 1.25;
    --gsp-leading-snug: 1.375;
    --gsp-leading-normal: 1.5;
    --gsp-leading-relaxed: 1.625;

    /* ----------------------------------------
       Spacing Scale (4px base)
       ---------------------------------------- */
    --gsp-space-0: 0;
    --gsp-space-1: 0.25rem;   /* 4px */
    --gsp-space-2: 0.5rem;    /* 8px */
    --gsp-space-3: 0.75rem;   /* 12px */
    --gsp-space-4: 1rem;      /* 16px */
    --gsp-space-5: 1.25rem;   /* 20px */
    --gsp-space-6: 1.5rem;    /* 24px */
    --gsp-space-8: 2rem;      /* 32px */
    --gsp-space-10: 2.5rem;   /* 40px */
    --gsp-space-12: 3rem;     /* 48px */
    --gsp-space-16: 4rem;     /* 64px */
    --gsp-space-20: 5rem;     /* 80px */
    --gsp-space-24: 6rem;     /* 96px */

    /* ----------------------------------------
       Border Radius Scale
       ---------------------------------------- */
    --gsp-radius-none: 0;
    --gsp-radius-sm: 0.25rem;    /* 4px */
    --gsp-radius-md: 0.5rem;     /* 8px */
    --gsp-radius-lg: 0.75rem;    /* 12px */
    --gsp-radius-xl: 1rem;       /* 16px */
    --gsp-radius-2xl: 1.5rem;    /* 24px */
    --gsp-radius-full: 9999px;

    /* ----------------------------------------
       Shadows Scale
       ---------------------------------------- */
    --gsp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --gsp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --gsp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --gsp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --gsp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --gsp-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* ----------------------------------------
       Z-Index Scale
       ---------------------------------------- */
    --gsp-z-dropdown: 100;
    --gsp-z-sticky: 200;
    --gsp-z-fixed: 300;
    --gsp-z-modal-backdrop: 400;
    --gsp-z-modal: 500;
    --gsp-z-popover: 600;
    --gsp-z-tooltip: 700;
    --gsp-z-toast: 800;

    /* ----------------------------------------
       Layout & Containers
       ---------------------------------------- */
    --gsp-container-xs: 20rem;    /* 320px */
    --gsp-container-sm: 24rem;    /* 384px */
    --gsp-container-md: 28rem;    /* 448px */
    --gsp-container-lg: 32rem;    /* 512px */
    --gsp-container-xl: 36rem;    /* 576px */
    --gsp-container-2xl: 42rem;   /* 672px */
    --gsp-container-3xl: 48rem;   /* 768px */
    --gsp-container-4xl: 56rem;   /* 896px */
    --gsp-container-5xl: 64rem;   /* 1024px */
    --gsp-container-6xl: 72rem;   /* 1152px */
    --gsp-container-7xl: 80rem;   /* 1280px */
    --gsp-container-full: 100%;

    /* Content max-width */
    --gsp-content-max-width: min(100% - var(--gsp-space-6), 75rem); /* 1200px with padding */

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

    /* ----------------------------------------
       Component Specific
       ---------------------------------------- */
    /* Navigation */
    --gsp-nav-height: 3.5rem;        /* 56px mobile */
    --gsp-nav-height-lg: 4rem;       /* 64px desktop */
    --gsp-bottom-nav-height: 4rem;   /* 64px */

    /* Cards */
    --gsp-card-padding: var(--gsp-space-4);
    --gsp-card-padding-lg: var(--gsp-space-6);
    --gsp-card-radius: var(--gsp-radius-lg);
    --gsp-card-shadow: var(--gsp-shadow-sm);

    /* Buttons */
    --gsp-btn-height-sm: 2rem;       /* 32px */
    --gsp-btn-height-md: 2.5rem;     /* 40px */
    --gsp-btn-height-lg: 3rem;       /* 48px */
    --gsp-btn-min-touch: 2.75rem;    /* 44px - minimum touch target */

    /* Inputs */
    --gsp-input-height: 2.75rem;     /* 44px - touch friendly */
    --gsp-input-padding-x: var(--gsp-space-4);
    --gsp-input-padding-y: var(--gsp-space-3);
}

/* ========================================
   Breakpoint Reference (for documentation)
   ----------------------------------------
   Mobile:       0 - 479px   (base styles)
   Mobile L:     480 - 767px (@media min-width: 480px)
   Tablet:       768 - 1023px (@media min-width: 768px)
   Laptop:       1024 - 1279px (@media min-width: 1024px)
   Desktop:      1280px+ (@media min-width: 1280px)
   ======================================== */

/* ========================================
   Dark Theme Overrides
   ======================================== */
:root[data-theme="dark"] {
    --gsp-color-gray-50: #0f1f0f;
    --gsp-color-gray-100: #1a2e1a;
    --gsp-color-gray-200: #2d4a2d;
    --gsp-color-gray-300: #3d5e3d;
    --gsp-color-gray-400: #5a7a5a;
    --gsp-color-gray-500: #7a9a7a;
    --gsp-color-gray-600: #9aba9a;
    --gsp-color-gray-700: #bbd4bb;
    --gsp-color-gray-800: #dceadc;
    --gsp-color-gray-900: #f0f7f0;
}