/* =========================================================================
   El Panita Barbershop — Design tokens
   Paleta tomada del negocio real: el negro del rotulo y de las capas, el gris
   grafito de las paredes del local y el dorado de la rotulacion "BARBERSHOP".
   ========================================================================= */

:root {
  /* --- Color ------------------------------------------------------------ */
  --ink: #0b0b0c;          /* negro base, el del rotulo y las capas */
  --ink-raised: #101113;   /* seccion alterna */
  --graphite: #16171a;     /* superficies elevadas */
  --smoke: #202226;        /* gris de las paredes del local */
  --line: #26282d;         /* hairline estandar */
  --line-soft: #1b1d21;

  --bone: #ece9e3;         /* blanco roto, texto principal */
  --bone-dim: #b7b5b0;     /* texto secundario */
  --muted: #83858c;        /* texto terciario / metadatos */

  --gold: #c9a961;         /* dorado del rotulo */
  --gold-bright: #e0c68d;
  --gold-deep: #9c7f42;

  --focus: #e0c68d;

  /* Velos sobre fotografia */
  --veil-hero: linear-gradient(
    180deg,
    rgba(11, 11, 12, 0.88) 0%,
    rgba(11, 11, 12, 0.58) 30%,
    rgba(11, 11, 12, 0.8) 68%,
    rgba(11, 11, 12, 0.97) 100%
  );
  --veil-soft: linear-gradient(180deg, rgba(11, 11, 12, 0) 40%, rgba(11, 11, 12, 0.88) 100%);

  /* Filo metalico: se usa en hairlines y bordes, nunca en fondos grandes */
  --metal: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 169, 97, 0.05) 12%,
    rgba(224, 198, 141, 0.55) 50%,
    rgba(201, 169, 97, 0.05) 88%,
    transparent 100%
  );

  /* --- Tipografia ------------------------------------------------------- */
  --font-display: "Bodoni Moda", "Didot", "Georgia", "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida: cada paso se adapta entre 360px y 1440px de viewport */
  --t-hero: clamp(2.85rem, 1.15rem + 7.6vw, 8.25rem);
  --t-h2: clamp(2rem, 1.1rem + 4vw, 4.25rem);
  --t-h3: clamp(1.35rem, 1.05rem + 1.3vw, 2rem);
  --t-lead: clamp(1.06rem, 0.98rem + 0.42vw, 1.35rem);
  --t-body: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);
  --t-small: 0.875rem;
  --t-label: 0.69rem;

  --lh-tight: 0.94;
  --lh-snug: 1.18;
  --lh-body: 1.68;

  --track-label: 0.24em;
  --track-display: -0.022em;

  /* --- Ritmo espacial --------------------------------------------------- */
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3.5rem);
  --section-y: clamp(4.5rem, 2.4rem + 8.6vw, 10.5rem);
  --stack: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  --max-w: 82.5rem;   /* 1320px — ancho maximo del contenido */
  --max-text: 38rem;  /* medida comoda de lectura */

  /* --- Movimiento ------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  --nav-h: 4.5rem;
  --radius: 2px; /* casi recto: el look es editorial, no de tarjeta */
}

@media (min-width: 60rem) {
  :root {
    --nav-h: 5.5rem;
  }
}