/* ==========================================================================
   TOKENS DE DISEÑO — este es el archivo que editas para cambiar el look.
   Colores, tipografías, tamaños y espacios. site.css solo los usa.
   ========================================================================== */

/* --- Fuentes (alojadas en /fonts, sin servicios externos) ----------------- */
/* font-display: block + precarga en index.html = el texto nunca "salta" de
   tamaño ni de fuente mientras carga. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: block;
}
@font-face {
  font-family: "Cutive Mono";
  src: url("../fonts/cutive-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}

:root {
  /* --- Color --------------------------------------------------------------
     Todo el chrome es monocromo para que tu trabajo (que es el color) mande. */
  --ink:   #000000;   /* fondo oscuro */
  --paper: #ffffff;   /* fondo claro */
  --mist:  #d9d9d9;   /* texto sobre fondo oscuro */
  --ash:   #8f8f8f;   /* líneas, texto secundario */
  --wave-line: #9b9b9b; /* línea plateada de las olas */
  --focus: #ff4fd8;   /* anillo de foco de teclado */

  /* --- Tipografía --------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", Times, serif;
  --font-mono:    "Cutive Mono", "Courier New", Courier, monospace;

  /* Mayúsculas en títulos grandes (tu look actual). Pon "none" para desactivar. */
  --caps-display: uppercase;
  /* Textos pequeños en mono: "none" = minúsculas normales (más legible). */
  --caps-mono: none;

  /* Escala de tamaños. Usan clamp(mín, fluido, máx): crecen suavemente con el
     ancho de la ventana y NUNCA se recalculan por scroll ni por JavaScript. */
  --fs-hero-word: clamp(3.2rem, 11.4vw, 15rem);   /* "PORTAFOLIO" */
  --fs-hero-name: clamp(2.6rem, 7vw, 9rem);       /* "HANS FLORES" */
  --fs-title:     clamp(2.4rem, 6.6vw, 8.5rem);   /* títulos de sección */
  --fs-subtitle:  clamp(1.7rem, 3.2vw, 3.6rem);   /* títulos de proyecto */
  --fs-body:      clamp(1.2rem, 0.9rem + 0.25vw, 1.15rem);
  --fs-small:     clamp(1.2rem, 0.78rem + 0.15vw, 0.95rem);

  --lh-display: 0.95;
  --lh-body: 1.55;
  --tracking-display: 0.01em;

  /* --- Espaciado y layout --------------------------------------------------- */
  --gutter: clamp(1rem, 3vw, 3rem);          /* margen lateral */
  --section-pad: clamp(4rem, 9vw, 9rem);     /* aire vertical entre secciones */
  --max: 1680px;                             /* ancho máximo del contenido */
  --radius-tile: 0;                          /* 0 = esquinas rectas como en tu sitio */
  --wave-h: clamp(2.5rem, 6vw, 6rem);        /* altura de las olas */
}