/*
  Design tokens
  -------------
  Valores extraídos de https://noechague-site.vercel.app/ (solo estilo, no contenido).
  Todo el sitio consume estas variables: para retocar la identidad visual,
  alcanza con cambiar los valores acá.
*/

:root {
  /* ---- Color ---- */
  --color-bg: #fcfcfc;
  --color-card-bg: #ffffff;

  --color-text-primary: #202020;   /* títulos, texto principal */
  --color-text-secondary: #646464; /* bio, párrafos */
  --color-text-tertiary: #747474;  /* metadata: fechas, contadores */

  --color-border: #e8e8e8;
  --color-focus-ring: #8d8d8d;

  --color-link-underline: #d9d9d9;
  --color-link-underline-hover: #646464;
  --color-link-text-hover: #202020;

  --color-accent-bg: #e7f0ff;
  --color-accent-text: #1a5fd6;

  /* Pill de fondo al hacer hover sobre filas de listas (proyectos/educación) */
  --color-row-hover-bg: rgba(0, 0, 0, 0.04);

  /* ---- Tipografía ---- */
  /* Fuente original del sitio de referencia: Inter self-hosted vía next/font.
     Acá se carga como Google Font, mismo resultado visual sin build step. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-4xl: 2.25rem;  /* 36px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-wide: 0.025em;

  /* ---- Layout / spacing ---- */
  --container-max-width: 43.25rem; /* 692px */
  --container-padding-x: 1.5rem;   /* 24px */
  --container-padding-y-mobile: 3rem;   /* 48px */
  --container-padding-y-desktop: 6rem;  /* 96px */

  --space-section-gap: 6rem;     /* 96px — separación entre secciones (proyectos/contacto) */
  --space-intro-section-gap: 4.125rem; /* 66px — separación entre intro y proyectos */
  --space-heading-gap: 1rem;  /* 16px: heading -> contenido de sección */
  --space-intro-gap: 1.5rem;     /* 24px — entre foto+nombre/profesión y el texto de la bio */
  --space-paragraph-gap: 1rem;   /* mb-4: entre párrafos */
  --space-bio-paragraph-gap: 0.875rem; /* separación entre los párrafos de la bio */
  --space-post-item-gap: 0.25rem; /* 4px — separación entre filas (el padding de cada fila suma el resto) */
  --space-card-padding: 1rem;    /* 16px padding interno de cards */

  /* ---- Bordes ---- */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  --avatar-size: 2.75rem; /* 44px — calza con el alto del bloque nombre+rol (22px + 22px) */

  /* ---- Sombras ---- */
  --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px 0 rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08),
    0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* ---- Transiciones ---- */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-fast: 0.15s;
  --transition-base: 0.2s;
}

/*
  Breakpoint de referencia: 640px (equivalente al "sm" de Tailwind en el sitio
  original). Las custom properties no pueden usarse dentro de @media, así que
  este valor queda hardcodeado en styles.css — si lo cambiás, actualizalo ahí también.
*/