/* ============================================================
   ESGARI · Tokens de producto digital
   Contrato de marca: Pantone 2746 C / 485 C
   Fuente: propuesta-1/site.css + brand-tokens.json
   ============================================================ */

:root {
  /* Marca */
  --esgari-blue: #2a2f70;
  --esgari-blue-deep: #1e1b4b;
  --esgari-red: #de271e;
  --esgari-red-hover: #b91c1c;
  --esgari-navy: #0f1530;

  /* Superficies */
  --surface: #ffffff;
  --surface-alt: #fafbff;
  --surface-sunken: #f5f7fc;
  --surface-inverse: #0f1530;

  /* Bordes */
  --border: #e8ecf4;
  --border-strong: #dbe3ef;
  --border-soft: #c7d2fe;

  /* Texto */
  --text: #0f172a;
  --text-secondary: #475569;
  --text-on-dark: #d1d9ff;
  --text-on-dark-muted: #8f9bd8;

  /* Estado */
  --success: #047857;
  --warning: #b45309;
  --danger: #b91c1c;
  --esg-green: #2f7e4c;
  --cert-green: #5b9b47;

  /* Tipografía */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Montserrat", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radios */
  --radius-pill: 999px;
  --radius-input: 12px;
  --radius-card: 16px;
  --radius-panel: 22px;
  --radius-hero: 24px;

  /* Sombras */
  --shadow-soft: 0 10px 40px -10px rgba(46, 44, 114, .08);
  --shadow-lift: 0 24px 48px -34px rgba(46, 44, 114, .55);
  --shadow-panel: 0 26px 60px -50px rgba(46, 44, 114, .5);

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 34px;
  --space-9: 44px;
  --space-10: 56px;
  --space-11: 78px;

  /* Layout */
  --container: 1200px;
  --container-wide: 1280px;
  --gutter: 20px;
  --tap-target: 44px;

  /* Movimiento */
  --ease: ease;
  --dur-fast: .15s;
  --dur-base: .2s;
  --dur-slow: .28s;
}