/* Bustum CSS base – presets globales, helpers y utilidades */

:root {
  --bustum-font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --bustum-color-1: #F4DA90;
  --bustum-color-2: #F2B6CC;
  --bustum-color-3: #C29CEE;
  --bustum-dark: #111111;
  --bustum-bg: #ffffff;
  --bustum-fg: #111111;
  color-scheme: light dark; /* indica soporte de ambos */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bustum-bg: #0e0e0f;
    --bustum-fg: #f1f1f1;
    /* puedes ajustar el degradado si lo quieres menos “neón” en dark */
    /* --bustum-color-1: #E8D074; --bustum-color-2: #E39EBB; --bustum-color-3: #B08BDD; */
  }
}

/* Reset ligero y defaults */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--bustum-font);
  color: var(--bustum-fg);
  background: var(--bustum-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A11Y: sólo mostrar outline en teclado */
:focus { outline: none; }
:focus-visible { outline: 2px dashed currentColor; outline-offset: 2px; }

/* Respeta usuarios que prefieren menos animación */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Utilidad: texto con degradado (tu clásico) */
.bustum-gradient-text {
  display: inline-block;
  background: linear-gradient(90deg, var(--bustum-color-1), var(--bustum-color-2), var(--bustum-color-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Helpers de visibilidad y responsive */
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: initial; } }

/* A11Y helper: oculto visual, accesible para lectores de pantalla */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden;
}

/* Hook del body cuando el usuario hace scroll (ver JS) */
body.scrolled .site-header {
  /* ejemplo: reduce altura o agrega sombra */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Puedes añadir aquí tokens de espaciado si quieres escalas coherentes
:root{ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; }
*/