/* Bouchard Labs · Blend theme · design tokens
   Source of truth: BRAND-THEME.md in this folder.
   The site is dark-first. Light surfaces are for occasional sections only. */

:root {
  /* ---- Palette (the chosen five) ---- */
  --bl-slate:  #11151B;  /* page background */
  --bl-bench:  #171C24;  /* raised surfaces: cards, panels, nav */
  --bl-gauge:  #8792A2;  /* secondary text on dark */
  --bl-chalk:  #E6EBF1;  /* primary text on dark; light-section background */
  --bl-indigo: #8B93FF;  /* the one accent: logo, one highlighted word, buttons, links */

  /* ---- Additions (needed for contrast; see BRAND-THEME.md) ---- */
  --bl-indigo-deep: #4B55E0;  /* logo overlap; accent on light surfaces */
  --bl-gauge-deep:  #5A6372;  /* secondary text on light surfaces */
  --bl-line:        #262D38;  /* hairlines and card borders on dark */

  /* ---- Semantic roles (dark, default) ---- */
  --bg:          var(--bl-slate);
  --surface:     var(--bl-bench);
  --border:      var(--bl-line);
  --text:        var(--bl-chalk);
  --text-muted:  var(--bl-gauge);
  --accent:      var(--bl-indigo);
  --on-accent:   var(--bl-slate);   /* text on Indigo buttons. Never white. */
  --focus-ring:  var(--bl-indigo);

  /* ---- Type ---- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-display: clamp(44px, 8.5vw, 104px);  /* hero headline, weight 800 */
  --fs-h2:      clamp(32px, 5vw, 56px);     /* section titles, weight 800 */
  --fs-h3:      clamp(24px, 3vw, 34px);     /* card titles, weight 700 */
  --fs-lead:    clamp(17px, 2vw, 22px);     /* supporting line */
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-label:   12px;                       /* mono, uppercase, tracking .12em */

  --tracking-display: -0.05em;
  --tracking-heading: -0.035em;
  --lh-tight: 1;
  --lh-body:  1.5;

  /* ---- Shape ---- */
  --radius-card: 22px;
  --radius-tile: 19px;
  --radius-pill: 999px;

  /* ---- Space (8-pt) ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-section: clamp(56px, 9vw, 120px);
  --content-max: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
}

/* Light section (use sparingly, e.g. contact band) */
.bl-light {
  --bg:         var(--bl-chalk);
  --surface:    #FFFFFF;
  --border:     #D5DCE5;
  --text:       var(--bl-slate);
  --text-muted: var(--bl-gauge-deep);
  --accent:     var(--bl-indigo-deep);
  --on-accent:  #FFFFFF;            /* white on Deep Indigo = 5.7:1 */
  --focus-ring: var(--bl-indigo-deep);
}