/* Marca personal Jean Paul Santana · variables de diseño v2
   Concepto: crecimiento que echa raíces.
   Uso: importar en la web y consumir solo las variables semánticas (--bg, --text, ...).
   Los nombres orgánicos (--bosque, --arcilla, ...) son la paleta base y no cambian con el modo. */

:root {
  /* Paleta base */
  --bosque: #2A6B4F;   /* principal: secciones, stickers, iconos en claro */
  --arcilla: #D9704A;  /* acción: botón WhatsApp, semilla, punto final */
  --rio: #1C3F4A;      /* apoyo: fondos alternos, blobs */
  --arena: #F1EAE0;    /* fondo claro, texto sobre oscuros */
  --tinta: #15201F;    /* texto, bordes, fondo oscuro */
  --musgo: #4B5A57;    /* texto secundario en claro, bordes en oscuro */
  --papel: #FAF6EF;    /* tarjetas en claro */
  --humus: #1D2B29;    /* tarjetas en oscuro */
  --brote: #BFE3C6;    /* hoja, resaltes, enlaces en oscuro */
  --niebla: #B9C4C0;   /* texto secundario en oscuro */

  /* Semánticas · modo claro (por defecto) */
  --bg: var(--arena);
  --surface: var(--papel);
  --text: var(--tinta);
  --muted: var(--musgo);
  --primary: var(--bosque);
  --primary-text: var(--bosque);
  --on-primary: var(--arena);
  --accent: var(--arcilla);
  --accent-text: #A34627;   /* arcilla oscura: la única versión de arcilla apta para texto sobre arena */
  --on-accent: var(--tinta);
  --border: var(--tinta);
  --shadow: var(--tinta);
  --icon: var(--bosque);

  /* Tipografía */
  /* Unbounded es ancha: los titulares van más pequeños que con una grotesca normal */
  --font-display: 'Unbounded', 'Arial Black', Impact, sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --size-display: 60px;  --lh-display: 0.95;
  --size-h1: 46px;       --lh-h1: 1;
  --size-h2: 34px;       --lh-h2: 1.05;
  --size-h3: 22px;       --lh-h3: 1.15;
  --size-lead: 20px;     --lh-lead: 1.5;
  --size-body: 17px;     --lh-body: 1.6;
  --size-small: 14px;    --lh-small: 1.5;
  --size-label: 12px;    --tracking-label: 0.16em;
  --tracking-display: -0.02em;

  /* Forma */
  --radius-chip: 12px;
  --radius-card: 16px;
  --radius-mark: 24px;
  --radius-pill: 999px;
  --border-w: 2px;
  --shadow-button: 4px 4px 0 var(--shadow);
  --shadow-card: 6px 6px 0 var(--shadow);

  /* Espaciado */
  --s-1: 8px; --s-2: 12px; --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px;
  --section-y: var(--s-8);
}

/* Modo oscuro por preferencia del sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--tinta);
    --surface: var(--humus);
    --text: var(--arena);
    --muted: var(--niebla);
    --primary-text: var(--brote);
    --accent-text: var(--arcilla);
    --border: var(--musgo);
    --shadow: var(--bosque);
    --icon: var(--brote);
  }
}

/* Modo oscuro forzado por el interruptor */
:root[data-theme="dark"] {
  --accent-text: var(--arcilla);
  --bg: var(--tinta);
  --surface: var(--humus);
  --text: var(--arena);
  --muted: var(--niebla);
  --primary-text: var(--brote);
  --border: var(--musgo);
  --shadow: var(--bosque);
  --icon: var(--brote);
}

/* Móvil: la escala baja, el resto se mantiene */
@media (max-width: 767px) {
  :root {
    --size-display: 44px;
    --size-h1: 30px;
    --size-h2: 26px;
    --size-h3: 20px;
    --size-lead: 18px;
    --section-y: var(--s-7);
  }
}