@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, p, ol, ul { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  img, svg, canvas { display: block; max-width: 100%; }
}

@layer base {
  :root {
    /* Cuaderno de estudio: papel cuadriculado frío, tinta azul, margen rojo. */
    --paper: #EDF1F5;
    --grid: #D3DEEA;
    --ink: #1E2A4A;
    --ink-soft: #4A5675;
    --margin-red: #D2384B;
    --tape: rgba(255, 236, 160, 0.72);

    --font-book: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, Georgia, serif;

    --step--1: 0.9rem;
    --step-0: 1.0625rem;
    --step-1: 1.375rem;
    --step-2: 2rem;
    --step-4: clamp(2.75rem, 7vw, 5.25rem);

    --space: 1.5rem;
    --margin-line: clamp(1.25rem, 6vw, 5.5rem);
  }

  body {
    background-color: var(--paper);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 24px 24px;
    color: var(--ink);
    font-family: var(--font-book);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { color: var(--margin-red); }

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

  h1, h2 { font-weight: 700; line-height: 1.1; }
}