/* =========================================================
   Critical Building — Colors & Type
   Sober · Technical · Institutional · Premium
   ========================================================= */

/* ---------- Fonts ---------- */
/* Primary brand typeface (used in PPTX template + culture book): Century Gothic (geometric sans)
   Web substitution: "Jost" (Google Fonts) — closest geometric humanist sans, similar O/G shapes.
   Fallback: ui-sans-serif system. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

/* Body / UI sans (more neutral, technical, dense paragraphs): "Inter Tight" — institutional pairing */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&display=swap');

/* Monospace for technical specs / data callouts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand Colors ---------- */
  --cb-blue:        #1F6BB5;   /* "Critical Building" wordmark blue */
  --cb-blue-dark:   #0E2841;   /* PPTX theme dk2 — deep institutional navy */
  --cb-blue-deep:   #0B1E33;   /* darker still — full-bleed backgrounds */
  --cb-blue-mid:    #156082;   /* PPTX accent1 — petrol accent */
  --cb-blue-soft:   #4A8FCC;   /* hover / link */
  --cb-blue-tint:   #E8F0F9;   /* surfaces, callouts */

  --cb-red:         #E30613;   /* the red dot — sparingly, accent only */
  --cb-red-dark:    #B30410;

  --cb-black:       #000000;   /* underline, header bar */
  --cb-graphite:    #1A1A1A;
  --cb-steel:       #3D4348;
  --cb-gray-700:    #5A6066;
  --cb-gray-600:    #7E8488;   /* "Datacenter consultants" gray */
  --cb-gray-500:    #9AA0A4;
  --cb-gray-400:    #BFC4C8;
  --cb-gray-300:    #D8DCDF;
  --cb-gray-200:    #E8EBED;
  --cb-gray-100:    #F2F4F5;
  --cb-white:       #FFFFFF;
  --cb-paper:       #FAFBFC;

  /* ---------- Semantic ---------- */
  --bg:             var(--cb-white);
  --bg-alt:         var(--cb-paper);
  --bg-inverse:     var(--cb-blue-deep);
  --bg-bar:         var(--cb-black);          /* the signature top bar */

  --fg:             var(--cb-graphite);
  --fg-muted:       var(--cb-gray-700);
  --fg-soft:        var(--cb-gray-600);
  --fg-on-dark:     var(--cb-white);
  --fg-on-dark-muted:#BFC4C8;

  --accent:         var(--cb-blue);
  --accent-strong:  var(--cb-blue-dark);
  --accent-dot:     var(--cb-red);            /* the red dot */

  --border:         var(--cb-gray-300);
  --border-strong:  var(--cb-gray-400);
  --rule:           var(--cb-black);          /* the signature underline */

  /* ---------- Type families ---------- */
  --font-display:   "Jost", "Century Gothic", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --font-sans:      "Inter Tight", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (16px base) ---------- */
  --fs-12: 0.75rem;    /* caption */
  --fs-14: 0.875rem;   /* small */
  --fs-16: 1rem;       /* body */
  --fs-18: 1.125rem;   /* lead */
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;     /* h4 */
  --fs-28: 1.75rem;    /* h3 */
  --fs-36: 2.25rem;    /* h2 */
  --fs-48: 3rem;       /* h1 */
  --fs-64: 4rem;       /* display */
  --fs-80: 5rem;       /* hero */

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

  /* ---------- Line heights ---------- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-relaxed:1.6;

  /* ---------- Letter-spacing ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;       /* SECTION HEADERS */

  /* ---------- Spacing (8pt grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10:128px;

  /* ---------- Radii — minimal, institutional ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;       /* cards / inputs cap out here */
  --r-pill: 999px;

  /* ---------- Shadows — restrained, technical ---------- */
  --sh-xs: 0 1px 0 rgba(14,40,65,0.04), 0 1px 2px rgba(14,40,65,0.04);
  --sh-sm: 0 1px 2px rgba(14,40,65,0.06), 0 2px 4px rgba(14,40,65,0.04);
  --sh-md: 0 2px 6px rgba(14,40,65,0.08), 0 6px 16px rgba(14,40,65,0.06);
  --sh-lg: 0 6px 14px rgba(14,40,65,0.10), 0 18px 40px rgba(14,40,65,0.10);
  --sh-inset: inset 0 0 0 1px rgba(14,40,65,0.08);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 400ms;
}

/* ---------- Semantic type roles ---------- */
.cb-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.cb-display {
  font-family: var(--font-display);
  font-size: var(--fs-80);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.cb-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.cb-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.cb-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.cb-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg);
}

.cb-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.cb-body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.cb-small {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.cb-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-soft);
}

.cb-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0;
  color: var(--fg);
}

/* The signature underline — black rule under blue display */
.cb-rule {
  display: inline-block;
  border-bottom: 3px solid var(--rule);
  padding-bottom: 6px;
}

/* The red dot — used as a discrete brand signature */
.cb-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent-dot);
  vertical-align: baseline;
  margin-left: 0.25em;
}