/* ==========================================================================
   Agencia Detective — Design tokens
   Paleta: tinta nocturna (vigilancia) + ámbar del isotipo (evidencia)
   ========================================================================== */

:root {
  /* ---- Color: superficies oscuras ---- */
  --ink:            #0A1424;
  --ink-2:          #0E1C31;
  --navy:           #10233F;
  --navy-2:         #16304F;

  /* ---- Color: marca ---- */
  --azure:          #2C6FD1;
  --azure-bright:   #4A90E2;
  --azure-deep:     #1B4E9B;
  --amber:          #F2A93B;
  --amber-deep:     #D08A1C;

  /* ---- Color: superficies claras ---- */
  --paper:          #F5F6F8;
  --paper-2:        #EDEFF3;
  --white:          #FFFFFF;

  /* ---- Color: texto ---- */
  --text:           #0F1B2D;
  --text-soft:      #46536A;
  --slate:          #5A6779;
  --text-invert:    #EEF2F8;
  --text-invert-soft: #9BAAC1;

  /* ---- Color: líneas ---- */
  --rule:           #DDE2EA;
  --rule-strong:    #C6CEDA;
  --rule-dark:      rgba(255, 255, 255, 0.14);
  --rule-dark-soft: rgba(255, 255, 255, 0.08);

  /* ---- Estado ---- */
  --danger:         #C4392F;
  --success:        #1F7A54;

  /* ---- Tipografía ---- */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --fs-display-xl: clamp(2.6rem, 1.6rem + 4.2vw, 4.5rem);
  --fs-display-lg: clamp(2.15rem, 1.5rem + 2.9vw, 3.5rem);
  --fs-display-md: clamp(1.7rem, 1.32rem + 1.7vw, 2.6rem);
  --fs-h3:         clamp(1.2rem, 1.09rem + 0.5vw, 1.45rem);
  --fs-h4:         1.0625rem;
  --fs-lead:       clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:       1.0625rem;
  --fs-sm:         0.9375rem;
  --fs-xs:         0.8125rem;
  --fs-label:      0.75rem;

  --lh-tight:  1.04;
  --lh-snug:   1.22;
  --lh-body:   1.68;

  --tracking-display: -0.032em;
  --tracking-label:   0.18em;

  /* ---- Espaciado ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;

  --section-y: clamp(4.5rem, 2.8rem + 6.4vw, 8rem);
  --gutter:    clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);
  --measure:   68ch;

  /* ---- Contenedores ---- */
  --container:      1220px;
  --container-tight: 940px;

  /* ---- Formas ---- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---- Sombras (tintadas en frío) ---- */
  --shadow-sm: 0 1px 2px rgba(10, 20, 36, 0.07);
  --shadow-md: 0 10px 28px -10px rgba(10, 20, 36, 0.18);
  --shadow-lg: 0 28px 64px -24px rgba(10, 20, 36, 0.30);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 620ms;

  /* ---- Capas ---- */
  /* El panel móvil queda por debajo de la cabecera para que la marca y el
     botón de cierre sigan accesibles mientras el menú está abierto. */
  --z-header: 100;
  --z-nav:    95;
  --z-float:  90;

  --header-h: 76px;
}

@media (max-width: 860px) {
  :root { --header-h: 66px; }
}