/* Wise design system — tokens importados desde Claude Design
   (proyecto "Imágenes en placeholders", ui_kits/checks).
   Deep moss con lime voltage: Forest Ink cubre superficie, el lime es puntuación.
   NO editar a mano: es la copia fiel del sistema. Los estilos propios de la app
   viven en app.css y sólo consumen estas variables. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

:root {
  /* ---- Marca y verdes ---- */
  --color-forest-ink: #163300;    /* verde oscuro dominante: nav, secciones oscuras, texto */
  --color-lime-voltage: #9fe870;  /* lima eléctrico: acentos, tabs activos, highlights */
  --color-spruce: #054d28;        /* verde oscuro secundario: superficies sobre oscuro */
  --color-linen-mist: #e2f6d5;    /* lavado verde pálido: superficies suaves, hover */
  --color-checks-green: #22b573;  /* verde del logo Checks — CTA de la marca */
  --color-checks-green-dark: #108050;

  /* ---- Acentos de apoyo (decorativos, baja frecuencia) ---- */
  --color-signal-blue: #0b4c72;
  /* Ámbar de advertencia. Estaba repetido a mano en cinco sitios entre
     app.js y app.css; aquí queda una sola vez. */
  --color-warn-amber: #e8a33d;
  --color-alarm-red: #cb272f;

  /* ---- Neutros: cálidos, con tinte verde, nunca negro puro ---- */
  --color-charcoal: #454745;   /* texto de cuerpo */
  --color-obsidian: #0e0f0c;   /* titulares display, contraste máximo */
  --color-pebble: #868685;     /* texto secundario apagado, bordes de input */
  --color-slate: #6a6c6a;      /* texto de apoyo, etiquetas de ayuda */
  --color-fog: #e8ebe6;        /* superficies de tarjeta, divisores */
  --color-paper: #ffffff;      /* lienzo de página */

  /* ---- Superficies (escalera de elevación) ---- */
  --surface-paper: var(--color-paper);
  --surface-fog: var(--color-fog);
  --surface-linen-mist: var(--color-linen-mist);
  --surface-lime-voltage: var(--color-lime-voltage);
  --surface-forest-ink: var(--color-forest-ink);

  /* ---- Alias semánticos ---- */
  --text-primary: var(--color-charcoal);
  --text-display: var(--color-obsidian);
  --text-muted: var(--color-slate);
  --text-subtle: var(--color-pebble);
  --text-on-dark: var(--color-paper);
  --text-accent-on-dark: var(--color-lime-voltage);
  --border-hairline: var(--color-pebble);
  --border-emphasis: var(--color-forest-ink);
  --accent: var(--color-lime-voltage);
  --accent-ink: var(--color-forest-ink);

  /* ---- Tipografía ----
     'Wise Sans' es una fuente propietaria y NO se distribuye: se sustituye por
     Inter 900 con tracking apretado, que es el reemplazo documentado. */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wise-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Escala tipográfica — tamaño / interlineado / tracking */
  --text-micro: 12px;      --leading-micro: 1.63;      --tracking-micro: -0.036px;
  --text-caption: 14px;    --leading-caption: 1.55;    --tracking-caption: -0.07px;
  --text-body-sm: 16px;    --leading-body-sm: 1.5;     --tracking-body-sm: -0.096px;
  --text-body: 18px;       --leading-body: 1.5;        --tracking-body: -0.126px;
  --text-body-lg: 25px;    --leading-body-lg: 1.3;     --tracking-body-lg: -0.225px;
  --text-subheading: 36px; --leading-subheading: 1.25; --tracking-subheading: -0.396px;
  --text-heading-sm: 45px; --leading-heading-sm: 1.1;  --tracking-heading-sm: -0.495px;
  --text-heading: 61px;    --leading-heading: 1.1;     --tracking-heading: -0.915px;
  --text-heading-lg: 89px; --leading-heading-lg: 0.85; --tracking-heading-lg: -2.67px;

  /* ---- Espaciado. Unidad base 4px, densidad cómoda ---- */
  --spacing-4: 4px;    --spacing-8: 8px;    --spacing-12: 12px;  --spacing-16: 16px;
  --spacing-20: 20px;  --spacing-24: 24px;  --spacing-28: 28px;  --spacing-32: 32px;
  --spacing-40: 40px;  --spacing-44: 44px;  --spacing-48: 48px;  --spacing-56: 56px;
  --spacing-64: 64px;  --spacing-100: 100px;

  --page-max-width: 1200px;
  --section-gap: 72px;
  --card-padding: 24px;
  --element-gap: 12px;

  /* ---- Radios: la píldora es fundacional; 10px en tarjetas, 28px en las grandes ---- */
  --radius-tags: 9999px;
  --radius-cards: 10px;
  --radius-inputs: 10px;
  --radius-buttons: 9999px;
  --radius-large-cards: 28px;
  --radius-sm: 2px;
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  /* ---- Sombras: el sistema es plano, los bordes hacen el trabajo ---- */
  --shadow-subtle: rgba(14, 15, 12, 0.12) 0px 0px 0px 1px;
  --shadow-subtle-2: rgb(134, 134, 133) 0px 0px 0px 1px inset;
  --shadow-lg: rgba(0, 0, 0, 0.08) 0px 6px 20px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.15) 0px 10px 32px 0px, rgba(0, 0, 0, 0.04) 0px 40px 40px 0px;
}