/**
 * Base CSS Variables for Solid-UI Theme System
 * Phase 1: Foundation
 * 
 * These variables form the foundation of all themes.
 * They provide fallback values and can be overridden by theme presets.
 */

:root {
  /* ========== Colors - Primary ========== */
  --sui-primary: #805ad5;
  --sui-primary-dark: #667eea;
  --sui-primary-light: #9f7aea;
  --sui-accent: #9f7aea;
  
  /* ========== Colors - Gradients ========== */
  --sui-gradient-start: #667eea;
  --sui-gradient-end: #9f7aea;
  --sui-gradient: linear-gradient(135deg, var(--sui-gradient-start), var(--sui-gradient-end));
  
  /* ========== Backgrounds ========== */
  --sui-bg: #f7f8fc;
  --sui-bg-panel: #ffffff;
  --sui-bg-header: #ffffff;
  --sui-bg-input: #eef;
  --sui-bg-hover: #f7f8fc;
  --sui-bg-active: #ede9fe;
  --sui-bg-button: #fff;
  --sui-bg-button-hover: #f7f8fc;
  
  /* ========== Text Colors ========== */
  --sui-text: #2d3748;
  --sui-text-secondary: #4a5568;
  --sui-text-muted: #a0aec0;
  --sui-text-link: #3B5998;
  --sui-text-on-primary: #ffffff;
  
  /* ========== Borders ========== */
  --sui-border-color: #e2e8f0;
  --sui-border-color-dark: #88c;
  --sui-border-width: 0.05em;
  --sui-border: var(--sui-border-width) solid var(--sui-border-color);
  
  /* ========== Border Radius ========== */
  --sui-border-radius: 0.5em;
  --sui-border-radius-sm: 0.2em;
  --sui-border-radius-lg: 1em;
  --sui-border-radius-full: 50%;
  
  /* ========== Shadows ========== */
  --sui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --sui-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --sui-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --sui-shadow-colored: 0 4px 20px rgba(102, 126, 234, 0.3);
  
  /* ========== Spacing Scale ========== */
  --sui-space-xs: 0.25em;
  --sui-space-sm: 0.5em;
  --sui-space-md: 1em;
  --sui-space-lg: 1.5em;
  --sui-space-xl: 2em;
  --sui-space-2xl: 3em;
  
  /* ========== Typography ========== */
  --sui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                     "Helvetica Neue", Arial, sans-serif;
  --sui-font-family-mono: 'Monaco', 'Courier New', monospace;
  
  --sui-font-size-xs: 0.75em;
  --sui-font-size-sm: 0.875em;
  --sui-font-size-base: 1em;
  --sui-font-size-lg: 1.125em;
  --sui-font-size-xl: 1.25em;
  --sui-font-size-2xl: 1.5em;
  --sui-font-size-3xl: 1.875em;
  
  --sui-line-height: 1.5;
  --sui-line-height-tight: 1.25;
  --sui-line-height-relaxed: 1.75;
  
  /* ========== Forms ========== */
  --sui-form-border-color: #88c;
  --sui-form-group-border: var(--sui-border-width) solid var(--sui-form-border-color);
  --sui-input-padding: var(--sui-space-sm);
  --sui-input-margin: 0.4em;
  
  /* ========== Buttons ========== */
  --sui-button-padding: 0.7em;
  --sui-button-padding-sm: 0.5em 1em;
  --sui-button-padding-lg: 1em 4em;
  --sui-button-margin: 0.3em;
  
  /* ========== Icon Sizes ========== */
  --sui-icon-size: 1.5em;        /* Standard icons and buttons */
  --sui-avatar-size: 2.5em;      /* Person/contact avatars */
  --sui-icon-class-size: 3em;    /* Class/type icons */
  
  /* ========== ACL Groups (preserve current colors) ========== */
  --sui-group-default: #888;
  --sui-group-1: green;
  --sui-group-2: #cc0;
  --sui-group-3: orange;
  --sui-group-5: red;
  --sui-group-9: blue;
  --sui-group-13: purple;
  
  /* ========== Status Colors ========== */
  --sui-success: #48bb78;
  --sui-warning: orange;
  --sui-error: red;
  --sui-info: #01c9ea;
  
  /* ========== Header ========== */
  --sui-header-gradient: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%);
  --sui-header-height: 60px;
  --sui-header-shadow: 0px 1px 4px #000000;
  
  /* ========== Transitions ========== */
  --sui-transition-fast: 0.15s ease;
  --sui-transition: 0.2s ease;
  --sui-transition-slow: 0.3s ease;
  
  /* ========== Z-Index Scale ========== */
  --sui-z-dropdown: 1;
  --sui-z-modal: 100;
  --sui-z-tooltip: 200;
  
  /* ========== Accessibility ========== */
  --sui-focus-color: #667eea;
  --sui-focus-width: 2px;
  --sui-focus-offset: 2px;
  --sui-touch-target-min: 44px;
}

/* ========== Responsive Adjustments ========== */
/* Mobile: Smaller base font and tighter spacing */
@media (max-width: 768px) {
  :root {
    --sui-font-size-base: 0.9em;
    --sui-font-size-sm: 0.8em;
    --sui-font-size-xs: 0.7em;
    --sui-space-md: 0.8em;
    --sui-space-lg: 1.2em;
    --sui-space-xl: 1.6em;
    --sui-space-2xl: 2.4em;
  }
}

/* Tablet: Slightly smaller than desktop */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --sui-font-size-base: 0.95em;
    --sui-space-md: 0.9em;
    --sui-space-lg: 1.35em;
  }
}

/* Desktop: Use default values (already defined above) */
@media (min-width: 1025px) {
  :root {
    /* Desktop uses the base values defined above */
  }
}
