/* ============================================
   CSS VARIABLES
   Light theme (default) + Dark theme
   ============================================ */

:root {
  /* ===== COLORS - LIGHT THEME (default) ===== */

  /* Backgrounds */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f1f5f9;

  /* RGB versions (for transparency effects like header blur) */
  --bg-primary-rgb: 248, 250, 252;
  --bg-secondary-rgb: 255, 255, 255;
  --bg-card-rgb: 255, 255, 255;

  /* Text colors */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-light: #64748b;

  /* Border colors */
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --border-dark: #cbd5e1;

  /* Accent / Brand colors */
  --accent: #3b82f6;
  --accent-dark: #2563eb;
  --accent-light: #eff6ff;
  --accent-rgb: 59, 130, 246;

  /* Feedback colors */
  --success: #10b981;
  --success-light: #d1fae5;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --danger: #ef4444;
  --danger-light: #fee2e2;
  --info: #3b82f6;
  --info-light: #dbeafe;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.08);
  --shadow-hover: 0 10px 25px -5px rgb(0 0 0 / 0.1);

  /* ===== BORDER RADIUS ===== */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ===== SPACING ===== */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;

  /* ===== TYPOGRAPHY ===== */
  --font-family-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-family-mono: "Courier New", "Fira Code", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

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

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ===== TRANSITIONS (mantenidas para hover effects, no para theme) ===== */
  --transition-fast: 0.1s ease;
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease;

  /* ===== Z-INDEX ===== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ===== LAYOUT ===== */
  --header-height: 64px;
  --footer-height: auto;
  --container-max-width: 1400px;
  --tool-card-max-width: 700px;
  --sidebar-width: 280px;

  --opacity-disabled: 0.5;
  --opacity-hover: 0.8;
  --opacity-active: 0.6;
}

/* ===== DARK THEME ===== */

body.dark {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #1e293b;
  --bg-hover: #334155;

  --bg-primary-rgb: 15, 23, 42;
  --bg-secondary-rgb: 30, 41, 59;
  --bg-card-rgb: 30, 41, 59;

  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --text-light: #94a3b8;

  --border-color: #334155;
  --border-light: #1e293b;
  --border-dark: #475569;

  --accent: #60a5fa;
  --accent-dark: #3b82f6;
  --accent-light: #1e293b;
  --accent-rgb: 96, 165, 250;

  --success: #34d399;
  --success-light: #064e3b;
  --warning: #fbbf24;
  --warning-light: #451a03;
  --danger: #f87171;
  --danger-light: #7f1d1d;
  --info: #60a5fa;
  --info-light: #1e293b;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6);
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.3);
  --shadow-hover: 0 10px 25px -5px rgb(0 0 0 / 0.4);
}

/* ===== GLOBAL BODY STYLES ===== */

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  /* SIN TRANSICIÓN - cambio instantáneo */
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

body.dark ::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

body.dark ::-webkit-scrollbar-thumb {
  background: var(--border-dark);
}

body.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ===== SELECTION ===== */

::selection {
  background: var(--accent);
  color: white;
}

::-moz-selection {
  background: var(--accent);
  color: white;
}

/* ===== FOCUS ===== */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}