/* ==========================================================================
   Finde · Tokens
   Única fuente de verdad para color, tipografía, espacio, forma y elevación.
   Si un valor no está acá, no debería existir en el resto del CSS.

   El prototipo es mobile first: los valores de acá son los del teléfono, y
   las pocas variaciones para pantalla grande viven en media queries min-width.
   ========================================================================== */

:root {

  /* --- Color -------------------------------------------------------------
     Cada tono tiene un trabajo y ninguno se parece a su vecino. Las tres
     familias tienen su principal en el mismo escalón (600) para que el
     número signifique lo mismo en todas.
     ---------------------------------------------------------------------- */

  /* Coral · ACCIÓN — lo que se toca */
  --coral-50:  #FFF2F0;   /* fondo de selección, botón secundario */
  --coral-100: #FFD5CC;   /* borde suave */
  --coral-600: #FE5C47;   /* principal */
  --coral-700: #D94535;   /* presionado */

  /* Azul · DESTACADO — lo que se lee. Etiqueta, destaca y explica. */
  --blue-50:   #EDF3FF;
  --blue-100:  #DBE7FF;
  --blue-600:  #2563EB;
  --blue-700:  #1D4FD1;

  /* Verde · DINERO — solo ahorro y confirmación */
  --green-50:  #E6F6EE;
  --green-600: #12916B;
  --green-700: #0C7355;

  /* Acentos de un solo paso. Existen para distinguir personas entre sí
     (ver avatares, D-03) y para nada más. */
  --amber-600: #E0A32E;
  --rose-600:  #C2557E;
  --olive-600: #6B8E3D;

  /* Neutros */
  --ink-900:   #17253C;   /* titulares Y cuerpo */
  --ink-500:   #6E7A8C;   /* secundario */
  --ink-400:   #97A1B0;   /* placeholder */
  --ink-200:   #D9DEE5;   /* borde marcado */
  --ink-100:   #EDEAE4;   /* borde suave sobre crema */
  --ink-50:    #F4F1EB;   /* fondo hundido */

  --cream:     #FFFCF6;   /* fondo de app */
  --surface:   #FFFFFF;   /* superficie de tarjeta */
  --page:      #F2F2F2;   /* lienzo fuera del teléfono */

  /* --- Color · roles -----------------------------------------------------
     Dos colores principales con fronteras duras:
       coral → lo que se toca      azul → lo que se lee
     ---------------------------------------------------------------------- */
  --bg-app:           var(--cream);
  --bg-surface:       var(--surface);
  --bg-sunken:        var(--ink-50);
  --border-subtle:    var(--ink-100);
  --border-strong:    var(--ink-200);
  --text-title:       var(--ink-900);
  --text-body:        var(--ink-900);
  --text-muted:       var(--ink-500);
  --text-placeholder: var(--ink-400);
  --accent:           var(--coral-600);   /* botones, selección, "Cambiar" */
  --accent-pressed:   var(--coral-700);
  --accent-soft:      var(--coral-50);
  --highlight:        var(--blue-600);    /* tags, destacados, progreso, precio */
  --highlight-soft:   var(--blue-50);
  --money:            var(--green-600);
  --money-soft:       var(--green-50);

  /* --- Tipografía · familias -------------------------------------------- */
  --font-logo:    "Manrope", system-ui, sans-serif;      /* solo el logotipo */
  --font-display: "Outfit", system-ui, sans-serif;       /* titulares */
  --font-text:    "DM Sans", system-ui, sans-serif;      /* todo lo demás */

  /* --- Tipografía · escala ---------------------------------------------- */
  /* 2026-09-13: un escalón menos en todo (md 15→14, 3xl 28→24). Jerson, desde
     su celular: "siento que todo se ve enorme". WhatsApp no cambia: usa el
     tamaño del WhatsApp real. */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 21px;
  --text-3xl: 24px;

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-normal:1.5;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;

  /* --- Espacio (escala de 4) -------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  --gutter: var(--space-5);   /* margen lateral de pantalla */

  /* --- Forma ------------------------------------------------------------ */
  --radius-sm:   10px;
  --radius-md:   14px;   /* inputs */
  --radius-lg:   18px;   /* tiles, ítems de lista */
  --radius-xl:   22px;   /* tarjetas */
  --radius-2xl:  28px;   /* hojas modales */
  --radius-pill: 999px;  /* botones y chips */

  --border-width: 1px;
  --border-width-selected: 2px;

  /* --- Elevación -------------------------------------------------------- */
  --shadow-card:   0 1px 2px rgba(23, 37, 60, .04), 0 4px 14px rgba(23, 37, 60, .06);
  --shadow-raised: 0 2px 6px rgba(23, 37, 60, .06), 0 12px 28px rgba(23, 37, 60, .10);
  --shadow-accent: 0 6px 18px rgba(254, 92, 71, .28);
  --shadow-sheet:  0 -8px 40px rgba(23, 37, 60, .18);

  /* --- Toque ------------------------------------------------------------ */
  --tap-min:    44px;
  --control-h:  52px;   /* inputs y botones */

  /* --- Movimiento ---------------------------------------------------------
     --ease es la curva de entrada (decelerate): todo lo que aparece la usa.
     --ease-in es la de salida (accelerate) — la asimetría entrada/salida es
     lo que hace que algo se sienta físico y no mecánico. Ver
     prototipo/motion.html para el lenguaje completo y docs/decisiones.md D-16.
     ------------------------------------------------------------------------ */
  --ease:    cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --stagger-step: 30ms;   /* delta entre ítems en una aparición en cascada */

  /* D-34: dos resortes, calculados como resorte amortiguado (ver
     movimiento-propuesta.html). CSS `linear()` con los puntos de la curva.
     suave (ζ 0.72, sobrepasa 4 %)  → lo que se acomoda: tarjetas, dígitos.
     vivo  (ζ 0.55, sobrepasa 13 %) → lo pequeño que se marca: etiquetas, el toque. */
  --spring-suave: linear(0, 0.02, 0.071, 0.143, 0.229, 0.321, 0.415, 0.506, 0.592, 0.671, 0.742, 0.804, 0.857, 0.902, 0.939, 0.968, 0.992, 1.009, 1.022, 1.03, 1.035, 1.038, 1.038, 1.037, 1.035, 1.032, 1.029, 1.025, 1.022, 1.018, 1.015, 1.012, 1.009, 1.007, 1.005, 1.003, 1);
  --spring-vivo: linear(0, 0.044, 0.156, 0.306, 0.47, 0.63, 0.775, 0.895, 0.989, 1.057, 1.099, 1.121, 1.126, 1.119, 1.104, 1.085, 1.064, 1.044, 1.026, 1.011, 1, 0.992, 0.987, 0.985, 0.984, 0.985, 0.987, 0.99, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.002, 1.002, 1);

  /* --- Marco del teléfono (solo a partir de 480 px) --------------------- */
  --phone-w: 390px;
  --phone-h: 844px;
  --phone-radius: 44px;
}