/* PEPTIDES · tokens.css v1.0
   Variables CSS de la marca. Importar antes de peptides.css.
   Tema claro por defecto; oscuro con [data-theme="dark"] o por preferencia del sistema.
   Prefijo --pp- para no chocar con nada. */

:root {
  /* paleta fija */
  --pp-oxido-claro: #B5461F;
  --pp-oxido-oscuro: #E2673A;
  --pp-cafe: #2B241D;
  --pp-cafe-profundo: #1E1913;
  --pp-hueso: #F4F1EA;
  --pp-blanco: #FFFFFF;
  --pp-negro: #0B0C0E;
  --pp-champan: #EADFCB;
  --pp-gris-calido: #5E554B;
  --pp-gris-frio: #9AA0A6;

  /* tipografía */
  --pp-font-sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --pp-font-serif: "Cormorant Garamond", Georgia, serif;
  --pp-w-light: 300; --pp-w-regular: 400; --pp-w-medium: 500; --pp-w-semibold: 600;
  --pp-tk-logo: 0.13em; --pp-tk-kicker: 0.30em; --pp-tk-ficha: 0.20em; --pp-tk-btn: 0.04em; --pp-tk-tight: -0.01em;
  --pp-fs-kicker: 13px; --pp-fs-ficha: 12px; --pp-fs-body: 17px; --pp-fs-lead: 20px; --pp-fs-btn: 16px;
  --pp-fs-h3: 24px; --pp-fs-h2: 32px; --pp-fs-h1: clamp(40px, 6vw, 64px); --pp-fs-display: clamp(56px, 9vw, 112px); --pp-fs-num: 28px;
  --pp-lh-tight: 1.05; --pp-lh-snug: 1.2; --pp-lh-normal: 1.5;

  /* espacio, radio, borde, movimiento */
  --pp-s1: 4px; --pp-s2: 8px; --pp-s3: 12px; --pp-s4: 16px; --pp-s5: 24px; --pp-s6: 32px; --pp-s7: 48px; --pp-s8: 64px; --pp-s9: 96px;
  --pp-gutter: clamp(16px, 4vw, 80px);
  --pp-r-sm: 2px; --pp-r-md: 4px; --pp-r-pill: 999px;
  --pp-hair: 1px; --pp-rule: 2px;
  --pp-t-fast: 150ms; --pp-t-base: 220ms; --pp-ease: cubic-bezier(0.2, 0, 0, 1);

  /* semánticos · tema claro */
  --pp-bg: var(--pp-hueso);
  --pp-surface: var(--pp-blanco);
  --pp-fg: var(--pp-cafe);
  --pp-fg-2: var(--pp-gris-calido);
  --pp-brand: var(--pp-oxido-claro);
  --pp-dosis: var(--pp-cafe);            /* marca de dosis del logo: siempre el color opuesto al fondo */
  --pp-line: rgba(43, 36, 29, 0.18);
  --pp-btn-bg: var(--pp-oxido-claro);
  --pp-btn-fg: var(--pp-blanco);
  --pp-btn-alt-bg: var(--pp-cafe);
  --pp-btn-alt-fg: var(--pp-hueso);
  color-scheme: light;
}

/* tema oscuro (café) */
:root[data-theme="dark"],
[data-theme="dark"] {
  --pp-bg: var(--pp-cafe);
  --pp-surface: var(--pp-cafe-profundo);
  --pp-fg: var(--pp-champan);
  --pp-fg-2: rgba(234, 223, 203, 0.72);
  --pp-brand: var(--pp-oxido-oscuro);
  --pp-dosis: var(--pp-hueso);
  --pp-line: rgba(234, 223, 203, 0.25);
  --pp-btn-bg: var(--pp-oxido-oscuro);
  --pp-btn-fg: var(--pp-cafe-profundo);
  --pp-btn-alt-bg: var(--pp-hueso);
  --pp-btn-alt-fg: var(--pp-cafe);
  color-scheme: dark;
}

/* tema negro (variante de oscuro para piezas de rendimiento) */
[data-theme="black"] {
  --pp-bg: var(--pp-negro);
  --pp-surface: #141517;
  --pp-fg: var(--pp-hueso);
  --pp-fg-2: var(--pp-gris-frio);
  --pp-brand: var(--pp-oxido-oscuro);
  --pp-dosis: var(--pp-hueso);
  --pp-line: rgba(242, 243, 244, 0.25);
  --pp-btn-bg: var(--pp-oxido-oscuro);
  --pp-btn-fg: var(--pp-negro);
  --pp-btn-alt-bg: var(--pp-hueso);
  --pp-btn-alt-fg: var(--pp-negro);
  color-scheme: dark;
}

/* si no se fija tema, seguir al sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pp-bg: var(--pp-cafe);
    --pp-surface: var(--pp-cafe-profundo);
    --pp-fg: var(--pp-champan);
    --pp-fg-2: rgba(234, 223, 203, 0.72);
    --pp-brand: var(--pp-oxido-oscuro);
    --pp-dosis: var(--pp-hueso);
    --pp-line: rgba(234, 223, 203, 0.25);
    --pp-btn-bg: var(--pp-oxido-oscuro);
    --pp-btn-fg: var(--pp-cafe-profundo);
    --pp-btn-alt-bg: var(--pp-hueso);
    --pp-btn-alt-fg: var(--pp-cafe);
    color-scheme: dark;
  }
}