/* Pink — Design tokens
 * Sistema visual para creative studios (y adaptable a portfolios UGC premium).
 * Referencia: https://the-gum.com/
 * Cada valor de este archivo tiene entrada en `mediciones.md`.
 */

:root {

  /* Color · paleta canónica --------------------------------------------- */
  --pink:      #FF73A4;   /* acento cromático + fondo de sección voz-alta */
  --egg:       #FFFAED;   /* fondo base + tinta contrastante sobre color  */
  --nut:       #C3BBA7;   /* tan/avena · cuerpo secundario + fondos alt. */
  --ink:       #000000;   /* tinta pura para titulares sobre egg          */
  --egg-hard:  #EEE7D3;   /* auxiliar · nav en reposo, "casi invisible"   */

  /* Superficie por defecto */
  --bg:        var(--egg);
  --fg:        var(--ink);

  /* Overlays -------------------------------------------------------------*/
  --backdrop-nut: rgba(0, 0, 0, 0.25);  /* .workDetail__backdrop           */

  /* Tipografía · familias ------------------------------------------------*/
  /* Display: Boldonse (Google Fonts, OFL) — sustituto SIL de social-gothic
   * Fallback stack: system + Archivo Black para robustez si Boldonse falla. */
  --font-display: 'Boldonse', 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-text:    'Archivo', system-ui, sans-serif;

  /* Tipografía · escala viewport-relative --------------------------------
   * Titulares y nav-letters escalan con vw/vh — ver mediciones.md */
  --title-size:        5.5vw;   /* .title, section titles, us title       */
  --title-size-mobile: 8vw;     /* override en móvil portrait <767px       */
  --title-line:        1;

  --nav-letter-size:            8vh;   /* desktop · portfolio 9 items       */
  --nav-letter-size-land-coarse: 7vh;
  --nav-letter-size-portrait-md: 7vh;
  --nav-letter-size-mobile:      6vh;

  --nav-svg-letter-size:            6vh;
  --nav-svg-letter-size-land-coarse: 6vh;
  --nav-svg-letter-size-portrait-md: 6vh;
  --nav-svg-letter-size-mobile:      5vh;

  /* Tipografía · cuerpo (px) ---------------------------------------------*/
  --size-lead:        35px;   /* Archivo 300 · ls -1.05px                  */
  --size-lead-md:     45px;   /* tablet portrait                            */
  --size-lead-mobile: 25px;   /* móvil <767                                 */

  --size-para:        24px;   /* Archivo 300 · ls -0.72px                  */
  --size-para-md:     30px;   /* tablet portrait                            */

  --size-list:        20px;   /* Archivo 300 · ls -0.6px (li en servicios) */
  --size-list-md:     24px;   /* tablet portrait                            */

  --size-sub-title:   24px;   /* social-gothic 700 uppercase ls -0.72px    */
  --size-cursor:      30px;   /* Archivo 500 · cursor-indicator + scroll   */
  --size-social:      18px;   /* nav secondary links                        */
  --size-legal:       14px;   /* legal + address                           */
  --size-body:        16px;   /* body por defecto                          */

  /* Tipografía · letter-spacing ------------------------------------------*/
  /* Regla del estudio: ls ≈ -0.03em (proporcional al tamaño).             */
  --ls-title:      -0.03em;   /* 115.2 × -0.03 = -3.456px ✅                */
  --ls-lead:       -0.03em;   /* 35   × -0.03 = -1.05px  ✅                */
  --ls-para:       -0.03em;   /* 24   × -0.03 = -0.72px  ✅                */
  --ls-list:       -0.03em;   /* 20   × -0.03 = -0.6px   ✅                */
  --ls-legal:      -0.03em;   /* 14   × -0.03 = -0.42px  ✅                */
  --ls-cursor:     -0.03em;   /* 30   × -0.03 = -0.9px   ✅                */

  /* Tipografía · pesos ---------------------------------------------------*/
  --w-display:  700;
  --w-text-lt:  300;   /* Archivo Light · body + lead                       */
  --w-text-md:  500;   /* Archivo Medium · sub-titulares + email hero      */

  /* Layout ---------------------------------------------------------------*/
  --pad-x-desktop: 40px;  /* padding lateral desktop (calibra por sección) */
  --pad-x-mobile:  10px;  /* móvil: width: calc(100vw - 20px)              */

  --toggle-size:  55px;   /* .toggleMenu 55×55                              */
  --toggle-top:   20px;
  --toggle-right: 20px;

  --nav-z:        20;
  --toggle-z:     20;
  --cursor-z:     9;
  --backdrop-z:   12;

  /* Motion · duraciones --------------------------------------------------*/
  --dur-fast:   0.2s;   /* cursor opacity                                    */
  --dur-swap:   0.3s;   /* opacity swaps (menu-link, color hover, toggle)   */
  --dur-move:   0.4s;   /* transform swaps                                  */
  --dur-backdrop: 0.35s;/* workDetail__backdrop                             */
  --dur-cross:  0.5s;   /* front→back cross-fade                            */
  --dur-nav:    0.6s;   /* nav slide-up                                     */
  --dur-letter: 0.6s;   /* keyframe letterIn                                */
  --dur-bounce: 1s;     /* keyframe bounce                                  */

  /* Motion · easings -----------------------------------------------------*/
  --ease-nav:    cubic-bezier(0.7, 0, 0.2, 1);  /* nav slide + primary swaps */
  --ease-basic:  ease;                          /* letterIn, bounce         */

  /* Motion · stagger -----------------------------------------------------*/
  --stagger-letter: 40ms;    /* delay entre letras del title reveal        */

  /* Alturas de section por defecto --------------------------------------*/
  --section-h:        100vh;
  --section-h-coarse: 100svh;   /* iOS URL bar safe                        */
  --section-h-mobile: 100dvh;
}

/* -----------------------------------------------------------------------
 * Keyframes canónicos del sistema
 * ----------------------------------------------------------------------- */

@keyframes letterIn {
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-10px); }
}

/* -----------------------------------------------------------------------
 * Overrides responsive · corresponden a las media queries de la referencia
 * (los componentes leerán las variables sin volver a declarar sizes).
 * ----------------------------------------------------------------------- */

@media (max-width: 1024px), (pointer: coarse) {
  :root {
    /* En coarse pointer el swap cromático del nav se apaga a nut */
    --nav-hover-color: var(--nut);
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  :root {
    --nav-letter-size:     var(--nav-letter-size-land-coarse);
    --nav-svg-letter-size: var(--nav-svg-letter-size-land-coarse);
  }
}

@media (pointer: coarse) and (orientation: portrait) and (min-width: 768px) {
  :root {
    --nav-letter-size:     var(--nav-letter-size-portrait-md);
    --nav-svg-letter-size: var(--nav-svg-letter-size-portrait-md);
    --size-lead:           var(--size-lead-md);
    --size-para:           var(--size-para-md);
    --size-list:           var(--size-list-md);
  }
}

@media (max-width: 767px) {
  :root {
    --title-size:          var(--title-size-mobile);
    --nav-letter-size:     var(--nav-letter-size-mobile);
    --nav-svg-letter-size: var(--nav-svg-letter-size-mobile);
    --size-lead:           var(--size-lead-mobile);
    --pad-x-desktop:       var(--pad-x-mobile);
  }
}

/* Default color del hover del nav (fine pointer / desktop) */
:root {
  --nav-hover-color: var(--pink);
}