/* Fase 1/admin/css/tokens.css
 *
 * Paleta, tipografía y breakpoints del Admin Dashboard. Separado de
 * admin.css para que los valores de marca vivan en un solo lugar.
 */

:root {
  /* Paleta (Master Development Specification, sección 3) */
  --color-white: #FFFFFF;
  --color-light-gray: #F4F5F7;
  --color-soft-gray: #D9DCE3;
  --color-magenta: #D50070;
  --color-magenta-press: color-mix(in srgb, #D50070 85%, #000);
  --color-magenta-tint: color-mix(in srgb, #D50070 10%, #fff);
  --color-turquoise: #26B9C5;
  --color-turquoise-tint: color-mix(in srgb, #26B9C5 14%, #fff);
  --color-dark: #292B35;

  /* Roles semánticos — el resto del CSS usa estos, nunca los colores de marca directamente */
  --bg-app: var(--color-light-gray);
  --bg-surface: var(--color-white);
  --bg-surface-raised: var(--color-white);
  --border-subtle: var(--color-soft-gray);
  --text-primary: var(--color-dark);
  --text-muted: color-mix(in srgb, var(--color-dark) 60%, #fff);
  --text-on-magenta: #FFFFFF;
  --accent-primary: var(--color-magenta);
  --accent-primary-press: var(--color-magenta-press);
  --accent-primary-tint: var(--color-magenta-tint);
  --accent-secondary: var(--color-turquoise);
  --accent-secondary-tint: var(--color-turquoise-tint);
  --danger: #C62828;
  --danger-tint: color-mix(in srgb, #C62828 10%, #fff);
  --success: #1E8E5A;
  --success-tint: color-mix(in srgb, #1E8E5A 10%, #fff);

  --shadow-xs: 0 1px 2px rgba(41, 43, 53, 0.06);
  --shadow-s: 0 2px 8px rgba(41, 43, 53, 0.08);
  --shadow-m: 0 8px 24px rgba(41, 43, 53, 0.10);

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --sidebar-w: 240px;
  --sidebar-w-collapsed: 72px;
  --header-h: 64px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Breakpoints de referencia (documentados aquí, usados como comentario guía —
   las media queries reales viven en admin.css junto a cada componente):
   - Desktop (diseño principal): >= 1024px
   - Tablet: 768px - 1023px
   - Mobile: < 768px
*/