/* Light Theme CSS Variables */
:root,
[data-theme="light"] {
  --background-color: #ffffff;
  --text-color: #333333;
  --text-color-emphasis: #000000;
  --primary-color: #3498db;
  --primary-color-rgb: 52, 152, 219;
  --secondary-color: #2ecc71;
  --accent-color: #f39c12;
  --error-color: #e74c3c;
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --info-color: #3498db;
  --border-color: #e0e0e0;
  --hover-color: #f5f5f5;
  --active-color: #e8e8e8;
  --disabled-color: #d4d4d4;
  --disabled-text-color: #999999;
  --card-background: #ffffff;
  --background-secondary: #f8f8f8;
  --text-muted: #777777;
  --text-primary: #333333;
  --text-secondary: #666666;
  --table-header-background: #f8f9fa;
  --table-row-hover: #f0f0f0;
  --primary-color-faint: rgba(52, 152, 219, 0.08);
  
  /* Component specific variables */
  --button-text-color: #ffffff;
  --input-background: #ffffff;
  --input-border: 1px solid #e0e0e0;
  --input-focus-border: 1px solid #3498db;
  
  /* Spacing and layout */
  --border-radius: 4px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  
  /* Font settings */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-medium: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ── Mobile: shrink shared font-size and spacing tokens so all controls that use
   them get smaller fonts and tighter margins on small screens. Kept modest so
   text stays readable and touch targets remain easy to tap. ───────────────── */
@media (max-width: 767px) {
  :root,
  [data-theme="light"] {
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;

    --spacing-sm: 6px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 22px;
  }
}