/* Mérito Docente design tokens. Source of truth: docs/DESIGN_SYSTEM.md.
   Every text pair below was checked for WCAG AA (ratios in the doc). */

@font-face {
  font-family: "Libre Franklin";
  src: url("../assets/fonts/LibreFranklin-VF-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color: "pizarra y tiza" (chalkboard and chalk) */
  --color-ink: #1E3A34;          /* text, primary surfaces */
  --color-ink-muted: #4A605A;    /* secondary text */
  --color-paper: #F7F5EE;        /* page background */
  --color-surface: #FFFFFF;      /* cards, inputs */
  --color-line: #D6D1C4;         /* decorative hairlines only */
  --color-line-strong: #7A8580;  /* input and option borders (3:1+) */
  --color-amber: #F2B632;        /* primary action background, highlights; never text on light */
  --color-amber-tint: #FDF3DC;   /* selected option, notices */
  --color-ochre: #8A5A00;        /* amber-family text on light */
  --color-ok: #1F7A4D;
  --color-ok-tint: #E6F2EB;
  --color-bad: #B3261E;
  --color-bad-tint: #FBE9E7;
  --color-focus: #1E3A34;

  /* Type: one variable family keeps the download to ~28 KB on 3G */
  --font: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-sm: 0.875rem;   /* 14px: captions, meta */
  --text-base: 1.125rem; /* 18px: body, options */
  --text-lg: 1.375rem;   /* 22px: h3, question stem */
  --text-xl: 1.75rem;    /* 28px: h2 */
  --text-2xl: 2.125rem;  /* 34px: h1 */
  --leading: 1.55;
  --leading-tight: 1.2;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  /* Space: 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Shape: flat, hairlines, no shadows or gradients */
  --radius: 8px;
  --radius-tile: 14px;
  --border: 1px solid var(--color-line);
  --border-strong: 1.5px solid var(--color-line-strong);

  /* Layout */
  --measure: 40rem;       /* reading column */
  --tap: 48px;            /* minimum touch target */
  --gutter: var(--space-4);

  --motion: 150ms ease-out;
}

@media (min-width: 48rem) {
  :root {
    --text-xl: 2rem;
    --text-2xl: 2.625rem;
    --gutter: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
}