/* public/assets/css/base.css */

/* ==========================================================================
   1. Sistema de Diseño: Colores, Tipografía, Espaciado
   ========================================================================== */

/* -- MODO CLARO (por defecto) -- */
:root {
  /* Colores de Marca */
  --brand-blue: #2700ff;
  --brand-pink: #ff0173;
  --brand-orange: #f76002;
  --brand-green: #66c901;
  --brand-dark-blue: #000050;
  --brand-darker-blue: #00001e;

  /* Colores de UI para Modo Claro */
  --ui-primary: var(--brand-blue); /* Usamos el azul de la marca como primario */
  --ui-primary-light: #e9e6ff;
  --ui-accent: var(--brand-pink);
  --ui-background: #ffffff;       /* Fondo general */
  --ui-surface: #f8f9fa;          /* Fondo para cards, modales, etc. */
  --ui-border: #dee2e6;           /* Bordes sutiles */
  --ui-header-bg: var(--brand-dark-blue);
  --ui-text-main: #000000;         /* Texto principal (negro) */
  --ui-text-muted: #6c757d;        /* Texto secundario (gris) */
  --ui-text-on-header: #ffffff;   /* Texto sobre fondos oscuros */
  --ui-success: #198754;
  --ui-danger: #dc3545;

  /* Tipografía */
  --font-headings: 'Prompt', sans-serif;
  --font-body: 'Prompt', sans-serif;
  --font-buttons: 'Alegreya Sans', sans-serif;
  --font-base-size: 16px;
  --line-height: 1.6;

  /* Espaciado y Tamaños */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Bordes y Sombras */
  --border-radius-sm: 0.25rem; /* 4px */
  --border-radius-md: 0.5rem;  /* 8px */
  --box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --box-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transiciones */
  --transition-fast: all 0.2s ease-in-out;
}

/* -- MODO OSCURO -- */
[data-theme="dark"] {
  --ui-background: #121212;
  --ui-surface: var(--brand-darker-blue);
  --ui-border: #444444;
  --ui-header-bg: var(--brand-darker-blue);
  --ui-text-main: #e0e0e0;
  --ui-text-muted: #9e9e9e;
  --ui-text-on-header: #ffffff;
}

/* ==========================================================================
   2. Estilos Base y Tipografía
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--font-base-size);
  line-height: var(--line-height);
  color: var(--ui-text-main);
  background-color: var(--ui-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  font-weight: 600; /* Como especificado */
  color: var(--ui-text-main); /* Hereda el color del body */
}

.btn {
  font-family: var(--font-buttons);
  font-weight: 300; /* Como especificado */
}