/* ─────────────────────────────────────────────────────────────────────────
   Avaloro Ecosystem — Design tokens
   Heredados 1:1 de Avaloro Design System (colors_and_type.css v2) para
   mantener consistencia de marca con el ERP en producción.
   Se añade únicamente una escala de tipografía "display" para uso
   editorial/marketing, ausente en el token set original (pensado para UI
   de aplicación, no para landing pages).
   ───────────────────────────────────────────────────────────────────────── */

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

:root {
  /* ─── Neutral scale (warm-cool gray, structural) ───────────────────── */
  --av-n-0:    #ffffff;
  --av-n-25:   #fcfcfd;
  --av-n-50:   #f8f9fb;
  --av-n-100:  #f1f3f6;
  --av-n-150:  #e8ebf0;
  --av-n-200:  #dde1e7;
  --av-n-300:  #c4cad3;
  --av-n-400:  #99a0ad;
  --av-n-500:  #6c7380;
  --av-n-600:  #4d5562;
  --av-n-700:  #353b46;
  --av-n-800:  #1f242d;
  --av-n-900:  #11141b;
  --av-n-950:  #07090d;

  /* ─── Brand: champagne gold — restrained, structural accent ────────── */
  --av-gold-50:   #fbf8f0;
  --av-gold-100:  #f5ecd2;
  --av-gold-200:  #ecdba5;
  --av-gold-300:  #dec074;
  --av-gold-400:  #cca44a;
  --av-gold-500:  #b6892a;
  --av-gold-600:  #936c1f;
  --av-gold-700:  #74541a;
  --av-gold-800:  #5a401a;
  --av-gold-900:  #3f2c12;
  --av-gold-on-dark: #d4b15a;
  --av-gold-on-dark-soft: rgba(212,177,90,0.10);

  /* ─── Semantic ──────────────────────────────────────────────────────── */
  --av-pos-500:  #147a4b;
  --av-neg-500:  #c0392b;
  --av-warn-500: #b07b1f;
  --av-info-500: #2466c4;

  /* ─── Foreground / background semantic ─────────────────────────────── */
  --av-bg-app:        var(--av-n-25);
  --av-bg-surface:    #ffffff;
  --av-bg-subtle:     var(--av-n-50);
  --av-bg-well:       var(--av-n-100);
  --av-bg-sidebar:    #0c1018;
  --av-bg-sidebar-section: #0a0d14;

  --av-fg-primary:    var(--av-n-900);
  --av-fg-body:       var(--av-n-700);
  --av-fg-muted:      var(--av-n-500);
  --av-fg-subtle:     var(--av-n-400);
  --av-fg-on-dark:    rgba(255,255,255,0.92);
  --av-fg-on-dark-muted: rgba(255,255,255,0.55);
  --av-fg-on-dark-subtle: rgba(255,255,255,0.40);
  --av-fg-on-gold:    #1a1305;
  --av-fg-accent:     var(--av-gold-600);

  --av-border:        var(--av-n-200);
  --av-border-soft:   var(--av-n-150);
  --av-border-strong: var(--av-n-300);
  --av-border-dark:   rgba(255,255,255,0.08);
  --av-border-dark-soft: rgba(255,255,255,0.04);

  /* ─── Shadows — restrained ──────────────────────────────────────────── */
  --av-shadow-xs:     0 1px 0 0 rgba(17,20,27,0.04);
  --av-shadow-sm:     0 1px 2px 0 rgba(17,20,27,0.04), 0 0 0 1px rgba(17,20,27,0.03);
  --av-shadow-md:     0 4px 16px -4px rgba(17,20,27,0.08);
  --av-shadow-lg:     0 24px 64px -20px rgba(17,20,27,0.22);
  --av-ring-focus:    0 0 0 3px rgba(182,137,42,0.18);

  /* ─── Radii — one scale, used everywhere ────────────────────────────── */
  --av-radius-xs:  3px;
  --av-radius-sm:  5px;
  --av-radius:     6px;
  --av-radius-md:  8px;
  --av-radius-lg:  10px;
  --av-radius-xl:  16px;
  --av-radius-pill: 999px;

  /* ─── Spacing scale (4px base) ─────────────────────────────────────── */
  --av-space-1:  4px;
  --av-space-2:  8px;
  --av-space-3:  12px;
  --av-space-4:  16px;
  --av-space-5:  20px;
  --av-space-6:  24px;
  --av-space-7:  28px;
  --av-space-8:  32px;
  --av-space-10: 40px;
  --av-space-12: 48px;
  --av-space-16: 64px;
  --av-space-20: 80px;
  --av-space-24: 96px;

  /* ─── Type — families ──────────────────────────────────────────────── */
  --av-font-sans: 'Geist', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --av-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ─── Type — UI scale (heredada de la app) ──────────────────────────── */
  --av-fs-10: 10.5px;
  --av-fs-11: 11.5px;
  --av-fs-12: 12px;
  --av-fs-13: 13px;
  --av-fs-14: 14px;
  --av-fs-15: 15px;
  --av-fs-17: 17px;
  --av-fs-22: 22px;

  /* ─── Type — escala display (nueva, sólo para marketing) ────────────── */
  --av-fs-display-sm: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);      /* 24 → 32 */
  --av-fs-display-md: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem); /* 30 → 44 */
  --av-fs-display-lg: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);   /* 36 → 56 */

  --av-lh-tight: 1.1;
  --av-lh-snug:  1.25;
  --av-lh-norm:  1.5;
  --av-tr-tight: -0.02em;
  --av-tr-snug:  -0.008em;
  --av-tr-norm:   0;
  --av-tr-wide:  0.06em;
  --av-tr-xwide: 0.08em;

  /* ─── Motion ───────────────────────────────────────────────────────── */
  --av-ease:      cubic-bezier(.4,0,.2,1);
  --av-ease-out:  cubic-bezier(.16,1,.3,1);
  --av-dur-fast:  120ms;
  --av-dur:       200ms;
  --av-dur-slow:  420ms;

  /* ─── Layout ───────────────────────────────────────────────────────── */
  --av-nav-h:     72px;
  --av-topbar-h:  36px;
  --av-container: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font: 400 15px/1.6 var(--av-font-sans);
  background: var(--av-bg-app);
  color: var(--av-fg-body);
  font-feature-settings: "ss01", "cv11", "tnum";
}

h1, h2, h3, h4 { margin: 0; color: var(--av-fg-primary); font-family: var(--av-font-sans); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

.av-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-2);
  font: 600 var(--av-fs-11)/1 var(--av-font-mono);
  letter-spacing: var(--av-tr-wide);
  text-transform: uppercase;
  color: var(--av-gold-600);
}

*:focus-visible {
  outline: none;
  box-shadow: var(--av-ring-focus);
  border-radius: var(--av-radius-sm);
}