/* ==========================================================================
   Tender la Mano · Fase 1 · Dirección A «Constelación»
   Tokens de diseño. Fondo claro por defecto; modo oscuro solo si la persona
   lo elige (botón del pie), nunca por la preferencia del sistema: María pidió
   «no quiero la web tan oscura».
   Paleta: neutros casi sin croma (blanco + carbón) + UN acento: verde profundo.
   Tipografía: Figtree (SIL Open Font License 1.1), autohospedada, una familia.
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fuentes/figtree-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color: neutros (croma mínima hacia el tono del acento, 165) */
  --c-bg: oklch(0.985 0.002 165);
  --c-surface: oklch(0.962 0.006 165);
  --c-surface-2: oklch(0.935 0.01 165);
  --c-ink: oklch(0.23 0.012 165);
  --c-ink-2: oklch(0.39 0.012 165);
  --c-line: oklch(0.86 0.008 165);
  --c-line-strong: oklch(0.62 0.012 165);

  /* Color: el único acento */
  --c-accent: oklch(0.43 0.085 165);
  --c-accent-hover: oklch(0.37 0.08 165);
  --c-accent-ink: oklch(0.985 0.002 165);
  --c-accent-soft: oklch(0.935 0.035 165);
  --c-accent-soft-ink: oklch(0.33 0.07 165);

  /* Estados (derivados de neutros + acento, sin colores nuevos) */
  --c-estado-abierto-bg: var(--c-accent-soft);
  --c-estado-abierto-ink: var(--c-accent-soft-ink);
  --c-estado-completo-bg: var(--c-ink);
  --c-estado-completo-ink: var(--c-bg);
  --c-estado-ejemplo-bg: var(--c-bg);
  --c-estado-ejemplo-ink: var(--c-ink-2);

  /* Constelación */
  --c-estrella: var(--c-ink);
  --c-trazo: var(--c-accent);

  /* v2 (11/10): el cielo del hero. Atardecer CLARO (María: «el cielo no tan oscuro»).
     El texto blanco va solo sobre la zona alta (0-65 %, L <= 0,53): >= 5,3:1. */
  --c-cielo-alto: oklch(0.48 0.085 255);
  --c-cielo-medio: oklch(0.53 0.09 278);
  --c-cielo-bajo: oklch(0.64 0.08 330);
  --c-cielo-horizonte: oklch(0.76 0.07 55);
  --c-cielo-texto: oklch(0.985 0.004 262);
  --c-cielo-estrella: oklch(0.99 0.02 90);

  /* Tipografía */
  --f-display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-display: 680;
  --fw-heading: 640;
  --fw-text: 420;
  --fw-strong: 650;
  --tracking-display: -0.022em;
  --tracking-heading: -0.012em;
  --fs-h1: clamp(2.25rem, 1.55rem + 3.1vw, 3.6rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
  --fs-h3: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --fs-lede: clamp(1.15rem, 1.08rem + 0.4vw, 1.35rem);
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-micro: 0.9375rem;
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.62;

  /* Espaciado */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;
  --gutter: 1rem;
  --max: 72rem;
  --max-text: 40rem;

  /* Forma: tarjetas 12 px, botones y etiquetas en píldora, campos 8 px */
  --r-card: 12px;
  --r-field: 8px;
  --r-button: 999px;
  --r-tag: 999px;
  --border: 1px solid var(--c-line);
  --border-strong: 1px solid var(--c-line-strong);
  --shadow-hover: 0 2px 6px oklch(0.23 0.012 165 / 0.10);

  /* Movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 160ms;
  --dur-base: 220ms;

  /* Capas */
  --z-sticky: 10;
  --z-skip: 20;

  /* Foco */
  --focus: 3px solid var(--c-accent);
  --focus-offset: 3px;

  color-scheme: light;
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}

:root[data-theme="dark"] {
  --c-bg: oklch(0.2 0.01 165);
  --c-surface: oklch(0.24 0.012 165);
  --c-surface-2: oklch(0.28 0.014 165);
  --c-ink: oklch(0.95 0.006 165);
  --c-ink-2: oklch(0.82 0.01 165);
  --c-line: oklch(0.36 0.012 165);
  --c-line-strong: oklch(0.5 0.012 165);
  --c-accent: oklch(0.8 0.1 165);
  --c-accent-hover: oklch(0.86 0.09 165);
  --c-accent-ink: oklch(0.2 0.02 165);
  --c-accent-soft: oklch(0.32 0.05 165);
  --c-accent-soft-ink: oklch(0.92 0.05 165);
  --shadow-hover: 0 2px 6px oklch(0 0 0 / 0.4);
  color-scheme: dark;
}