/* =========================================
   Viboy Color - Design System
   Sistema de diseño Atomic Purple - Diseño Claro y Minimalista
   ========================================= */

/* Variables CSS - Tema Atomic Purple */
:root {
  /* Colores principales - Atomic Purple */
  --color-primary: #9B59B6;
  --color-primary-dark: #7D3C98;
  --color-secondary: #00A550;
  
  /* Colores de fondo */
  --color-bg: #ffffff;
  --color-surface: #f8f9fa;
  
  /* Colores de texto */
  --color-text: #212529;
  --color-text-secondary: #6c757d;
  
  /* Colores de borde */
  --color-border: #dee2e6;
  
  /* Colores de enlaces */
  --color-link: #0056b3;
  --color-link-hover: #004085;
  
  /* Colores de código */
  --color-code-bg: #f1f3f5;
  --color-code-border: #ced4da;
  
  /* Colores de estado */
  --color-accent: #0d6efd;
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  
  /* Integridad educativa */
  --color-integridad-bg: #fff3cd;
  --color-integridad-border: #ffc107;
  --color-integridad-text: #856404;
  
  /* Tipografía */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  
  /* Espaciado */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* Layout */
  --max-width: 980px;
  --border-radius: 0.375rem;
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    /* Colores de fondo */
    --color-bg: #1a1a1a;
    --color-surface: #2d2d2d;
    
    /* Colores de texto */
    --color-text: #e9ecef;
    --color-text-secondary: #adb5bd;
    
    /* Colores de borde */
    --color-border: #495057;
    
    /* Colores de enlaces */
    --color-link: #4da6ff;
    --color-link-hover: #80bfff;
    
    /* Colores de código */
    --color-code-bg: #2d2d2d;
    --color-code-border: #495057;
    
    /* Colores de estado */
    --color-accent: #4da6ff;
    --color-success: #51cf66;
    --color-warning: #ffd43b;
    --color-error: #ff6b6b;
    
    /* Integridad educativa */
    --color-integridad-bg: #664d03;
    --color-integridad-border: #ffc107;
    --color-integridad-text: #ffc107;
  }
}

/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  padding: var(--spacing-md);
  transition: background-color 0.2s ease, color 0.2s ease;
}