/*
  Design tokens — Capricornia
  Fuente de verdad del sistema visual. No hardcodear colores, tipografías,
  espaciados ni radios fuera de estas variables.
*/

:root {
  /* ---------- Color: base ---------- */
  --color-ivory: #F5EFE3;        /* fondo dominante */
  --color-ivory-soft: #FBF8F2;   /* superficie de card sobre el fondo */
  --color-ink: #4A3328;          /* texto principal, "tinta" de marca */
  --color-ink-70: rgba(74, 51, 40, 0.7);
  --color-ink-40: rgba(74, 51, 40, 0.4);
  --color-ink-12: rgba(74, 51, 40, 0.12);
  --color-ink-06: rgba(74, 51, 40, 0.06);

  /* ---------- Color: acentos (uno por sección, nunca todos juntos) ---------- */
  --color-lilac: #E7CDF2;   /* identificación / introspección */
  --color-sage: #B6D9B0;    /* ciclos / momentos */
  --color-sky: #8EC5EB;     /* explorá tu carta */
  --color-bronze: #D6B482;  /* Astro-Branding / detalle premium */
  --color-rose: #FFD2D9;    /* acento puntual, nunca fondo de sección completa */
  --color-error: #B3261E;   /* mensajes de error de formularios (envío a Supabase fallido) */

  /* Alias semánticos: mapean acento -> función narrativa (ver fase-1-estrategia.md) */
  --accent-identificacion: var(--color-lilac);
  --accent-ciclos: var(--color-sage);
  --accent-explorar: var(--color-sky);
  --accent-astrobranding: var(--color-bronze);
  --accent-detalle: var(--color-rose);

  /* ---------- Tipografía ---------- */
  --font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Karla", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", cursive; /* toque personal: notas, captions, firma — uso puntual, nunca en textos largos */

  --text-display: clamp(2.75rem, 2rem + 3vw, 4.75rem);
  --text-h1: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  --text-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --text-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --text-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.75rem;

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-relaxed: 1.65;

  --tracking-eyebrow: 0.14em;

  /* ---------- Spacing ---------- */
  --space-3xs: 0.25rem;  /* 4px */
  --space-2xs: 0.5rem;   /* 8px */
  --space-xs: 0.75rem;   /* 12px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128px */
  --space-5xl: 10rem;    /* 160px */

  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* ---------- Layout ---------- */
  --container-wide: 1200px;
  --container-editorial: 720px;

  /* ---------- Radios ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* ---------- Sombra ---------- */
  --shadow-soft: 0 8px 24px rgba(74, 51, 40, 0.08);
  --shadow-hover: 0 16px 40px rgba(74, 51, 40, 0.14);

  /* ---------- Escala del isotipo ---------- */
  /* El trazo es fino (línea simple): por debajo de --logo-xs pierde legibilidad. */
  --logo-xs: 2rem;    /* 32px — favicon / espacios muy chicos, usar con cautela */
  --logo-nav: 3rem;   /* 48px — header, junto al wordmark */
  --logo-md: 4.5rem;  /* 72px — footer, firma de cierre */
  --logo-lg: 7rem;    /* 112px — divisor de sección, "Sobre mí" */
  --logo-xl: 11rem;   /* 176px — momento de marca grande, portada */

  /* ---------- Movimiento ---------- */
  --ease-editorial: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 450ms;
  --duration-slow: 800ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}