/* LDHS — Design Tokens (única fuente de verdad)
   v2 alineado con claude.ai/design (Instrument Serif + Geist + Geist Mono).
   Compatibilidad total: todos los nombres de tokens existentes se preservan. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* Marina (preservada por compat — color principal de UI) */
  --navy:   #0a1828;
  --navy-2: #0a3357;
  --navy-3: #051628;

  /* Verde corporativo (preservada para badges/estados positivos) */
  --green:   #97c459;
  --green-2: #5e8a2b;
  --green-3: #02570e;

  /* Dorado — alineado a paleta claude.ai/design */
  --gold:   #a87c3d;
  --gold-2: #d4a85c;

  /* Apoyo */
  --teal:    #1b4965;
  --cream:   #efe6d5;
  --cream-2: #f7f1e3;
  --cream-3: #faf6ec;

  /* Estados */
  --err:    #8b0000;
  --err-bg: #f3dede;

  /* Texto */
  --ink:    #0a1828;
  --ink-2:  #2c3e50;
  --ink-3:  #666f73;
  --ink-4:  #9aa3a8;

  /* Bordes y fondos */
  --line:   #e6e2d8;
  --line-2: #d4cfc1;
  --bg:     #f5f1ea;

  /* Tipografía — claude.ai/design system */
  --font-sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Bordes redondeados */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Sombras */
  --sh-1: 0 1px 0 rgba(10, 24, 40, 0.04), 0 2px 8px rgba(10, 24, 40, 0.04);
  --sh-2: 0 4px 14px -4px rgba(10, 24, 40, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02";
}
.mono { font-family: var(--font-mono); font-size: .92em; }
.muted { color: var(--ink-3); font-weight: 500; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* Display serif para headlines decorativos (h1 hero, brand names) */
.display, h1.display, .hero h1, .brand-display {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.display em, h1.display em, .hero h1 em {
  font-style: italic;
  color: var(--gold);
}