/* =============================================================================
   AlvaradoGraphics — Tokens de diseño
   =============================================================================
   Dirección: editorial de lujo. Papel marfil, tinta cálida, un único acento
   terracota y tipografía display con serifa de alto contraste.

   Se abandona a propósito el índigo-violeta anterior (#6366f1 → #8b5cf6): es la
   paleta por defecto de miles de plantillas y era lo que hacía que el sitio se
   leyera como genérico por muy bien resuelto que estuviera el resto.
   ========================================================================== */

:root {
  color-scheme: light;

  /* -- Color: papel y tinta ------------------------------------------------ */
  /* Los neutros llevan una pizca de amarillo/rojo en lugar de ser grises puros.
     Un gris neutro se lee frío y digital; este se lee como papel de calidad. */
  --paper:            #FAF8F5;
  --paper-sunk:       #F2EEE8;
  --paper-raised:     #FFFFFF;
  --paper-inverse:    #14110F;

  --ink:              #14110F;
  --ink-soft:         #47403A;
  --ink-muted:        #6B635B;
  --ink-faint:        #9A9089;

  /* -- Acento -------------------------------------------------------------- */
  /* Un solo acento, usado con moderación. La contención es lo que separa el
     lujo del ruido: cuando todo resalta, nada resalta. */
  --accent:           #C0603A;
  --accent-hover:     #A54E2C;
  --accent-soft:      rgba(192, 96, 58, 0.10);
  --accent-line:      rgba(192, 96, 58, 0.28);

  /* -- Líneas y velos ------------------------------------------------------ */
  --rule:             rgba(20, 17, 15, 0.12);
  --rule-strong:      rgba(20, 17, 15, 0.22);
  --veil:             rgba(20, 17, 15, 0.04);

  /* -- Tipografía ---------------------------------------------------------- */
  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype',
                  Palatino, Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
                  'Liberation Mono', monospace;

  /* Escala fluida. Cada paso interpola entre 360px y 1440px de viewport, así
     que no hay saltos bruscos en tablets — el punto donde suelen romperse las
     escalas basadas solo en media queries. */
  --text-2xs:  0.6875rem;                                  /* 11px  */
  --text-xs:   0.75rem;                                    /* 12px  */
  --text-sm:   0.8125rem;                                  /* 13px  */
  --text-base: clamp(0.9375rem, 0.90rem + 0.16vw, 1.0625rem);
  --text-md:   clamp(1.0625rem, 1.00rem + 0.28vw, 1.25rem);
  --text-lg:   clamp(1.25rem,  1.14rem + 0.46vw,  1.5rem);
  --text-xl:   clamp(1.5rem,   1.30rem + 0.88vw,  2.125rem);
  /* Los mínimos están calculados para que un titular de ~18 caracteres quepa a
     360 px de ancho sin desbordar. Con valores más altos, el titular del hero
     se salía de la pantalla en móvil y quedaba recortado. */
  --text-2xl:  clamp(1.75rem,  1.45rem + 1.35vw,  3.25rem);
  --text-3xl:  clamp(2rem,     1.62rem + 1.70vw,  4.5rem);
  --text-4xl:  clamp(2.25rem,  1.60rem + 2.90vw,  6.5rem);
  --text-5xl:  clamp(2.6rem,   1.72rem + 3.90vw,  9rem);

  /* Los títulos display van con interlineado corto y tracking negativo: es lo
     que da esa densidad de portada de revista. Cuanto mayor el tamaño, más
     cerrado debe ir el tracking para que no se vea disperso. */
  --leading-display: 0.94;
  --leading-tight:   1.12;
  --leading-snug:    1.35;
  --leading-body:    1.65;
  --leading-loose:   1.75;

  --tracking-display: -0.035em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-label:   0.14em;

  /* -- Ritmo espacial ------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Separación vertical entre secciones: generosa a propósito. El aire es
     gratis y es lo que más distingue un sitio caro de uno apretado. */
  --section-y:   clamp(5rem, 10vw, 9.5rem);
  --section-y-sm: clamp(3.5rem, 7vw, 6rem);

  /* -- Retícula ------------------------------------------------------------ */
  --shell-max:   87.5rem;   /* 1400px */
  --shell-text:  44rem;     /* medida cómoda de lectura: ~72 caracteres */
  --shell-pad:   clamp(1.25rem, 5vw, 5rem);

  /* -- Radios -------------------------------------------------------------- */
  /* Casi rectos. Los 16-24px de la versión anterior son la firma visual de las
     plantillas de 2022; el borde vivo se lee como impreso. */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-pill: 100px;

  /* -- Sombras ------------------------------------------------------------- */
  /* Cálidas y muy suaves: una sombra gris-azulada sobre papel marfil delata al
     instante que los tonos no fueron elegidos juntos. */
  --shadow-sm: 0 1px 2px rgba(43, 33, 24, 0.05),
               0 2px 6px rgba(43, 33, 24, 0.04);
  --shadow-md: 0 2px 4px rgba(43, 33, 24, 0.04),
               0 8px 24px rgba(43, 33, 24, 0.07);
  --shadow-lg: 0 4px 8px rgba(43, 33, 24, 0.04),
               0 20px 48px rgba(43, 33, 24, 0.10);
  --shadow-xl: 0 8px 16px rgba(43, 33, 24, 0.05),
               0 32px 72px rgba(43, 33, 24, 0.14);

  /* -- Movimiento ---------------------------------------------------------- */
  /* Curvas propias. El `ease` por defecto del navegador es la razón por la que
     tantas animaciones se sienten baratas: arranca y frena de forma simétrica,
     que no es como se mueve nada en el mundo real. */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);

  --duration-fast:   180ms;
  --duration-base:   340ms;
  --duration-slow:   620ms;
  --duration-reveal: 900ms;

  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-float:   1100;
}

/* =============================================================================
   Modo tinta (oscuro)
   =============================================================================
   No es el mismo diseño con los colores invertidos: el negro lleva rojo y
   amarillo dentro (#14110F, no #000), las líneas se aclaran y el acento sube de
   luminosidad para conservar el contraste sobre fondo oscuro.
   ========================================================================== */

[data-theme="dark"] {
  color-scheme: dark;

  --paper:         #14110F;
  --paper-sunk:    #0E0C0A;
  --paper-raised:  #1C1815;
  --paper-inverse: #FAF8F5;

  --ink:           #F7F4F0;
  --ink-soft:      #C4BCB3;
  --ink-muted:     #948B82;
  --ink-faint:     #6B635B;

  --accent:        #E0805A;
  --accent-hover:  #EE9670;
  --accent-soft:   rgba(224, 128, 90, 0.12);
  --accent-line:   rgba(224, 128, 90, 0.32);

  --rule:          rgba(250, 248, 245, 0.13);
  --rule-strong:   rgba(250, 248, 245, 0.24);
  --veil:          rgba(250, 248, 245, 0.04);

  /* Sobre fondo oscuro las sombras difusas no se ven; lo que da profundidad es
     el borde claro, así que se sustituyen por sombras muy densas y contenidas. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.52);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.62);
}