/* didatic — tokens de diseño */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Color */
  --color-pino: #0F3D36;
  --color-grafito: #1B1D22;
  --color-senal: #FF5B24;
  --color-senal-hover: #E84E1B;
  --color-pino-claro: #2F7A6E;
  --color-hueso: #F3F0EA;
  --color-niebla: #DAD7D0;
  --color-piedra: #8C8A84;
  --color-texto-sec: #5F5D58;
  --color-blanco: #FFFFFF;

  /* Semánticos */
  --bg: var(--color-hueso);
  --surface: var(--color-blanco);
  --text: var(--color-grafito);
  --text-muted: var(--color-texto-sec);
  --border: var(--color-niebla);
  --link: var(--color-pino);
  --cta-bg: var(--color-senal);
  --cta-text: var(--color-grafito);
  --focus: var(--color-senal);

  /* Tipografía */
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-xs: 0.8125rem;  /* 13 */
  --fs-sm: 0.9375rem;  /* 15 */
  --fs-base: 1.0625rem;/* 17 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.75rem;    /* 28 */
  --fs-2xl: 2.5rem;    /* 40 */
  --fs-3xl: 3.5rem;    /* 56 */
  --lh-body: 1.6;
  --lh-title: 1.1;

  /* Espaciado (base 8) */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-6: 3rem; --sp-8: 4rem; --sp-12: 6rem; --sp-16: 8rem;

  /* Formas */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --maxw: 1200px;
}

/* Sección oscura: aplicar la clase al contenedor */
.theme-dark {
  --bg: var(--color-grafito);
  --surface: #24262C;
  --text: var(--color-hueso);
  --text-muted: var(--color-niebla);
  --border: #33363D;
  --link: #7FC4B8;
}
.theme-pino {
  --bg: var(--color-pino);
  --surface: #164A42;
  --text: var(--color-hueso);
  --text-muted: var(--color-niebla);
  --border: #2A5A52;
  --link: var(--color-hueso);
}