/* tokens.css
   Light values: the Figma variables, read with get_variable_defs (variables.json).
   Names are the Figma names: color/texto -> --color-texto, font-weight/ligero -> --font-weight-ligero.
   Generated with figma-tokens-tailwind/tokens-to-css.mjs, then adapted by hand for a static page:
   @theme -> :root (no Tailwind here), unitless leading values -> rem, font stacks with fallbacks. */
:root {
  /* color */
  --color-texto: #161616;
  --color-texto-suave: #525252;
  --color-fondo: #ffffff;
  --color-superficie: #f4f4f4;
  --color-borde: #e0e0e0;
  --color-redline: #d02670;
  --color-redline-contraste: #ffffff;

  /* font family (Figma value first, fallbacks added) */
  --font-titular: "IBM Plex Sans", system-ui, sans-serif;
  --font-texto: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* weight */
  --font-weight-ligero: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* size and line height (Figma 32/40, 16/24, 14/20, 12/16 px) */
  --text-titulo: 2rem;
  --leading-titulo: 2.5rem;
  --text-cuerpo: 1rem;
  --leading-cuerpo: 1.5rem;
  --text-nota: 0.875rem;
  --leading-nota: 1.25rem;
  --text-mini: 0.75rem;
  --leading-mini: 1rem;

  /* spacing (Figma spacing/04 = 12, spacing/05 = 16) */
  --spacing-04: 0.75rem;
  --spacing-05: 1rem;
}

/* DARK MODE: PROPOSAL, NOT FROM FIGMA.
   The Figma read (variables.json) has no dark values, so these are proposed by Claude: a neutral
   gray scale in the same family as the light one (IBM Carbon gray 100 steps) and a lighter
   magenta for the redline so it keeps >= 4.5:1 on the dark background. Same names as light.
   Replace them with the real «Oscuro» values from Figma when you have them, and measure again. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-texto: #f4f4f4;
    --color-texto-suave: #c6c6c6;
    --color-fondo: #161616;
    --color-superficie: #262626;
    --color-borde: #525252;
    --color-redline: #ff7eb6;
    --color-redline-contraste: #161616;
  }
}