/* ===========================================
   DESIGN TOKENS
   Shared design variables for GSFT application
   =========================================== */

:root {
  /* ======================================
     COLORS - Background
     ====================================== */
  --color-bg-page: #F5F5F5;
  --color-bg-card: #FFFFFF;
  --color-bg-input: #fff8b8;
  --color-bg-input-group: #d1d3d6;
  --color-bg-label: #e5e7eb;
  --color-bg-rnd-label: rgb(176, 176, 176);

  /* ======================================
     COLORS - Text
     ====================================== */
  --color-text-primary: rgb(17, 24, 39);
  --color-text-secondary: rgb(107, 114, 128);
  --color-text-muted: #6c757d;
  --color-text-heading: #333;
  --color-text-success: #2e8b57;

  /* ======================================
     COLORS - Surfaces (subtle backgrounds)
     ====================================== */
  --color-bg-subtle: #f8f9fa;
  --color-border-subtle: #e9ecef;

  /* ======================================
     COLORS - Borders
     ====================================== */
  --color-border-default: rgb(229, 231, 235);
  --color-border-input: #ced4da;
  --color-border-card: rgba(0, 0, 0, 0.08);

  /* ======================================
     COLORS - Buttons
     ====================================== */
  --color-btn-red: #ef4444;
  --color-btn-red-hover: #e63636;
  --color-btn-green: #28a745;
  --color-btn-green-hover: #218838;
  --color-btn-blue: #007bff;
  --color-btn-blue-hover: #0056b3;

  /* ======================================
     COLORS - States
     ====================================== */
  --color-success: #d4edda;
  --color-success-border: #c3e6cb;
  --color-danger: #f8d7da;
  --color-danger-border: #f5c6cb;
  --color-warning: #fff8b8;
  --color-info: #17a2b8;
  --color-closed: #ffb8b8;

  /* ======================================
     COLORS - Tournament Themes
     ====================================== */
  --color-tournament-auo: #1c91d0;
  --color-tournament-fro: #d45122;
  --color-tournament-wim: #296c3c;
  --color-tournament-uso: #00288b;
  --color-tournament-none: #4d4f54;

  /* ======================================
     SPACING
     ====================================== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;

  /* ======================================
     LAYOUT
     ====================================== */
  --navbar-height: 60px;
  --navbar-content-gap: 12px; /* Vertical gap between navbar and first content card */

  /* ======================================
     BORDER RADIUS
     ====================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* ======================================
     TYPOGRAPHY
     ====================================== */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
  --font-family-mono: 'Courier New', monospace;

  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-base: 16px;
  --font-size-lg: 1.25rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 2.5rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.4;

  /* ======================================
     FORM ELEMENTS
     ====================================== */
  --input-height: 36px;
  --input-height-sm: calc(1.3rem + 10px);
  --input-padding: 8px 12px;
  --input-padding-sm: 6px 10px;
  --input-font-size: 16px;
  --input-border: 1px solid var(--color-border-input);
  --input-border-radius: var(--radius-sm);
  --input-bg: #ffffff;
  --input-bg-focus: #ffffff;
  --input-border-focus: #80bdff;
  --input-shadow-focus: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

  /* ======================================
     SHADOWS
     ====================================== */
   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
   --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
   --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.18), 0 3px 6px rgba(0, 0, 0, 0.12);
   --shadow-lite: 0 6px 16px rgba(0, 0, 0, 0.08);

  /* ======================================
     TRANSITIONS
     ====================================== */
  --transition-fast: 0.1s ease-out;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ======================================
     Z-INDEX SCALE
     Base content: 0-99
     Dropdowns: 100-499
     Fixed elements: 500-999
     Overlays: 1000-1999
     Modals: 2000-2999
     Critical UI: 3000+
     ====================================== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 1000;
  --z-overlay: 1500;
  --z-modal-backdrop: 2000;
  --z-modal: 2050;
  --z-modal-high: 2100;
  --z-navigation: 50000;
  --z-toast: 60000;
  --z-critical: 4000;

  /* ======================================
     LAYOUT - Deprecated (use --navbar-height and --navbar-content-gap instead)
     ====================================== */
  --header-height: calc(var(--navbar-height) + var(--navbar-content-gap));
  --container-max-width: 1500px;
  --content-max-width: 1000px;
  
  /* ======================================
     PAGE WIDTH CONTROL
     Change this one value to affect all desktop pages
     ====================================== */
  --page-max-width: 1200px;  /* Set to specific value like 1400px to constrain width */
}

/* ======================================
   TEAM STAR ICON - Gold star for team players
   ====================================== */
.team-star {
  color: #0a0886;  /* Gold/amber color */
  font-size: 0.85em;
  margin-right: 2px;
}