/* Tokens del sistema de diseño Prismo (tokens.json, versión 1). Claro por defecto; oscuro con data-theme="dark" en <html> (botón en la barra superior). */

@font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Marca: fijos, no cambian con el tema */
  --brand-slate: #2d3845;
  --brand-plum: #5a3357;
  --brand-amber: #f7aa2e;
  --brand-coral: #ea6553;
  --brand-plum-deep: #4d3050;
  --brand-paper: #f7f6f6;

  /* Semánticos: tema claro */
  --surface: #f7f6f6;
  --surface-raised: #ffffff;
  --surface-sunken: #efecea;
  --line: #dcd7d4;
  --line-strong: #8b8f96;
  --ink: #2d3845;
  --ink-muted: #5c6672;
  --accent: #5a3357;
  --accent-soft: #f0e7ef;
  --on-accent: #ffffff;
  --highlight: #f7aa2e;
  --highlight-soft: #fdf0da;
  --highlight-ink: #8a5600;
  --on-highlight: #2d3845;
  --signal: #ea6553;
  --signal-soft: #fde8e5;
  --signal-ink: #b23b2c;
  --on-signal: #161b21;
  --focus-ring: var(--accent);
  --link: var(--accent);
  --shadow-raised: 0 1px 2px rgba(47,58,70,0.08), 0 4px 12px rgba(47,58,70,0.06);

  /* Tipografía */
  --font-display: Lexend, "Avenir Next", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Espaciado (escala de 4 px) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* Radios */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #222a33;
  --surface-raised: #2c3640;
  --surface-sunken: #1c232b;
  --line: #3d4955;
  --line-strong: #808a97;
  --ink: #f1f3f5;
  --ink-muted: #b6bfc9;
  --accent: #d6acd1;
  --accent-soft: #40303d;
  --on-accent: #222a33;
  --highlight-soft: #45351a;
  --highlight-ink: #f8be62;
  --signal-soft: #47271f;
  --signal-ink: #f69a8d;
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.35);
}