/**
 * CREATIVIZA CREATIVE LAB — Bundle Principal
 * ============================================
 * Importa este único archivo en tu proyecto.
 * Incluye todos los módulos del design system.
 *
 * <link rel="stylesheet" href="css/creativiza.css">
 */

@import './tokens.css';
@import './typography.css';
@import './layout.css';
@import './components.css';

/* ─── Reset mínimo ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
}

/* ─── Body base con padding-top para nav fija ────────────────── */
body {
  padding-top: var(--nav-height);
}

/* ─── Scroll suave global ────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ─── Selection de marca ─────────────────────────────────────── */
::selection {
  background: var(--color-primary-ultralight);
  color: var(--color-primary-dark);
}

/* ─── Scrollbar de marca (webkit) ────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-gray-100); }
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}

/* ─── Focus visible accesible ────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}