/* ────────────────────────────────────────────────────────────────
   Vigia Empresarial — Foundations
   Colors + Type tokens
   ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Inter is loaded from Google Fonts in HTML head where it's needed.
   Inter Tight is also referenced in the system; treat it as a heading
   alternate for tighter UI labels. */

:root {
  /* ── Brand: Vigia blue ladder ───────────────────────────────── */
  /* The visual ladder of blues runs from deep navy (logo monogram /
     headlines) → primary actions → vivid cyan accent. Mid-range
     "royal" blues are pulled from the wordmark + repeated CTAs. */
  --vig-navy-900:   rgb(10, 37, 64);     /* hero headings, footer text base */
  --vig-navy-800:   rgb(4, 56, 110);     /* logo monogram apex */
  --vig-navy-700:   rgb(29, 59, 109);    /* logo wordmark (VIG·IA) */
  --vig-blue-700:   rgb(15, 77, 151);    /* deep brand fill */
  --vig-blue-600:   rgb(49, 94, 171);    /* PRIMARY CTA / wordmark "EMPRESARIAL" */
  --vig-blue-500:   rgb(52, 95, 172);    /* small-logo blue, near twin to 600 */
  --vig-blue-400:   rgb(27, 123, 188);   /* link / secondary CTA */
  --vig-blue-300:   rgb(35, 157, 214);   /* badge dots, accents */
  --vig-cyan-400:   rgb(39, 170, 225);   /* cyan brand step */
  --vig-cyan-300:   rgb(43, 167, 232);   /* alt cyan */
  --vig-cyan-200:   rgb(92, 203, 240);   /* logo dot, hero accent button */
  --vig-cyan-100:   rgb(221, 246, 255);  /* feature card tint (blue) */
  --vig-cyan-050:   rgb(230, 241, 251);  /* very faint blue wash */

  /* ── Neutrals ──────────────────────────────────────────────── */
  --vig-ink-900:    rgb(12, 14, 18);     /* footer background */
  --vig-ink-800:    rgb(24, 29, 39);     /* primary heading color */
  --vig-ink-700:    rgb(34, 38, 47);     /* divider in dark surfaces */
  --vig-ink-600:    rgb(42, 51, 64);     /* text on light */
  --vig-ink-500:    rgb(70, 76, 93);     /* dark gray panel */
  --vig-ink-400:    rgb(83, 88, 98);     /* supporting copy */
  --vig-ink-300:    rgb(106, 114, 130);  /* muted captions */
  --vig-ink-200:    rgb(148, 151, 156);  /* footer caption */
  --vig-ink-100:    rgb(213, 215, 218);  /* hairline borders */
  --vig-ink-050:    rgb(232, 227, 216);  /* warm hairline (on cream) */

  /* Cool, alternative neutrals (Inter Tight UI) */
  --vig-slate-700:  rgb(65, 70, 81);     /* badge / small UI text */
  --vig-slate-500:  rgb(74, 85, 101);    /* secondary body */
  --vig-slate-300:  rgb(107, 117, 136);  /* placeholder, helper text */

  /* ── Surfaces ──────────────────────────────────────────────── */
  --vig-bg:         rgb(255, 255, 255);
  --vig-bg-cream:   rgb(247, 245, 237);  /* feature-card neutral fill */
  --vig-bg-elevated:rgb(255, 255, 255);
  --vig-bg-muted:   rgb(245, 245, 245);  /* feature shelf bg */
  --vig-bg-dark:    var(--vig-ink-900);

  /* ── Semantic ──────────────────────────────────────────────── */
  --vig-link:           var(--vig-blue-400);
  --vig-link-hover:     var(--vig-blue-700);
  --vig-focus-ring:     rgba(49, 94, 171, 0.35);

  --vig-success:        rgb(43, 163, 107);
  --vig-warning:        rgb(245, 158, 11);
  --vig-danger:         rgb(217, 45, 32);
  --vig-info:           var(--vig-blue-400);
  --vig-purple-accent:  rgb(106, 83, 231);   /* spot accent only */

  --vig-border-subtle:  var(--vig-ink-100);
  --vig-border-warm:    var(--vig-ink-050);

  /* ── Shadows / elevation ───────────────────────────────────── */
  --vig-shadow-xs:  0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  --vig-shadow-sm:  0px 1px 2px 0px rgba(10, 13, 18, 0.05),
                    0px 1px 3px 0px rgba(10, 13, 18, 0.10);
  --vig-shadow-md:  0px 2px 4px -2px rgba(10, 13, 18, 0.06),
                    0px 4px 8px -2px rgba(10, 13, 18, 0.10);
  --vig-shadow-lg:  0px 4px 6px -4px rgba(0, 0, 0, 0.10),
                    0px 12px 16px -4px rgba(10, 13, 18, 0.08);
  --vig-shadow-xl:  0px 8px 8px -4px rgba(10, 13, 18, 0.03),
                    0px 20px 24px -4px rgba(10, 13, 18, 0.08);
  /* Untitled-UI-style button inner ring (used on primary CTAs) */
  --vig-btn-ring:   inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05),
                    inset 0px  0px 0px 1px rgba(10, 13, 18, 0.18);

  /* ── Radii ─────────────────────────────────────────────────── */
  --vig-radius-xs:  4px;
  --vig-radius-sm:  6px;
  --vig-radius-md:  8px;   /* default button + small card */
  --vig-radius-lg:  10px;  /* badge group */
  --vig-radius-xl:  12px;
  --vig-radius-2xl: 16px;  /* large CTA card */
  --vig-radius-pill:9999px;

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

  /* ── Typography ────────────────────────────────────────────── */
  --vig-font-display: "Montserrat", system-ui, -apple-system, sans-serif;
  --vig-font-body:    "Montserrat", system-ui, -apple-system, sans-serif;
  --vig-font-ui:      "Montserrat", system-ui, sans-serif;

  /* Headline scale (mobile-first; see usages in Figma source).
     Hero: 36/44; section heading: 30/38; eyebrow: 14/20 700. */
  --vig-h1-size: 48px;  --vig-h1-line: 56px;  --vig-h1-track: -0.02em;
  --vig-h2-size: 36px;  --vig-h2-line: 44px;  --vig-h2-track: -0.02em;
  --vig-h3-size: 30px;  --vig-h3-line: 38px;  --vig-h3-track: -0.01em;
  --vig-h4-size: 24px;  --vig-h4-line: 32px;  --vig-h4-track: -0.01em;
  --vig-h5-size: 20px;  --vig-h5-line: 28px;
  --vig-h6-size: 18px;  --vig-h6-line: 28px;

  --vig-eyebrow-size: 14px; --vig-eyebrow-line: 20px;
  --vig-lead-size:    18px; --vig-lead-line:    28px;
  --vig-body-size:    16px; --vig-body-line:    24px;
  --vig-small-size:   14px; --vig-small-line:   20px;
  --vig-caption-size: 12px; --vig-caption-line: 18px;
}

/* ────────────────────────────────────────────────────────────────
   Semantic typography classes — drop on a fresh page for sensible
   defaults that match the Vigia look.
   ──────────────────────────────────────────────────────────────── */

.vig-h1, .vig-h2, .vig-h3, .vig-h4, .vig-h5, .vig-h6 {
  font-family: var(--vig-font-display);
  font-weight: 700;
  color: var(--vig-ink-800);
  margin: 0;
  text-wrap: pretty;
}
.vig-h1 { font-size: var(--vig-h1-size); line-height: var(--vig-h1-line); letter-spacing: var(--vig-h1-track); }
.vig-h2 { font-size: var(--vig-h2-size); line-height: var(--vig-h2-line); letter-spacing: var(--vig-h2-track); }
.vig-h3 { font-size: var(--vig-h3-size); line-height: var(--vig-h3-line); letter-spacing: var(--vig-h3-track); }
.vig-h4 { font-size: var(--vig-h4-size); line-height: var(--vig-h4-line); letter-spacing: var(--vig-h4-track); }
.vig-h5 { font-size: var(--vig-h5-size); line-height: var(--vig-h5-line); }
.vig-h6 { font-size: var(--vig-h6-size); line-height: var(--vig-h6-line); }

.vig-eyebrow {
  font-family: var(--vig-font-display);
  font-weight: 700;
  font-size: var(--vig-eyebrow-size);
  line-height: var(--vig-eyebrow-line);
  color: var(--vig-blue-600);
  margin: 0;
}

.vig-lead {
  font-family: var(--vig-font-body);
  font-size: var(--vig-lead-size);
  line-height: var(--vig-lead-line);
  color: var(--vig-slate-500);
  margin: 0;
}

.vig-body {
  font-family: var(--vig-font-body);
  font-size: var(--vig-body-size);
  line-height: var(--vig-body-line);
  color: var(--vig-ink-400);
  margin: 0;
}

.vig-small {
  font-family: var(--vig-font-body);
  font-size: var(--vig-small-size);
  line-height: var(--vig-small-line);
  color: var(--vig-slate-300);
  margin: 0;
}

.vig-caption {
  font-family: var(--vig-font-display);
  font-weight: 500;
  font-size: var(--vig-caption-size);
  line-height: var(--vig-caption-line);
  color: var(--vig-slate-700);
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   Reusable surface primitives
   ──────────────────────────────────────────────────────────────── */

.vig-card {
  background: var(--vig-bg);
  border: 1px solid var(--vig-border-subtle);
  border-radius: var(--vig-radius-md);
  box-shadow: var(--vig-shadow-xs);
}

.vig-card--cream {
  background: var(--vig-bg-cream);
  border: 1px solid var(--vig-border-warm);
  border-radius: var(--vig-radius-md);
}

.vig-card--tint {
  background: var(--vig-cyan-100);
  border: 1px solid color-mix(in srgb, var(--vig-cyan-200) 35%, transparent);
  border-radius: var(--vig-radius-md);
}

.vig-card--cta {
  background: var(--vig-blue-600);
  border-radius: var(--vig-radius-2xl);
  color: white;
}