/* ============================================================
   ASCENSUS — Colors & Type foundation
   Inteligência de negócios e marketing para o setor médico.
   ------------------------------------------------------------
   FONTS: Brand fonts are self-hosted from /fonts.
     · Century Gothic → primary geometric sans (headings + body)
     · Chennai        → rounded display / wordmark accent
   IBM Plex Mono (code) is the only CDN family — no brand file
   exists for it, so CDN delivery is intentional.
   ============================================================ */

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

/* ---- Century Gothic (primary) ---- */
@font-face {
  font-family: 'Century Gothic';
  src: url('fonts/GOTHIC.TTF') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Century Gothic';
  src: url('fonts/GOTHICI.TTF') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Century Gothic';
  src: url('fonts/GOTHICB.TTF') format('truetype');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Century Gothic';
  src: url('fonts/GOTHICBI.TTF') format('truetype');
  font-weight: 600 700; font-style: italic; font-display: swap;
}
/* ---- Chennai (display / wordmark) ---- */
@font-face {
  font-family: 'Chennai';
  src: url('fonts/Chennai.otf') format('opentype');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- BRAND CORE ---------- */
  --navy:        #00315c;  /* primary — wordmark, the ECG "A" */
  --navy-900:    #00203b;
  --navy-800:    #00315c;  /* brand navy */
  --navy-700:    #0a4576;
  --navy-600:    #115d96;
  --cyan:        #0091d0;  /* accent — "marketing" tagline */
  --cyan-600:    #0077ad;
  --cyan-500:    #0091d0;
  --cyan-400:    #33a9dd;
  --cyan-300:    #7cc6e8;
  --cyan-100:    #d6eef8;

  /* Signature gradient (navy → cyan), used in logo & hero fields */
  --grad-brand:  linear-gradient(120deg, #00315c 0%, #0a4f86 55%, #0091d0 100%); /* @kind color */
  --grad-brand-soft: linear-gradient(120deg, #04416f 0%, #0c6aa6 100%); /* @kind color */

  /* ---------- COOL NEUTRALS (slate-blue) ---------- */
  --ink:         #0c1722;  /* near-black text */
  --slate-800:   #1c2c3a;
  --slate-700:   #33485c;
  --slate-600:   #4d6273;
  --slate-500:   #6b7e8f;
  --slate-400:   #93a3b1;
  --slate-300:   #b9c5d0;
  --slate-200:   #d8e0e8;
  --slate-100:   #e9eef3;
  --paper:       #f4f7fa;  /* page background */
  --white:       #ffffff;

  /* ---------- SEMANTIC TEXT / SURFACE ---------- */
  --fg-1:        var(--ink);       /* primary text */
  --fg-2:        var(--slate-700); /* secondary text */
  --fg-3:        var(--slate-500); /* muted / captions */
  --fg-ondark:   #eaf3fa;
  --fg-ondark-2: #a9c4d9;
  --bg-1:        var(--white);
  --bg-2:        var(--paper);
  --bg-3:        var(--slate-100);
  --border:      var(--slate-200);
  --border-strong: var(--slate-300);

  /* ---------- STATUS ---------- */
  --success:     #1f8a5b;
  --success-bg:  #e4f3ec;
  --warning:     #b9831a;
  --warning-bg:  #f8efdd;
  --danger:      #c2403d;
  --danger-bg:   #f8e5e4;
  --info:        var(--cyan-500);
  --info-bg:     var(--cyan-100);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Chennai', 'Century Gothic', system-ui, sans-serif;        /* wordmark / brand display */
  --font-sans:    'Century Gothic', 'Questrial', system-ui, sans-serif;      /* headings + body */
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE SCALE (1.250 major-third) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  46px;
  --text-4xl:  58px;
  --text-5xl:  74px;

  --leading-tight: 1.12;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  /* tracking — geometric sans benefits from light positive tracking on caps */
  --track-tight:  -0.01em;
  --track-normal: 0; /* @kind spacing */
  --track-wide:   0.04em;
  --track-caps:   0.14em;  /* eyebrows / overlines */

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---------- ELEVATION (cool, low, sober) ---------- */
  --shadow-xs: 0 1px 2px rgba(0,49,92,.06);
  --shadow-sm: 0 2px 6px rgba(0,49,92,.08);
  --shadow-md: 0 8px 24px rgba(0,49,92,.10);
  --shadow-lg: 0 18px 50px rgba(0,49,92,.14);
  --ring:      0 0 0 3px rgba(0,145,208,.28);
}

/* ============================================================
   SEMANTIC TYPE ROLES
   ============================================================ */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--cyan-600);
}
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--navy);
}
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--navy);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--navy);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--slate-800);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--slate-800);
}
.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--fg-2);
}
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--fg-3);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}