/* ============================================================
   Gitten Consulting — Colors & Type
   ------------------------------------------------------------
   Heritage: evolved from GlareMed (medical cyan + deep charcoal).
   The new brand retains the "healthcare blue" trust signal but
   pairs it with a deeper navy foundation and generous whitespace.
   ============================================================ */

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Cyan lineage from GlareMed (#28A7E9, #47C6F8) — kept as brand primary */
  --g-cyan-50:   #E8F6FD;
  --g-cyan-100:  #C8EAFB;
  --g-cyan-200:  #8ED6F5;
  --g-cyan-300:  #47C6F8;  /* legacy link color */
  --g-cyan-400:  #28A7E9;  /* LEGACY PRIMARY — kept */
  --g-cyan-500:  #0E8FD6;  /* New primary — slightly deeper for contrast on white */
  --g-cyan-600:  #0A72B0;
  --g-cyan-700:  #0A5A89;

  /* Deep navy — new, grounds the brand */
  --g-navy-50:   #EEF3F7;
  --g-navy-100:  #D6E0EA;
  --g-navy-200:  #A8BACB;
  --g-navy-300:  #6E869E;
  --g-navy-400:  #405972;
  --g-navy-500:  #1E3A52;  /* secondary brand */
  --g-navy-600:  #14293C;
  --g-navy-700:  #0B1B29;
  --g-navy-800:  #071320;

  /* Neutrals — heritage charcoal (#303030 / #424242) re-tuned */
  --g-ink-900:   #121417;  /* near-black */
  --g-ink-800:   #1E2127;
  --g-ink-700:   #303338;  /* legacy body bg */
  --g-ink-600:   #424649;  /* legacy service bg */
  --g-ink-500:   #6B7077;
  --g-ink-400:   #9CA2AA;
  --g-ink-300:   #C7CCD2;
  --g-ink-200:   #E4E7EB;
  --g-ink-100:   #F2F4F6;
  --g-ink-50:    #F8F9FB;
  --g-white:     #FFFFFF;

  /* Semantic */
  --g-success:   #2BA672;
  --g-warning:   #E5A23B;
  --g-danger:    #D1495B;
  --g-info:      var(--g-cyan-500);

  /* ---------- SEMANTIC TOKENS (Light theme — default) ---------- */
  --bg:          var(--g-white);
  --bg-alt:      var(--g-ink-50);
  --bg-inverse:  var(--g-navy-700);

  --fg:          var(--g-navy-700);    /* primary text */
  --fg-muted:    var(--g-ink-500);     /* secondary text */
  --fg-subtle:   var(--g-ink-400);     /* helper / caption */
  --fg-on-brand: var(--g-white);
  --fg-on-dark:  var(--g-white);

  --brand:         var(--g-cyan-500);
  --brand-hover:   var(--g-cyan-600);
  --brand-active:  var(--g-cyan-700);
  --brand-soft:    var(--g-cyan-50);
  --accent:        var(--g-cyan-400);  /* legacy accent, used for highlights */

  --border:       var(--g-ink-200);
  --border-strong:var(--g-ink-300);
  --divider:      var(--g-ink-100);

  /* Link */
  --link:        var(--g-cyan-500);
  --link-hover:  var(--g-cyan-700);

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADIUS ---------- */
  --r-xs: 2px;   /* legacy template radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:  0 1px 2px rgba(11,27,41,0.06);
  --shadow-sm:  0 1px 3px rgba(11,27,41,0.08), 0 1px 2px rgba(11,27,41,0.04);
  --shadow-md:  0 6px 16px -6px rgba(11,27,41,0.14), 0 2px 4px rgba(11,27,41,0.06);
  --shadow-lg:  0 18px 40px -12px rgba(11,27,41,0.22), 0 4px 8px rgba(11,27,41,0.06);
  --shadow-brand:0 10px 30px -10px rgba(14,143,214,0.45);
  --shadow-text-on-image: 2px 2px 5px rgba(0,0,0,0.55); /* legacy hero treatment */

  /* ---------- TYPE SYSTEM ---------- */
  /* Open Sans = heritage body. Sora = display/headings (modern pairing). */
  --font-sans:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', 'Open Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type scale (major 3rd-ish, tuned for marketing). */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  80px;  /* hero */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-mega:   0.14em; /* for the small-caps eyebrow labels */

  /* Timing */
  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast:   160ms;
  --dur-base:   260ms;
  --dur-slow:   420ms;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
}

/* Dark section override — apply to sections that need inverted look
   (hero, footer, dark CTA bands). The legacy GlareMed site was dark-primary;
   this keeps that feel available. */
.on-dark,
[data-theme="dark"] {
  --bg:        var(--g-navy-700);
  --bg-alt:    var(--g-navy-600);
  --fg:        var(--g-white);
  --fg-muted:  var(--g-ink-300);
  --fg-subtle: var(--g-ink-400);
  --border:    rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --divider:   rgba(255,255,255,0.06);
  --brand:     var(--g-cyan-400);  /* lighter cyan pops on dark */
  --brand-hover: var(--g-cyan-300);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these as ready-made typography. Prefer these over raw sizes.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-light);  /* heritage: Open Sans 300 body */
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, var(--text-6xl));
  font-weight: var(--fw-light);   /* heritage: hero was weight 300 */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-5);
}
.h1 .accent, h1 .accent {
  color: var(--brand);
  font-weight: var(--fw-bold);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, var(--text-3xl));
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-5);
}
.h2 .accent, h2 .accent {
  color: var(--brand);
  font-weight: var(--fw-bold);
}

.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

.h4, h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--brand);  /* heritage: section sub-headers were cyan */
  margin: 0 0 var(--space-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--brand);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--fw-light);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
}

p {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
}

.small, small { font-size: var(--text-sm); color: var(--fg-muted); }
.caption { font-size: var(--text-xs); color: var(--fg-subtle); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

hr { border: 0; border-top: 1px solid var(--divider); margin: var(--space-6) 0; }

::selection { background: var(--g-cyan-200); color: var(--g-navy-700); }