/* ==========================================================================
   billeteras.io — tokens
   Un solo lugar para color, tipografía, ritmo y capas.
   Tema claro por defecto; oscuro por preferencia del sistema o por
   [data-tema] cuando el usuario lo fuerza desde la cabecera.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Color: papel e tinta ------------------------------------------- */
  --papel:        #F1EFE8;   /* hueso cálido, no blanco puro */
  --papel-2:      #E9E6DD;   /* bloques secundarios */
  --papel-3:      #DFDBD0;   /* relleno de logos y estados */
  --tinta:        #15181C;   /* texto principal */
  --tinta-2:      #4C535B;   /* texto secundario */
  --tinta-3:      #7A828B;   /* rótulos y metadatos */
  --noche:        #0D171C;   /* bandas oscuras: hero inferior, pie */
  --noche-2:      #16242B;
  --sobre-noche:  #E8E4DA;   /* texto sobre bandas oscuras */

  /* --- Color: señal ---------------------------------------------------- */
  --acento:       #D93F16;   /* naranja señal: enlaces vivos, marcas, foco */
  --acento-fondo: #FBE7DF;
  --si:           #0B6B4F;   /* propiedad positiva */
  --no:           #A5331F;   /* propiedad negativa */
  --medio:        #8A6410;   /* parcial */
  --neutro:       var(--tinta-3);

  /* --- Líneas ---------------------------------------------------------- */
  --linea:        color-mix(in srgb, var(--tinta) 16%, transparent);
  --linea-fuerte: color-mix(in srgb, var(--tinta) 42%, transparent);
  --linea-suave:  color-mix(in srgb, var(--tinta) 8%, transparent);
  --linea-noche:  color-mix(in srgb, var(--sobre-noche) 20%, transparent);

  /* --- Tipografía ------------------------------------------------------ */
  /* Una sola grotesca para titular y lectura, diferenciada por peso y kerning,
     más una monoespaciada técnica para rótulos, cifras y etiquetas. */
  --f-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-texto:   "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --peso-display: 600;
  --peso-medio:   500;

  --fs-micro: 0.6875rem;                                  /* 11px, rótulos mono */
  --fs-mini:  0.75rem;
  --fs-sm:    0.8125rem;
  --fs-base:  clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --fs-lg:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-xl:    clamp(1.1875rem, 1.08rem + 0.55vw, 1.4375rem);

  --d1: clamp(2.375rem, 1.15rem + 5.4vw, 4.75rem);        /* titular de portada */
  --d2: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);           /* titulares de sección/ficha */
  --d3: clamp(1.3125rem, 1.16rem + 0.78vw, 1.75rem);

  --ls-display: -0.035em;                                 /* la grotesca pide kerning cerrado */
  --ls-rotulo: 0.14em;
  --ls-mono:   0.01em;

  /* --- Ritmo ----------------------------------------------------------- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4.5rem;
  --e9: 6.5rem;

  /* --- Estructura ------------------------------------------------------ */
  --ancho:  78rem;         /* contenedor general */
  --ancho-texto: 42rem;    /* medida de lectura cómoda */
  --canal: clamp(1.125rem, 4.5vw, 3rem);
  --alto-cabecera: 3.5rem;

  --radio: 0;              /* el proyecto es de esquinas vivas, a propósito */
  --borde: 1px;

  /* --- Movimiento ------------------------------------------------------ */
  --t-rapida: 120ms cubic-bezier(0.2, 0, 0.1, 1);
  --t-media:  220ms cubic-bezier(0.2, 0, 0.1, 1);
  --desplazo: 2px;         /* desplazamiento del efecto "sello" */
}

/* --- Tema oscuro: por sistema, salvo que se fuerce el claro -------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:       #0F1315;
    --papel-2:     #161B1E;
    --papel-3:     #1E252A;
    --tinta:       #EDE9E0;
    --tinta-2:     #A9B0B7;
    --tinta-3:     #7D858D;
    --noche:       #080C0E;
    --noche-2:     #121A1E;
    --sobre-noche: #EDE9E0;
    --acento:      #FF6237;
    --acento-fondo: #2A1710;
    --si:          #35B08A;
    --no:          #E0705A;
    --medio:       #D2A03C;
    --linea:        color-mix(in srgb, var(--tinta) 18%, transparent);
    --linea-fuerte: color-mix(in srgb, var(--tinta) 45%, transparent);
    --linea-suave:  color-mix(in srgb, var(--tinta) 9%, transparent);
  }
}

/* --- Tema oscuro forzado ------------------------------------------------ */
:root[data-tema="oscuro"] {
  --papel:       #0F1315;
  --papel-2:     #161B1E;
  --papel-3:     #1E252A;
  --tinta:       #EDE9E0;
  --tinta-2:     #A9B0B7;
  --tinta-3:     #7D858D;
  --noche:       #080C0E;
  --noche-2:     #121A1E;
  --sobre-noche: #EDE9E0;
  --acento:      #FF6237;
  --acento-fondo: #2A1710;
  --si:          #35B08A;
  --no:          #E0705A;
  --medio:       #D2A03C;
  --linea:        color-mix(in srgb, var(--tinta) 18%, transparent);
  --linea-fuerte: color-mix(in srgb, var(--tinta) 45%, transparent);
  --linea-suave:  color-mix(in srgb, var(--tinta) 9%, transparent);
}