/* BilliardBoard Foundation - Colors, Fonts, Reset, Utilities */
/* 
 * GZIP BUDGET: ~58 KB (warn at 50 KB)
 * Current gzip size: ~13 KB (well under budget)
 * This file contains: CSS variables, global resets, typography, basic layout, global utilities
 * Used by: ALL pages
 * 
 * NOTE: Shared UI components (buttons, cards, forms, modals) belong in components.css
 *       Dashboard-specific styles belong in dashboard.css
 *       Landing page styles belong in landing.css
 */

/* ========================================
   CSS VARIABLES (FOUNDATION)
   ======================================== */
:root {
  /* Color System - Grayscale Palette */
  --white: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Primary Colors */
  --primary: #64748b;
  --primary-dark: #475569;
  --primary-darker: #334155;
  
  /* Navbar Colors - Use accent-darkest for dark teal header */
  --navbar-border-color: rgba(255, 255, 255, 0.2);
  
  /* Accent Colors */
  --accent: #006B8A;
  --accent-light: #0080A3;
  --accent-dark: #005a73;
  --accent-darkest: #00455A;
  
  /* Companion Blues - For links, secondary CTAs, hovers */
  --blue-1: #3E7BAA;
  --blue-2: #2F6FA3;
  --blue-3: #1F5787;
  --indigo: #3E5BA9;
  
  /* Additional Colors - For future use */
  --blue-600: var(--blue-2); /* Alias for --blue-2 */
  --slate-800: var(--gray-800); /* Also available as --gray-800 */
  
  /* Success/Active Green - For checkmarks, status 'on', plus signs, and positive indicators */
  --success-green: #2F9E44;
  --success-green-light: #f0fdf4;
  --success-green-hover: #dcfce7;
  
  /* Status Colors - Semantic naming */
  --success: var(--success-green); /* Green for checkmarks, status 'on', plus signs */
  --warning: #EAAA3A;
  --warning-light: #fef3c7; /* Light background tint for warning messages */
  --error: #D64545;
  --error-light: #fee2e2; /* Light background tint for error messages */
  --info: var(--accent); /* Info messages use accent teal */
  --danger: var(--error); /* Danger/error messages use error color */
  
  /* Info Background & Border - For info banners and highlights */
  --info-bg: #F1F8FA;
  --info-border: #B9E0EC;
  
  /* Challengeability Colors - Uses same green as success indicators */
  --challengeable-green: var(--success-green);
  --challengeable-green-light: var(--success-green-light);
  --challengeable-green-hover: var(--success-green-hover);
  
  /* Orange colors for pending states */
  --pending-orange: #f59e0b;
  --pending-orange-light: #fffbeb;
  --pending-orange-hover: #fef3c7;

  /* Link Colors - Deep Blue (Legacy) */
  --link-color: var(--blue-3);
  --link-color-hover: var(--blue-3);
  --link-color-visited: var(--blue-3);

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing System */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --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);
  --shadow-primary: 0 10px 25px rgba(71, 85, 105, 0.25);
  
  /* Shadow color overlays (for hero and backgrounds) */
  --shadow-gray-500-30: rgba(100, 116, 139, 0.3);
  --shadow-gray-600-40: rgba(71, 85, 105, 0.4);
  --shadow-accent-40: rgba(0, 107, 138, 0.4);
  --shadow-white-90: rgba(255, 255, 255, 0.9);
  
  /* Teal shadow variables (accent color shadows) */
  --shadow-teal-10: rgba(0, 107, 138, 0.1);
  --shadow-teal-15: rgba(0, 107, 138, 0.15);
  --shadow-teal-dark-10: rgba(0, 90, 115, 0.1);

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Transitions */
  --transition: all 0.2s ease;
  --transition-slow: all 0.3s ease;
  
  /* Admin-specific color aliases for compatibility */
  --app-primary: var(--gray-600);
  --app-primary-dark: var(--gray-700);
  --app-primary-hover: var(--gray-700);
  
  --app-teal-primary: var(--gray-500);
  --app-teal-dark: var(--gray-600);
  --app-accent: var(--gray-500);
  --app-accent-hover: var(--gray-600);
  
  --app-success: var(--gray-600);
  --app-warning: var(--gray-500);
  --app-danger: var(--gray-700);
  
  --app-dark: var(--gray-900);
  --app-white: var(--white);
  --app-gray-50: var(--gray-50);
  --app-gray-100: var(--gray-100);
  --app-gray-200: var(--gray-200);
  --app-gray-300: var(--gray-300);
  --app-gray-400: var(--gray-400);
  --app-gray-500: var(--gray-500);
  --app-gray-600: var(--gray-600);
  --app-gray-700: var(--gray-700);
  --app-gray-800: var(--gray-800);
  --app-gray-900: var(--gray-900);
  
  /* Legacy Variables for Compatibility */
  --text: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-soft: var(--gray-500);
  --surface: var(--gray-50);
  --border: var(--gray-200);
  --focus: var(--gray-500);
  
  /* Semantic Color Variables (primary color system) */
  --bg-page: var(--gray-100); /* Page background - #F1F5F9 */
  --bg-surface: var(--gray-50);
  --bg-subtle: var(--gray-100);
  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-600);
  --border-focus: #64748b;
  --text-main: #1e293b; /* gray-800 */
  --text-inverse: var(--white);
  
  /* Legacy color variable aliases for components.css compatibility */
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-primary-400: #64748b;
  --color-primary-500: #64748b;
  
  /* Legacy color variables for compatibility (--primary already defined above, so this is a no-op) */
  /* --primary: var(--gray-600); */ /* Removed - conflicts with base definition */
  --primary-hover: var(--gray-700);
  --danger: var(--gray-700);
  
  /* Legacy shadow variables for compatibility - self-referencing removed (already defined above) */
  
  /* Admin-specific shadows */
  --app-shadow-sm: var(--shadow-sm);
  --app-shadow-md: var(--shadow-md);
  --app-shadow-lg: var(--shadow-lg);
  --app-shadow-primary: var(--shadow-primary);
  
  /* Navbar border color override for logged-in pages - use subtle white border on dark teal */
  --navbar-border-color: rgba(255, 255, 255, 0.2);
}

/* ========================================
   UTILITY CLASSES FOR POSITIVE INDICATORS
   Use --success-green for checkmarks, plus signs, status 'on', etc.
   ======================================== */

/* Checkmark icon */
.checkmark-icon,
.icon-checkmark {
  color: var(--success-green);
}

/* Plus/Add icon */
.plus-icon,
.icon-plus {
  color: var(--success-green);
}

/* Status 'on' indicator */
.status-on,
.status-enabled {
  color: var(--success-green);
}

/* Success/completed text */
.text-success,
.text-completed {
  color: var(--success-green);
}

/* Utility Classes for Text States */
.text-muted {
  color: var(--gray-500);
}

.text-unavailable {
  color: var(--gray-500);
  text-decoration: line-through;
}

/* Loading spinner text */
.loading-text {
  margin-left: 8px;
  color: var(--gray-600);
}

/* Hero highlight text moved to landing.css */

/* ========================================
   RESET & BASE STYLES
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overscroll-behavior: none; /* Prevent rubberband/bounce effect on mobile */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  max-width: 100%; /* Ensure html doesn't exceed viewport width */
}

body {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text, var(--gray-700)); /* Use --text if available, fallback to --gray-700 */
  background: var(--bg-page);
  overflow-x: hidden;
  overscroll-behavior: none; /* Prevent rubberband/bounce effect on mobile */
  padding-top: 56px; /* Account for fixed header height */
}

/* Typography Reset */
h1, h2, h3, h4, h5, h6 {
  color: var(--gray-900);
}

h1 {
  font-size: 2.25rem; /* 36px */
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 700;
}

h2, h3, h4, h5, h6 {
  font-weight: 600;
}

h2 {
  font-size: 1.875rem; /* 30px */
  line-height: 1.2;
  margin-bottom: 0.875rem;
}

h3 {
  font-size: 1.5rem; /* 24px */
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

h4 {
  font-size: 1.25rem; /* 20px */
  line-height: 1.3;
  margin-bottom: 0.625rem;
}

h5 {
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

h6 {
  font-size: 1rem; /* 16px (body size) */
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

p {
  margin: 0;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Inline links in content - use deep blue */
p a,
.content-legacy p a,
.modal-body-legacy p a,
.content-legacy a,
.modal-body-legacy a,
li a,
.content-legacy li a,
.modal-body-legacy li a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

p a:hover,
.content-legacy p a:hover,
.modal-body-legacy p a:hover,
.content-legacy a:hover,
.modal-body-legacy a:hover,
li a:hover,
.content-legacy li a:hover,
.modal-body-legacy li a:hover {
  color: var(--link-color-hover);
  text-decoration: underline;
}

p a:visited,
.content-legacy p a:visited,
.modal-body-legacy p a:visited,
li a:visited {
  color: var(--link-color-visited);
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 40px 24px;
  width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   LEGACY COMPONENT CLASSES
   Reusable styling that can be applied instantly to any page
   Colors deferred - use CSS variables for easy color updates later
   ======================================== */

/* Form styles are defined in components.css - canonical source for all form components */


/* Responsive Design */

/* ========================================
   RESPONSIVE BREAKPOINTS (FOUNDATION)
   ======================================== */

/* Tablet and below */

/* Mobile and below */

/* Small mobile */

/* Extra small screens */

/* ========================================

RESPONSIVE STYLES - CONSOLIDATED MEDIA QUERIES
   ======================================== */

/* ========================================
   RESPONSIVE BREAKPOINTS (FOUNDATION)
   ======================================== */

@media (max-width: 1024px) {
  .container {
    padding: 0 var(--space-6) 40px var(--space-6);
  }
  
  /* Navbar responsive rules moved to components.css - removed duplicates */
}

/* ========================================
   @media (max-width: 768px)
   ======================================== */

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-4) 40px var(--space-4);
  }
  
  /* Typography adjustments */
  h1 {
    font-size: 2rem; /* 32px */
    margin-bottom: 0.875rem;
  }

  h2 {
    font-size: 1.75rem; /* 28px */
    margin-bottom: 0.75rem;
  }

  h3 {
    font-size: 1.375rem; /* 22px */
    margin-bottom: 0.625rem;
  }

  h4 {
    font-size: 1.1875rem; /* ~19px */
    margin-bottom: 0.5rem;
  }
      
  /* Prevent horizontal scroll on mobile */
  body {
    overflow-x: hidden !important;
  }
  
  /* Button responsive rules moved to components.css */
  
  /* Landing-specific responsive rules moved to landing.css */
  
  /* Dashboard-specific responsive rules moved to dashboard.css */
}

/* ========================================
   @media (max-width: 640px)
   ======================================== */

@media (max-width: 640px) {
  .container {
      padding: 0 var(--space-3) 40px var(--space-3);
    }
    
  /* Button responsive rules moved to components.css */
  /* Navbar responsive rules moved to components.css - removed duplicates */
  
  /* Dashboard-specific responsive rules moved to dashboard.css */
  /* Component-specific responsive rules moved to components.css */
}

/* ========================================
   @media (max-width: 480px)
   ======================================== */

@media (max-width: 480px) {
  .nav-actions button[onclick*="openGuestNameModal"] {
    display: none !important;
  }
  
  /* Apply 640px container padding rules at 480px */
  .container {
    padding: 0 var(--space-3) 40px var(--space-3);
  }
  
  /* Typography for very small screens */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  
  /* Button responsive rules moved to components.css */
}