/* ============================================================
   base.css — reset, tipografía y estilos globales
   ============================================================ */

/* Fuentes locales
   ============================================================ */

@font-face {
  font-family: 'Bangers';
  src:
    url('../assets/fonts/bangers/bangers-regular.ttf')
    format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src:
    url('../assets/fonts/nunito-sans/nunito-sans-variable.ttf')
    format('truetype');
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src:
    url('../assets/fonts/nunito-sans/nunito-sans-italic-variable.ttf')
    format('truetype');
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  /* Tipografías
     ========================================================== */

  --font-display:
    'Bangers',
    Impact,
    Haettenschweiler,
    'Arial Narrow Bold',
    sans-serif;

  --font-body:
    'Nunito Sans',
    system-ui,
    -apple-system,
    'Segoe UI',
    Arial,
    sans-serif;

  /* Geometría
     ========================================================== */

  --radius-sm: 6px;
  --radius-md: 12px;

  /* Sombras estructurales
     El color se obtiene desde palette.css.
     ========================================================== */

  --shadow-panel:
    0 10px 30px
    rgba(var(--shadow-color-rgb), 0.45);

  /* capas globales de la página, de abajo hacia arriba.
     los z-index chicos (0 a 60) son locales a cada componente
     y no se nombran.
     ========================================================== */

  --z-header: 500;
  --z-back-to-top: 900;
  --z-sidebar: 1000;
  --z-lightbox: 3000;
  --z-modal: 3100;
}

/* Reset global
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-body);
  font-family: var(--font-body);
}

/*
 * Blindaje del atributo [hidden]: cualquier componente que le agregue su
 * propio "display" a un elemento (ej: .story-reader-settings-panel con
 * display:flex) puede sin querer pisar la regla por defecto del navegador
 * que hace [hidden] { display: none }, porque tienen la misma
 * especificidad y la del componente suele venir despues en la cascada.
 * Con !important acá, [hidden] siempre gana, sin importar qué display le
 * pongas a la clase.
 */
[hidden] {
  display: none !important;
}

/* Elementos multimedia
   ============================================================ */

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

/* Enlaces
   ============================================================ */

a {
  color: inherit;
}

/* Encabezados
   ============================================================ */

h1,
h2,
h3 {
  margin: 0 0 0.4em;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  line-height: 1.05;
}

h1 {
  color: var(--text-h1);
}

h2 {
  color: var(--text-h2);
}

h3 {
  color: var(--text-h3);
}

/* Accesibilidad: movimiento reducido
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Accesibilidad: foco visible
   ============================================================ */

a:focus-visible,
button:focus-visible,
img:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--form-focus);
  outline-offset: 2px;
}