/* ============================================================
   Blue Quest Group — Colors & Type
   ------------------------------------------------------------
   Consolidated foundations: brand + neutral + semantic color,
   type scale + semantic type roles. Pair with components.css
   for the full system.

   v2.0 · 2026-05 · sourced from Brand_Guidelines.md and
   the live tokens.css in the codebase.
   ============================================================ */

/* Google Fonts — Inter, Space Grotesk, Cormorant Garamond (italic),
   JetBrains Mono. The 4-family stack is the Blue Quest signature. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Cormorant+Garamond:ital,wght@1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------------------------------------------------------
     COLOR — Brand palette (Treatment A: investor / digital)
     Navy dominates 60–70% of visual weight. Royal is the
     workhorse action colour. Aqua is the supporting accent.
     Red is reserved for the logo + rare high-energy moments.
     --------------------------------------------------------- */
  --bq-navy-deep:        #0A1E45;  /* Deepest dark — hero backgrounds */
  --bq-navy:             #122B5A;  /* Primary dark — body sections */
  --bq-royal:            #1E5BC6;  /* Primary brand blue — actions */
  --bq-royal-hover:      #1648A8;
  --bq-aqua:             #5DBCD2;  /* Accent — water/flow theme */
  --bq-aqua-pale:        #DCEEF7;  /* Soft tint, section backgrounds */
  --bq-red:              #E63946;  /* Logo accent, rare emphasis */
  --bq-red-deep:         #C42E3A;
  --bq-quest-gray:       #A0A8B0;  /* Logo neutral */

  /* ---------------------------------------------------------
     COLOR — Brand palette (Treatment B: editorial / IM)
     Cream parchment for print + long-form investor pieces.
     Same navy body, royal italic accents — never web body.
     --------------------------------------------------------- */
  --bq-cream:            #F2EBDA;

  /* ---------------------------------------------------------
     COLOR — Neutrals
     --------------------------------------------------------- */
  --bq-ink:              #0A1929;  /* Body text on light */
  --bq-slate:            #475569;  /* Secondary text */
  --bq-fog:              #94A3B8;  /* Muted / captions */
  --bq-mist:             #E2E8F0;  /* Borders, dividers */
  --bq-paper:            #F8FAFC;  /* Digital page tint */
  --bq-white:            #FFFFFF;

  /* ---------------------------------------------------------
     COLOR — Semantic mapping
     Use these in components — never hard-code brand hex.
     --------------------------------------------------------- */
  --bq-bg:               var(--bq-white);
  --bq-bg-soft:          var(--bq-paper);
  --bq-bg-aqua:          var(--bq-aqua-pale);
  --bq-bg-inverse:       var(--bq-navy);
  --bq-bg-inverse-deep:  var(--bq-navy-deep);
  --bq-bg-editorial:     var(--bq-cream);

  --bq-fg-1:             var(--bq-ink);     /* Primary body text */
  --bq-fg-2:             var(--bq-slate);   /* Secondary body */
  --bq-fg-3:             var(--bq-fog);     /* Tertiary / captions */
  --bq-fg-heading:       var(--bq-navy);    /* All headings */
  --bq-fg-on-dark:       var(--bq-white);
  --bq-fg-on-dark-muted: var(--bq-mist);

  --bq-border:           var(--bq-mist);
  --bq-border-strong:    var(--bq-quest-gray);
  --bq-border-focus:     var(--bq-royal);

  --bq-action:           var(--bq-royal);
  --bq-action-hover:     var(--bq-royal-hover);
  --bq-link:             var(--bq-royal);
  --bq-emphasis:         var(--bq-red);     /* Italic accent words */

  --bq-success:          #10B981;
  --bq-warning:          #F59E0B;
  --bq-danger:           #EF4444;
  --bq-info:             var(--bq-royal);

  /* ---------------------------------------------------------
     TYPOGRAPHY — Families
     Four-family stack. Each has a distinct job.
     --------------------------------------------------------- */
  --bq-font-display:    'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --bq-font-body:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bq-font-mono:       'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --bq-font-editorial:  'Cormorant Garamond', 'EB Garamond', Georgia, serif;

  /* ---------------------------------------------------------
     TYPOGRAPHY — Scale (modular 1.25, 16px base)
     --------------------------------------------------------- */
  --bq-text-xs:   0.75rem;
  --bq-text-sm:   0.875rem;
  --bq-text-base: 1rem;
  --bq-text-lg:   1.125rem;
  --bq-text-xl:   1.25rem;
  --bq-text-2xl:  1.5rem;
  --bq-text-3xl:  1.875rem;
  --bq-text-4xl:  2.25rem;
  --bq-text-5xl:  3rem;
  --bq-text-6xl:  3.75rem;
  --bq-text-7xl:  4.5rem;
  --bq-text-8xl:  6rem;

  /* Line heights */
  --bq-leading-tight:   1.15;
  --bq-leading-snug:    1.3;
  --bq-leading-normal:  1.5;
  --bq-leading-relaxed: 1.7;

  /* Font weights */
  --bq-weight-regular:  400;
  --bq-weight-medium:   500;
  --bq-weight-semibold: 600;
  --bq-weight-bold:     700;

  /* Letter spacing */
  --bq-tracking-tight:  -0.02em;
  --bq-tracking-normal: 0;
  --bq-tracking-wide:   0.04em;
  --bq-tracking-wider:  0.08em;

  /* ---------------------------------------------------------
     SPACING (4px base) / RADIUS / SHADOWS
     --------------------------------------------------------- */
  --bq-space-1:   0.25rem;
  --bq-space-2:   0.5rem;
  --bq-space-3:   0.75rem;
  --bq-space-4:   1rem;
  --bq-space-5:   1.25rem;
  --bq-space-6:   1.5rem;
  --bq-space-8:   2rem;
  --bq-space-10:  2.5rem;
  --bq-space-12:  3rem;
  --bq-space-16:  4rem;
  --bq-space-20:  5rem;
  --bq-space-24:  6rem;
  --bq-space-32:  8rem;

  --bq-radius-sm:   4px;
  --bq-radius-md:   6px;
  --bq-radius-lg:   8px;
  --bq-radius-xl:   12px;
  --bq-radius-2xl:  16px;
  --bq-radius-full: 9999px;

  --bq-shadow-sm:  0 1px 2px rgba(14, 43, 77, 0.06);
  --bq-shadow-md:  0 4px 12px rgba(14, 43, 77, 0.08);
  --bq-shadow-lg:  0 10px 30px rgba(14, 43, 77, 0.12);
  --bq-shadow-xl:  0 20px 50px rgba(14, 43, 77, 0.18);

  /* Layout */
  --bq-container-max:    1280px;
  --bq-container-narrow: 880px;

  /* Transitions */
  --bq-transition-fast: 0.15s ease-out;
  --bq-transition:      0.25s ease-out;
  --bq-transition-slow: 0.4s ease-out;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Pre-styled handles so designers don't need to remember the
   scale. Match the typographic hierarchy used in the live
   Blue Quest mockups (mockups/home.html, etc).
   ============================================================ */

.bq-display,
.bq-h0 {
  font-family: var(--bq-font-display);
  font-size: var(--bq-text-8xl);
  font-weight: var(--bq-weight-bold);
  line-height: 1.0;
  letter-spacing: var(--bq-tracking-tight);
  color: var(--bq-fg-heading);
  margin: 0;
}

.bq-h1 {
  font-family: var(--bq-font-display);
  font-size: var(--bq-text-7xl);
  font-weight: var(--bq-weight-bold);
  line-height: var(--bq-leading-tight);
  letter-spacing: var(--bq-tracking-tight);
  color: var(--bq-fg-heading);
  margin: 0 0 var(--bq-space-6);
}

.bq-h2 {
  font-family: var(--bq-font-display);
  font-size: var(--bq-text-5xl);
  font-weight: var(--bq-weight-bold);
  line-height: var(--bq-leading-tight);
  letter-spacing: var(--bq-tracking-tight);
  color: var(--bq-fg-heading);
  margin: 0 0 var(--bq-space-4);
}

.bq-h3 {
  font-family: var(--bq-font-display);
  font-size: var(--bq-text-3xl);
  font-weight: var(--bq-weight-bold);
  line-height: var(--bq-leading-snug);
  letter-spacing: var(--bq-tracking-tight);
  color: var(--bq-fg-heading);
  margin: 0 0 var(--bq-space-3);
}

.bq-h4 {
  font-family: var(--bq-font-display);
  font-size: var(--bq-text-2xl);
  font-weight: var(--bq-weight-bold);
  line-height: var(--bq-leading-snug);
  color: var(--bq-fg-heading);
  margin: 0 0 var(--bq-space-3);
}

.bq-h5 {
  font-family: var(--bq-font-display);
  font-size: var(--bq-text-xl);
  font-weight: var(--bq-weight-semibold);
  line-height: var(--bq-leading-snug);
  color: var(--bq-fg-heading);
  margin: 0 0 var(--bq-space-2);
}

.bq-eyebrow {
  font-family: var(--bq-font-display);
  font-size: var(--bq-text-sm);
  font-weight: var(--bq-weight-semibold);
  letter-spacing: var(--bq-tracking-wider);
  text-transform: uppercase;
  color: var(--bq-royal);
  margin: 0 0 var(--bq-space-3);
  display: inline-block;
}

/* Aqua eyebrow on dark backgrounds */
.bq-eyebrow--on-dark { color: var(--bq-aqua); }

.bq-lede {
  font-family: var(--bq-font-body);
  font-size: var(--bq-text-xl);
  line-height: var(--bq-leading-snug);
  color: var(--bq-fg-2);
  margin: 0 0 var(--bq-space-6);
}

.bq-body {
  font-family: var(--bq-font-body);
  font-size: var(--bq-text-base);
  line-height: var(--bq-leading-normal);
  color: var(--bq-fg-1);
  margin: 0 0 var(--bq-space-4);
}

.bq-body-sm {
  font-family: var(--bq-font-body);
  font-size: var(--bq-text-sm);
  line-height: var(--bq-leading-normal);
  color: var(--bq-fg-2);
}

.bq-caption {
  font-family: var(--bq-font-body);
  font-size: var(--bq-text-xs);
  color: var(--bq-fg-3);
  line-height: var(--bq-leading-normal);
}

/* The signature italic-serif accent. Use SPARINGLY — one or
   two words per headline, never on supporting copy. */
.bq-em,
.em {
  font-family: var(--bq-font-editorial);
  font-style: italic;
  font-weight: var(--bq-weight-medium);
  color: inherit;
}

/* Mono — for spec data, technical metadata, callouts */
.bq-mono {
  font-family: var(--bq-font-mono);
  font-size: var(--bq-text-sm);
  letter-spacing: var(--bq-tracking-wide);
}

.bq-mono-label {
  font-family: var(--bq-font-mono);
  font-size: var(--bq-text-xs);
  letter-spacing: var(--bq-tracking-wider);
  text-transform: uppercase;
  color: var(--bq-fg-3);
}

/* Big-stat treatment from the home hero and stat bands */
.bq-stat {
  font-family: var(--bq-font-display);
  font-size: var(--bq-text-7xl);
  font-weight: var(--bq-weight-bold);
  line-height: 1;
  letter-spacing: var(--bq-tracking-tight);
  color: var(--bq-navy);
}
.bq-stat--aqua { color: var(--bq-aqua); }
.bq-stat--royal { color: var(--bq-royal); }

/* Editorial pull-quote — Cormorant italic on cream/paper.
   Used in the home page IM-style quote. */
.bq-pullquote {
  font-family: var(--bq-font-editorial);
  font-style: italic;
  font-size: var(--bq-text-3xl);
  line-height: 1.3;
  color: var(--bq-navy);
  max-width: 800px;
  margin: 0 auto var(--bq-space-3);
}