/* ==========================================================
   Sakuro — tokens del sistema de diseño
   Paleta: Esmeralda (neutros hue 165 · acento hue 160)
   + Señal cálida (coral hue 358 → ámbar hue 28) para bloques,
     degradados y gráficos. El esmeralda sigue siendo la acción.
   Todos los valores se definen aquí y solo aquí.
   ========================================================== */

:root {
  /* ---------- Escala neutra tintada con el hue de la marca (160) ----------
     Un único hue (el del esmeralda) atraviesa toda la UI: fondos, superficies,
     bordes y textos salen de esta escala, no de grises puros. */
  --neutral-950: hsl(160 24% 4%);
  --neutral-900: hsl(160 20% 8%);
  --neutral-800: hsl(160 18% 12%);
  --neutral-700: hsl(160 16% 16%);
  --neutral-600: hsl(160 14% 24%);
  --neutral-500: hsl(160 12% 40%);
  --neutral-400: hsl(160 12% 62%);
  --neutral-300: hsl(160 14% 76%);
  --neutral-200: hsl(160 16% 86%);
  --neutral-100: hsl(160 20% 95%);

  /* ---------- Escala de acento esmeralda (hue 160) ---------- */
  --emerald-900: hsl(160 70% 12%);
  --emerald-800: hsl(160 70% 20%);
  --emerald-700: hsl(160 70% 30%);
  --emerald-600: hsl(160 70% 40%);
  --emerald-500: hsl(160 70% 48%); /* base · #25D097 */
  --emerald-400: hsl(160 70% 58%);
  --emerald-300: hsl(160 70% 70%);
  --emerald-200: hsl(160 70% 82%);
  --emerald-100: hsl(160 70% 92%);

  /* ---------- Señal cálida: coral (hue 358) → ámbar (hue 28) ---------- */
  --coral-800: hsl(358 70% 18%);
  --coral-600: hsl(358 85% 52%);
  --coral-500: hsl(358 100% 62%);
  --coral-300: hsl(358 100% 78%);
  --amber-500: hsl(26 100% 58%);
  --amber-300: hsl(32 100% 74%);

  /* ---------- Roles (lo que usa el código) ---------- */
  --color-bg:             var(--neutral-950);
  --color-surface:        var(--neutral-900);
  --color-surface-raised: var(--neutral-800);
  --color-border:         var(--neutral-700);
  --color-border-strong:  var(--neutral-600);

  --color-text:           var(--neutral-100);
  --color-text-muted:     var(--neutral-400);

  --color-accent:         var(--emerald-500);
  --color-accent-hover:   var(--emerald-400);
  --color-accent-subtle:  var(--emerald-900);
  --color-on-accent:      var(--neutral-950);

  --color-text-soft:      var(--neutral-300);
  --color-text-dim:       var(--neutral-600);
  --color-border-hover:   var(--neutral-500);
  --color-accent-active:  var(--emerald-600);
  --color-success:        var(--emerald-300);
  --color-marker:         var(--neutral-300);

  --color-warm:           var(--coral-500);
  --color-warm-2:         var(--amber-500);
  --color-on-warm:        var(--neutral-950);
  --color-on-warm-hover:  color-mix(in srgb, var(--neutral-950) 12%, transparent); /* velo de tinta sobre el bloque cálido */

  --gradient-warm: linear-gradient(100deg, var(--coral-500), var(--amber-500));
  /* Botón principal: esmeralda claro → base → profundo; el hover desplaza el degradado */
  --gradient-accent: linear-gradient(110deg, var(--emerald-300), var(--emerald-500) 45%, var(--emerald-600) 75%, var(--emerald-400));
  --gradient-line: linear-gradient(90deg, var(--emerald-500), var(--coral-500) 60%, var(--amber-500));

  /* Campos de color desenfocados (fondos radiales) */
  --field-coral-soft:  color-mix(in srgb, var(--coral-500) 14%, transparent);
  --gradient-graph:    radial-gradient(40% 50% at 50% 50%, var(--field-coral-soft), transparent 70%);
  --gradient-preview:  radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--coral-500) 35%, transparent), transparent 70%);

  --color-bg-veil:        hsl(165 20% 5% / 0.92);

  /* Error: fuera del hue por necesidad semántica */
  --color-danger:         hsl(8 75% 60%);
  --color-danger-text:    hsl(8 85% 72%);

  /* ---------- Tipografía ---------- */
  --font-display: "Prompt", system-ui, sans-serif;
  --font-body:    "Geist", "Inter", system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace; /* solo para código */

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-2xl:  clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-3xl:  clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem);
  --fs-hero: clamp(2.75rem, 1.2rem + 5.4vw, 5.5rem);

  --fw-light: 300;

  --ls-display: -0.035em;
  --ls-heading: -0.02em;
  --measure: 34rem;
  --measure-sm: 22rem;   /* textos de paso */
  --measure-lg: 40rem;   /* apoyo del hero */
  --measure-xl: 60rem;   /* bloque del titular del hero */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;

  --lh-display: 1;
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  /* ---------- Layout ---------- */
  --container-max: 85rem; /* 1360px */
  --section-pad-block:  clamp(1.15rem, 5vw, 5rem);
  --section-pad-inline: clamp(1.15rem, 5vw, 5rem);

  /* ---------- Gaps ---------- */
  --gap-xs: 0.25rem;
  --gap-sm: 0.75rem;
  --gap:    1.15rem;
  --gap-lg: 2rem;
  --gap-xl: 3.5rem;

  /* ---------- Controles ---------- */
  --control-h:     3rem;
  --control-h-sm:  2.5rem;
  --control-h-touch: 2.75rem;
  --control-pad:    1.5rem;
  --control-pad-sm: 1.125rem;

  /* ---------- Marcadores (puntos de las anotaciones y del proceso) ---------- */
  --marker:    7px;
  --marker-lg: 9px;

  /* ---------- Gráficos ---------- */
  --dot-grid: radial-gradient(circle, var(--neutral-600) 1px, transparent 1.4px) 0 0 / 18px 18px;
  --grid-size: 28px;
  --color-grid-line: hsl(160 25% 60% / 0.06); /* tintada con el hue de marca, muy transparente */
  /* Cuadrícula sutil tipo blueprint — líneas de 1px, muy tenues */
  --grid-fine: linear-gradient(to right,  var(--color-grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
               linear-gradient(to bottom, var(--color-grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size);
  --window-bar-h: 2.25rem;

  /* ---------- Radios ---------- */
  --radius-sm: 0.375rem;
  --radius:    0.75rem;
  --radius-lg: 1.25rem;

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur:      300ms;
  --dur-slow: 700ms;
  --dur-scroll-preview: 5s; /* recorrido de las capturas de proyecto al pasar el ratón */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Cabecera ---------- */
  --header-h: 4.5rem;
  --footer-fx-h: clamp(10rem, 22vw, 18rem); /* franja de fondo dinámico del pie */
}

/* ---------- Tokens con alcance ----------
   El brillo del hero sigue al cursor: depende de --mx/--my, que JS
   escribe en .hero. Por eso se declara aquí, donde esas variables existen,
   y no en :root (allí se resolverían a 0 y dejaría de moverse). */
.hero__glow {
  --gradient-hero-glow:
    radial-gradient(42% 48% at calc(52% + var(--mx, 0) * 6%) calc(50% + var(--my, 0) * 6%), color-mix(in srgb, var(--coral-500) 42%, transparent), transparent 72%),
    radial-gradient(26% 30% at calc(64% + var(--mx, 0) * 4%) calc(40% + var(--my, 0) * 4%), color-mix(in srgb, var(--amber-500) 30%, transparent), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-scroll-preview: 0ms;
  }
}