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

:root {
  /* Colores de marca (tomados del catálogo MAXPC) */
  --color-red: #d7141a;
  --color-red-dark: #8f0b10;
  --color-black: #0d0d0d;
  --color-ink: #1d1d1f;
  --color-gray: #5f6368;
  --color-line: #e6e6e6;
  --color-bg: #ffffff;
  --color-bg-soft: #f6f6f7;
  --color-white: #ffffff;
  --color-surface: #ffffff;   /* fondo del header */
  --color-text: #0d0d0d;      /* texto del header */

  /* Tipografía */
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;

  /* Espaciado y forma */
  --gutter: 16px;
  --radius: 10px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --transition: 0.2s ease;
}

/* Modo oscuro: se activa con el botón (data-theme="dark" en <html>) */
:root[data-theme="dark"] {
  --color-ink: #f5f5f7;
  --color-gray: #b0b3b8;
  --color-line: #2a2a2e;
  --color-bg: #121214;
  --color-bg-soft: #1a1a1d;
  --color-surface: #121214;
  --color-text: #f5f5f7;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-bg);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 2px;
}