/* ==========================================================================
   G+P — DESIGN TOKENS
   Punto único de personalización visual. Cambiar aquí = cambiar todo.
   Ver también: assets/js/brand.config.js (datos de marca y contacto)
   ========================================================================== */

:root {
  /* --- Paleta de marca ------------------------------------------------- */
  /* Tomada de la obra real: ladrillo visto, hormigón visto, revoque blanco. */
  --brand-primary:      #A34A2A;   /* ladrillo visto Cyrene */
  --brand-primary-dark: #7E3720;
  --brand-primary-soft: #F2E3DC;
  --brand-secondary:    #2A2622;   /* tinta / hormigón oscuro */
  --brand-accent:       #C98A3E;   /* bronce, señalética */

  /* --- Superficies ------------------------------------------------------ */
  --ink:            #17130F;
  --ink-2:          #4A423B;
  --ink-3:          #8B8078;
  --ink-4:          #B8AFA6;
  --paper:          #FBF9F6;
  --paper-2:        #F3EFE9;
  --paper-3:        #E8E2DA;
  --surface:        #FFFFFF;
  --night:          #17130F;
  --night-2:        #241E19;

  /* --- Semánticos ------------------------------------------------------- */
  --ok:        #2F7D5B;
  --ok-soft:   #E3F1EA;
  --warn:      #B07515;
  --warn-soft: #FBF0DA;
  --danger:    #B33A2B;
  --danger-soft:#FAE5E2;
  --info:      #2C5D86;
  --info-soft: #E3EDF5;

  /* --- Líneas y sombras ------------------------------------------------- */
  --line:        #E2DBD2;
  --line-strong: #CFC6BA;
  --line-ink:    rgba(23, 19, 15, .12);
  --shadow-sm: 0 1px 2px rgba(23,19,15,.05), 0 1px 1px rgba(23,19,15,.04);
  --shadow-md: 0 4px 14px rgba(23,19,15,.07), 0 1px 3px rgba(23,19,15,.05);
  --shadow-lg: 0 18px 48px rgba(23,19,15,.13), 0 4px 12px rgba(23,19,15,.06);

  /* --- Tipografía ------------------------------------------------------- */
  /* Recta y elegante: una grotesca estrecha para títulos, una neutra para
     lectura y una monoespaciada para la capa técnica (códigos, cifras). */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-text:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-nano:  .5625rem; /* 9  — sólo etiquetas de gráfico */
  --fs-micro: .625rem;  /* 10 */
  --fs-xs:   .6875rem;  /* 11 */
  --fs-sm:   .8125rem;  /* 13 */
  --fs-base: .9375rem;  /* 15 */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.875rem;  /* 30 */
  --fs-2xl:  2.75rem;   /* 44 */
  --fs-3xl:  4rem;      /* 64 */
  --fs-4xl:  5.5rem;    /* 88 */

  --track-tight: -.03em;
  --track-wide:  .16em;

  /* --- Espaciado (escala de 4) ------------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

  /* --- Radios ------------------------------------------------------------ */
  /* Arquitectura = ángulo recto. Radios mínimos, nunca cápsulas. */
  --r-xs: 2px;  --r-sm: 3px;  --r-md: 4px;  --r-lg: 6px;

  /* --- Layout ------------------------------------------------------------ */
  --wrap: 1280px;
  --wrap-narrow: 860px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 68px;

  /* --- Movimiento -------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .16s;
  --t-mid: .32s;
  --t-slow: .6s;
}

/* Escala tipográfica reducida en pantallas chicas */
@media (max-width: 720px) {
  :root {
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
    --fs-4xl: 3rem;
    --header-h: 60px;
    /* En un teléfono el extremo chico de la escala sube: por debajo de
       11px el texto deja de leerse con el aparato en la mano. */
    --fs-nano:  .6875rem; /* 11 */
    --fs-micro: .6875rem; /* 11 */
    --fs-xs:    .75rem;   /* 12 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t-mid: .01ms; --t-slow: .01ms; }
}