/* ==========================================================================
   Viamed Salud — Colors & Type
   Minimalista · Moderno · Profesional · Cercano
   ========================================================================== */

/* Font imports — Inter chosen for closer match to the logo's geometric-rounded wordmark
   (Visby / Gotham Rounded family). Substitute your official Viamed typeface if available. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800');

:root {
  /* ----- BRAND COLORS ----- */
  /* Primary — Viamed navy. Trust, authority, clinical calm. */
  --viamed-navy:        #003A5D;  /* PRIMARY — corporate navy */
  --viamed-navy-900:    #002539;
  --viamed-navy-800:    #002E4A;
  --viamed-navy-700:    #00456E;  /* hover */
  --viamed-navy-600:    #00537F;
  --viamed-navy-500:    #1C668E;  /* wash / chart */
  --viamed-navy-300:    #7FA6BD;
  --viamed-navy-200:    #B5C9D7;
  --viamed-navy-100:    #E2EBF1;
  --viamed-navy-50:     #F1F5F8;

  /* Accent — Viamed cyan. Energy, modernity, highlight. */
  --viamed-cyan:        #00B2E3;  /* ACCENT — corporate cyan */
  --viamed-cyan-700:    #0088AE;
  --viamed-cyan-600:    #009BC8;
  --viamed-cyan-500:    #1AB9E5;
  --viamed-cyan-300:    #7ED4EF;
  --viamed-cyan-200:    #B7E7F7;
  --viamed-cyan-100:    #E0F5FC;
  --viamed-cyan-50:     #F0FAFD;

  /* ----- NEUTRALS (cool, to partner with navy) ----- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F9FB;  /* cool off-white — primary surface */
  --neutral-100:  #EDF1F5;
  --neutral-200:  #DFE5EC;
  --neutral-300:  #C6CFD8;
  --neutral-400:  #96A1AD;
  --neutral-500:  #6B7785;
  --neutral-600:  #4A5562;
  --neutral-700:  #2F3842;
  --neutral-800:  #1B222A;
  --neutral-900:  #0D1218;

  /* ----- SEMANTIC TOKENS ----- */
  --bg:             var(--neutral-50);
  --bg-elevated:    var(--neutral-0);
  --bg-muted:       var(--neutral-100);
  --bg-inverse:     var(--viamed-navy);
  --bg-brand:       var(--viamed-navy);
  --bg-brand-soft:  var(--viamed-navy-50);
  --bg-accent:      var(--viamed-cyan);
  --bg-accent-soft: var(--viamed-cyan-50);

  --fg1:  var(--viamed-navy);        /* primary text / headings */
  --fg2:  var(--neutral-700);        /* body */
  --fg3:  var(--neutral-500);        /* secondary / captions */
  --fg4:  var(--neutral-400);        /* placeholder */
  --fg-on-brand:  #FFFFFF;
  --fg-on-accent: #FFFFFF;
  --fg-brand:     var(--viamed-navy);
  --fg-accent:    var(--viamed-cyan-700);

  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-brand:   var(--viamed-navy);
  --border-accent:  var(--viamed-cyan);

  /* Status (tuned cool to live with navy/cyan) */
  --success:   #1E8A5F;
  --warning:   #C88A2A;
  --danger:    #C0392B;
  --info:      var(--viamed-cyan-700);

  /* ----- RADII ----- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ----- SHADOWS ----- */
  /* Subtle, close, never theatrical. Medical = trustworthy. */
  --shadow-xs: 0 1px 2px rgba(0, 58, 93, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 58, 93, 0.08), 0 1px 2px rgba(0, 58, 93, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 58, 93, 0.08), 0 2px 4px rgba(0, 58, 93, 0.05);
  --shadow-lg: 0 12px 32px rgba(0, 58, 93, 0.10), 0 4px 8px rgba(0, 58, 93, 0.06);
  --shadow-focus: 0 0 0 3px rgba(0, 178, 227, 0.30);

  /* ----- SPACING (4px grid) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----- MOTION ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ----- TYPE FAMILIES ----- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ----- TYPE SCALE ----- */
  --fs-display: clamp(30px, 5.5vw, 72px);
  --fs-h1: clamp(26px, 3.6vw, 48px);
  --fs-h2: clamp(22px, 2.6vw, 36px);
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
}

/* ==========================================================================
   Base type
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--fg1);
}

p { margin: 0 0 1em; text-wrap: pretty; }
.lead  { font-size: 20px; line-height: 1.5; color: var(--fg2); }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--fg3); letter-spacing: 0.02em; }
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-accent);
}

a { color: var(--viamed-navy); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease-out); }
a:hover { border-bottom-color: var(--viamed-cyan); color: var(--viamed-cyan-700); }

/* ==========================================================================
   Utilities
   ========================================================================== */
.surface { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); }
.surface-soft { background: var(--bg-muted); border-radius: var(--radius-md); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--viamed-navy-50); color: var(--viamed-navy);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.chip-accent {
  background: var(--viamed-cyan-50); color: var(--viamed-cyan-700);
}