/* ============================================================
   Nidu PWA — Design tokens

   El vocabulario es el del prototipo (`02 Branding/Nidu Prototipo.dc.html`,
   implementado en `app/` en la raíz del repo): `--green`, `--ink`, `--line`,
   `--dur-*`, `--sh-*`. Antes acá los nombres estaban en español (`--verde`,
   `--texto`, `--borde`). Se cambió en esa dirección y no al revés porque el
   diseño vive en components.css, que viene del prototipo con esos nombres:
   traducir 1.600 líneas a mano era la vía segura de introducir errores.

   Los tokens que el prototipo NO tiene —tipografía, espaciado, layout,
   estado/feedback, z-index— se conservan tal cual: son de la app real, no del
   mockup, y nada del diseño depende de que cambien.

   Regla que se mantiene del prototipo: si falta un color, sale de ahí. No se
   inventan valores en este archivo.
   ============================================================ */
:root {
  /* --- Marca (rediseño web/PWA ago 2026: paleta del handoff) ---
     Regla del handoff: 80% neutros · 15% verde NIDU · 5% funcionales. Los
     nombres son los que ya usa toda la app; cambian los valores, así cada
     pantalla hereda el look nuevo (verde profundo + marfil). */
  --green: #10614B;                    /* Verde NIDU: CTA, links, trazos, énfasis */
  --green-hover: #0B3C2F;              /* hover del primario y secciones oscuras */
  --green-dk: #0B3C2F;                 /* verde profundo (fondos oscuros, texto fuerte) */
  --green-med: #2E9070;               /* verde medio: bordes en hover, acentos */
  --green-soft: #E6F0EA;              /* verde pálido: fondos de pill y chips */
  --mint: #7FD3B0;                    /* énfasis sobre fondo oscuro */
  --sage: #9FC4B4;                    /* rótulos y texto secundario sobre fondo oscuro */
  --cream: #EFECE4;                   /* arena: superficie secundaria */
  --slate: #3E566B;                   /* azul grisáceo (info) */
  --coral: #9A4331;                   /* coral: conflicto / falta un dato */
  --ink: #15211C;                     /* grafito: texto principal */
  --line: #E2DED4;                    /* bordes y divisores */
  --surface: #FFFFFF;
  --muted: #59665F;                   /* gris verdoso: texto secundario */
  --grad: linear-gradient(135deg, #10614B, #0B3C2F);

  /* Fondo de la app: marfil plano del handoff (nunca blanco clínico). */
  --app-bg: #F7F5F0;
  --app-bg-fin: #F7F5F0;

  /* --- Texto (tres niveles) --- */
  --ink-2: #59665F;        /* secundario */
  --ink-3: #8A948E;        /* terciario / placeholders (solo meta redundante) */
  --ink-inv: #FFFFFF;

  /* --- Superficies --- */
  --surface-2: #FCFBF8;    /* marfil claro: superficies alternas */
  --surface-sunk: #EFECE4; /* arena: hundido / chips neutros */

  /* --- Estado / feedback (léxico del handoff) --- */
  --exito: #2E9070;
  --exito-bg: #E6F0EA;
  --alerta: #9A4331;       /* coral — "Falta un dato" / conflicto */
  --alerta-bg: #FAEBE6;
  --alerta-borde: #EDCCC2;
  --info: #3E566B;
  --info-bg: #E4ECF1;
  --amber: #F2B441;        /* prioridad / vencimiento / punto "Tu día" */
  --amber-ink: #8A6013;
  --amber-bg: #F9F1E1;
  --foco: #10614B;         /* anillo de foco de teclado */

  /* --- Movimiento --- */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --ease-press: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  /* --- Radios --- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 30px;
  --r-pill: 999px;
  --r-nota: 16px;          /* notas de papel: redondeadas, no rectas */

  /* --- Sombras --- */
  --sh-sm: 0 1px 2px rgba(37, 51, 49, .06), 0 2px 8px rgba(37, 51, 49, .05);
  --sh-md: 0 6px 20px rgba(37, 51, 49, .10);
  --sh-lg: 0 16px 44px rgba(37, 51, 49, .16);
  --sh-brand: 0 14px 30px rgba(47, 118, 109, .24);
  /* Notas de papel: sombra proyectada con leve desplazamiento lateral. */
  --nota-sombra: 2px 6px 16px rgba(37, 51, 49, .13);
  --nota-sombra-hover: 3px 12px 26px rgba(37, 51, 49, .20);
  --nota-cinta: rgba(255, 255, 255, .62);

  /* --- Categorías de pendiente ---
     tint = fondo del tile · accent = color fuerte · ink = texto · border = borde
     paper = fondo de la nota de papel en el tablero de Inicio */
  --cat-compra-tint: #FBE6DF;
  --cat-compra-accent: #E98973;
  --cat-compra-ink: #B45A42;
  --cat-compra-border: #F2C9BC;
  --cat-compra-paper: #FBD9CD;

  --cat-vencimiento-tint: #F7E4CF;
  --cat-vencimiento-accent: #D9974A;
  --cat-vencimiento-ink: #95611A;
  --cat-vencimiento-border: #EDCFA6;
  --cat-vencimiento-paper: #FCE7C4;

  --cat-tramite-tint: #DFE8EC;
  --cat-tramite-accent: #5F7E8A;
  --cat-tramite-ink: #3B535D;
  --cat-tramite-border: #C6D6DC;
  --cat-tramite-paper: #D6E6EC;

  --cat-objetivo-tint: #D3E9E3;
  --cat-objetivo-accent: #2F766D;
  --cat-objetivo-ink: #005A50;
  --cat-objetivo-border: #B4D8CF;
  --cat-objetivo-paper: #D2EAD8;

  --cat-recordatorio-tint: #F3E0E6;
  --cat-recordatorio-accent: #C77B92;
  --cat-recordatorio-ink: #8E4D62;
  --cat-recordatorio-border: #E6C6D1;
  --cat-recordatorio-paper: #F4D8E1;

  --cat-personal-tint: #EAE3D3;
  --cat-personal-accent: #A69377;
  --cat-personal-ink: #6E5E44;
  --cat-personal-border: #D8CDB6;
  --cat-personal-paper: #ECE4D0;

  /* Recurrente: los que no se cierran, se dan vuelta (listas de compras).
     Verde azulado, primo del petróleo de la marca y distinto del objetivo:
     encabeza el tablero, así que tiene que leerse como "esto está vivo" y no
     competir con el coral de las compras puntuales. */
  --cat-recurrente-tint: #D6EAEE;
  --cat-recurrente-accent: #3E8B96;
  --cat-recurrente-ink: #1F5F69;
  --cat-recurrente-border: #B5D9DF;
  --cat-recurrente-paper: #D3EBEF;

  /* --- Rubros de producto (Compras) --- */
  --shop-super-tint: #D3E9E3;
  --shop-super-deep: #B3DBD0;
  --shop-super-accent: #2F766D;
  --shop-farmacia-tint: #DFE8EC;
  --shop-farmacia-deep: #C3D6DE;
  --shop-farmacia-accent: #5F7E8A;
  --shop-hogar-tint: #F7E4CF;
  --shop-hogar-deep: #EFCEA2;
  --shop-hogar-accent: #D9974A;

  /* --- Etiquetas de prioridad (notas de Inicio) --- */
  --pri-alta-bg: #F3D2C6;
  --pri-alta-fg: #B4442A;
  --pri-media-bg: #F6E2BD;
  --pri-media-fg: #8A5B12;
  --pri-baja-bg: #DBE7DE;
  --pri-baja-fg: #4B6B58;

  /* --- Varios --- */
  --whats: #25D366;
  --clip: #8A968F;
  --track: #E4EAE6;
  --track-dk: #E0E7E3;
  --step-ring: #C9BFA8;

  /* --- Tipografía --- */
  --fuente: "Manrope", system-ui, sans-serif;
  /* Escala de la app (02 Branding/Escala tipografica.md): además de los
     tamaños redondos ya usados en toda la app, suma los .5 que pide esa
     escala (contadores, tabs, botones) — nombrados con guion en vez de
     punto porque un custom property no puede usar ".": --fs-11-5 = 11.5px. */
  --fs-10-5: .65625rem; --fs-11: .6875rem; --fs-11-5: .71875rem; --fs-12: .75rem;
  --fs-12-5: .78125rem; --fs-13: .8125rem; --fs-13-5: .84375rem; --fs-14: .875rem;
  --fs-14-5: .90625rem; --fs-15: .9375rem; --fs-16: 1rem; --fs-17: 1.0625rem;
  --fs-18: 1.125rem; --fs-19: 1.1875rem; --fs-20: 1.25rem; --fs-23: 1.4375rem;
  --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem;
  /* Manrope llega hasta 800 (no tiene 900): --fw-black se alinea a eso, así que
     queda igual a --fw-x —los títulos de pantalla y los nombres de pendientes
     comparten el mismo peso tope, que es exactamente la regla de la fuente. */
  --fw-regular: 400; --fw-semi: 600; --fw-bold: 700; --fw-x: 800; --fw-black: 800;

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

  /* --- Layout --- */
  --app-max: 560px;         /* columna de la app en tablet/desktop */
  --topbar-h: 60px;
  --bottomnav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* --- z-index --- */
  --z-nav: 40; --z-topbar: 45; --z-fab: 46; --z-sheet: 60; --z-toast: 80; --z-banner: 50;
}