/* =============================================================
   Bluehex — Colors & Type
   Foundational design tokens. Import at the top of any page.
   ============================================================= */

/* ---------- Fonts ---------- */
/* Display + UI: Exo 2 (brand font — supplied, matches the BLUEHEX wordmark).
   Body:        Inter (humanist, high legibility for technical copy).
   Mono:        JetBrains Mono (technical detail, status IDs, logs). */
@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/Exo2-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Exo2-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/Exo2-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Exo2-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =========== Brand Color ============ */
  --bh-navy-900: #001633;   /* deepest — headings on light, dark surface */
  --bh-navy-800: #002451;
  --bh-navy-700: #003068;   /* PRIMARY — from logo "BLUE" */
  --bh-navy-600: #0a4a8c;
  --bh-navy-500: #1f68ad;
  --bh-navy-400: #5b8fc8;
  --bh-navy-300: #9cbadc;
  --bh-navy-200: #cde0ef;
  --bh-navy-100: #e8f0f8;
  --bh-navy-050: #f4f8fc;

  --bh-cyan-900: #004d6e;
  --bh-cyan-800: #00709f;
  --bh-cyan-700: #0089c7;
  --bh-cyan-600: #0098dc;
  --bh-cyan-500: #00a8f0;   /* PRIMARY ACCENT — from logo "HEX" */
  --bh-cyan-400: #3dbdf4;
  --bh-cyan-300: #7ccff7;
  --bh-cyan-200: #b5e3fb;
  --bh-cyan-100: #dcf1fd;
  --bh-cyan-050: #eff9fe;

  /* =========== Neutrals ============ */
  --bh-ink-900: #0c1521;    /* primary text on light */
  --bh-ink-800: #1a2433;
  --bh-ink-700: #2b3647;
  --bh-ink-600: #47536a;    /* body secondary */
  --bh-ink-500: #6b7891;
  --bh-ink-400: #95a0b5;
  --bh-ink-300: #c1cad8;
  --bh-ink-200: #dfe5ee;
  --bh-ink-150: #e9edf3;
  --bh-ink-100: #f1f4f8;
  --bh-ink-050: #f7f9fc;
  --bh-white:   #ffffff;

  /* =========== Semantic ============ */
  --bh-success-700: #066d47;
  --bh-success-500: #0fa968;
  --bh-success-100: #daf5e7;
  --bh-warning-700: #8a5500;
  --bh-warning-500: #d88600;
  --bh-warning-100: #fdebcd;
  --bh-danger-700: #9a1c1c;
  --bh-danger-500: #de2f2f;
  --bh-danger-100: #fbddd9;
  --bh-info-700:    var(--bh-cyan-800);
  --bh-info-500:    var(--bh-cyan-500);
  --bh-info-100:    var(--bh-cyan-100);

  /* =========== Semantic roles (what to use in product) ============ */
  --bh-bg:            var(--bh-white);
  --bh-bg-subtle:     var(--bh-ink-050);
  --bh-bg-muted:      var(--bh-ink-100);
  --bh-bg-inverse:    var(--bh-navy-900);
  --bh-surface:       var(--bh-white);
  --bh-surface-raised:var(--bh-white);

  --bh-fg:            var(--bh-ink-900);   /* primary text */
  --bh-fg-muted:      var(--bh-ink-600);   /* secondary text */
  --bh-fg-subtle:     var(--bh-ink-500);   /* tertiary / caption */
  --bh-fg-disabled:   var(--bh-ink-400);
  --bh-fg-on-brand:   var(--bh-white);
  --bh-fg-on-accent:  var(--bh-navy-900);  /* on cyan — navy is more legible than white */

  --bh-brand:         var(--bh-navy-700);
  --bh-brand-hover:   var(--bh-navy-800);
  --bh-brand-active:  var(--bh-navy-900);
  --bh-accent:        var(--bh-cyan-500);
  --bh-accent-hover:  var(--bh-cyan-400);
  --bh-accent-active: var(--bh-cyan-600);

  --bh-border:        var(--bh-ink-200);
  --bh-border-strong: var(--bh-ink-300);
  --bh-border-brand:  var(--bh-navy-700);
  --bh-border-accent: var(--bh-cyan-500);
  --bh-focus-ring:    0 0 0 3px color-mix(in oklab, var(--bh-cyan-500) 45%, transparent);

  /* =========== Type Scale ============ */
  --bh-font-display: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bh-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bh-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid-ish type — use rem values directly or the aliases below. */
  --bh-text-xs:   12px;
  --bh-text-sm:   14px;
  --bh-text-md:   16px;
  --bh-text-lg:   18px;
  --bh-text-xl:   20px;
  --bh-text-2xl:  24px;
  --bh-text-3xl:  30px;
  --bh-text-4xl:  36px;
  --bh-text-5xl:  48px;
  --bh-text-6xl:  60px;
  --bh-text-7xl:  76px;

  --bh-lh-tight:  1.1;
  --bh-lh-snug:   1.25;
  --bh-lh-normal: 1.5;
  --bh-lh-loose:  1.7;

  --bh-tracking-tight:   -0.02em;
  --bh-tracking-display: -0.015em;
  --bh-tracking-normal:  0;
  --bh-tracking-wide:    0.02em;
  --bh-tracking-eyebrow: 0.12em;

  /* =========== Spacing ============ */
  --bh-space-0:  0;
  --bh-space-1:  4px;
  --bh-space-2:  8px;
  --bh-space-3:  12px;
  --bh-space-4:  16px;
  --bh-space-5:  20px;
  --bh-space-6:  24px;
  --bh-space-7:  32px;
  --bh-space-8:  40px;
  --bh-space-9:  48px;
  --bh-space-10: 64px;
  --bh-space-11: 80px;
  --bh-space-12: 96px;
  --bh-space-13: 128px;

  /* =========== Radii ============ */
  --bh-radius-none: 0;
  --bh-radius-xs:   4px;
  --bh-radius-sm:   6px;
  --bh-radius-md:   10px;
  --bh-radius-lg:   14px;
  --bh-radius-xl:   20px;
  --bh-radius-2xl:  28px;
  --bh-radius-pill: 999px;

  /* =========== Shadows (soft, layered, never dramatic) ============ */
  --bh-shadow-xs: 0 1px 2px rgba(0, 48, 104, 0.06);
  --bh-shadow-sm: 0 1px 2px rgba(0, 48, 104, 0.06), 0 2px 6px rgba(0, 48, 104, 0.05);
  --bh-shadow-md: 0 4px 12px rgba(0, 48, 104, 0.08), 0 1px 3px rgba(0, 48, 104, 0.06);
  --bh-shadow-lg: 0 12px 28px rgba(0, 48, 104, 0.12), 0 2px 6px rgba(0, 48, 104, 0.06);
  --bh-shadow-xl: 0 24px 56px rgba(0, 48, 104, 0.18), 0 4px 10px rgba(0, 48, 104, 0.08);
  --bh-shadow-accent-glow: 0 0 0 4px rgba(0, 168, 240, 0.18);
  --bh-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* =========== Motion ============ */
  --bh-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --bh-ease-emphasized: cubic-bezier(0.3, 0.7, 0.1, 1);
  --bh-duration-fast: 120ms;
  --bh-duration-base: 200ms;
  --bh-duration-slow: 320ms;

  /* =========== Layout ============ */
  --bh-container: 1200px;
  --bh-container-wide: 1320px;
  --bh-header-height: 72px;
}

/* ============================================================
   Base type
   ============================================================ */
html, body {
  font-family: var(--bh-font-sans);
  color: var(--bh-fg);
  background: var(--bh-bg);
  font-size: var(--bh-text-md);
  line-height: var(--bh-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

.bh-h1, h1 {
  font-size: var(--bh-text-6xl);
  font-weight: 800;
  letter-spacing: var(--bh-tracking-tight);
}
.bh-h2, h2 {
  font-size: var(--bh-text-5xl);
  font-weight: 700;
}
.bh-h3, h3 {
  font-size: var(--bh-text-3xl);
  font-weight: 700;
  line-height: var(--bh-lh-snug);
}
.bh-h4, h4 {
  font-size: var(--bh-text-2xl);
  font-weight: 600;
  line-height: var(--bh-lh-snug);
}
.bh-h5, h5 {
  font-size: var(--bh-text-xl);
  font-weight: 600;
  line-height: var(--bh-lh-snug);
}
.bh-h6, h6 {
  font-size: var(--bh-text-md);
  font-weight: 600;
  letter-spacing: 0;
}

p { margin: 0; color: var(--bh-fg); text-wrap: pretty; }
.bh-lead { font-size: var(--bh-text-xl); color: var(--bh-fg-muted); line-height: var(--bh-lh-normal); }
.bh-body { font-size: var(--bh-text-md); color: var(--bh-fg); line-height: var(--bh-lh-normal); }
.bh-body-sm { font-size: var(--bh-text-sm); color: var(--bh-fg-muted); line-height: var(--bh-lh-normal); }
.bh-caption { font-size: var(--bh-text-xs); color: var(--bh-fg-subtle); line-height: var(--bh-lh-normal); }

.bh-eyebrow {
  font-family: var(--bh-font-sans);
  font-size: var(--bh-text-xs);
  font-weight: 600;
  letter-spacing: var(--bh-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bh-cyan-700);
}

code, kbd, samp, pre, .bh-mono {
  font-family: var(--bh-font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bh-ink-100);
  color: var(--bh-navy-800);
  padding: 2px 6px;
  border-radius: var(--bh-radius-xs);
}

a { color: var(--bh-cyan-700); text-decoration: none; }
a:hover { color: var(--bh-navy-700); text-decoration: underline; text-underline-offset: 3px; }

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

/* Accent text utilities */
.bh-text-accent { color: var(--bh-cyan-500); }
.bh-text-brand { color: var(--bh-navy-700); }
.bh-text-muted { color: var(--bh-fg-muted); }

/* Highlight a word in display copy like "amazingly **seamless**". */
.bh-highlight { color: var(--bh-cyan-500); }