/* ─────────────────────────────────────────────────────────────────
   Bloomteq Design System
   Design tokens — colors, type, spacing, motion.
   Pair with assets/logos/* for brand marks.
   ───────────────────────────────────────────────────────────────── */

/* ─── Fonts ─────────────────────────────────────────────────────
   IBM Plex Sans + Mono are served locally from assets/fonts/
   (brand-supplied). Exo (used once on the cover, 96px display)
   is loaded from Google Fonts on demand.                         */

/* IBM Plex Sans — variable-weight file covers 100-700 */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-italic-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

/* IBM Plex Mono — per-weight static files */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Exo — display-only (cover page lockups). Loaded from Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap");

:root {
  /* ─── Primary (ink) ─────────────────────────────────────────── */
  --bt-ink:            rgb(46, 54, 60);   /* #2E363C — headlines, body, dividers  */
  --bt-ink-2:          rgb(47, 55, 61);   /* #2F373D — brand-mark fill (≈ ink)    */
  --bt-ink-deep:       rgb(19, 21, 22);   /* #131516 — near-black, pure contrast  */
  --bt-ink-deep-alt:   rgb(26, 31, 34);   /* #1A1F22 — near-black alt             */
  --bt-ink-muted:      rgb(104, 113, 119);/* #687177 — body secondary, captions   */

  /* ─── Surface / neutrals ────────────────────────────────────── */
  --bt-surface:        rgb(255, 255, 255);/* #FFFFFF — default page               */
  --bt-surface-alt:    rgb(250, 253, 255);/* #FAFDFF — hairline offset            */
  --bt-surface-tint:   rgb(244, 247, 252);/* #F4F7FC — soft tint panel            */
  --bt-panel:          rgb(239, 242, 247);/* #EFF2F7 — the signature sidebar tint */
  --bt-panel-2:        rgb(245, 246, 250);/* #F5F6FA — panel variant              */
  --bt-panel-3:        rgb(229, 232, 239);/* #E5E8EF — deeper panel tint          */
  --bt-panel-4:        rgb(231, 233, 236);/* #E7E9EC — circle swatches            */
  --bt-hairline:       rgb(217, 217, 217);/* #D9D9D9 — strokes, dividers          */
  --bt-hairline-soft:  rgb(231, 233, 236);/* #E7E9EC — softer dividers            */
  --bt-hairline-warm:  rgb(244, 244, 246);/* #F4F4F6                              */

  /* ─── Gradient accent (the “metallic” gradient) ─────────────── */
  --bt-grad-1:         rgb(217, 217, 217);/* #D9D9D9 silver top                   */
  --bt-grad-2:         rgb(163, 165, 159);/* #A3A59F sage midtone                 */
  --bt-grad-3:         rgb(180, 146, 110);/* #B4926E bronze                       */
  --bt-grad-4:         rgb(234, 156, 116);/* #EA9C74 terracotta                   */
  --bt-gradient:       linear-gradient(180deg,
                          var(--bt-grad-1) 0%,
                          var(--bt-grad-2) 39%,
                          var(--bt-grad-3) 71%,
                          var(--bt-grad-4) 100%);

  /* ─── Extended palette (sparingly) ──────────────────────────── */
  --bt-blue:           rgb(69, 100, 181); /* #4564B5 — link / highlight           */
  --bt-blue-light:     rgb(92, 114, 177); /* #5C72B1                              */
  --bt-blue-deep:      rgb(53, 75, 137);  /* #354B89 — small caps labels          */
  --bt-blue-pale:      rgb(157, 175, 193);/* #9DAFC1 — decorative bar             */
  --bt-sky:            rgb(175, 185, 195);/* #AFB9C3                              */

  /* ─── Semantic ──────────────────────────────────────────────── */
  --bt-success:        rgb( 56, 187,  10);/* #38BB0A — correct / valid            */
  --bt-danger:         rgb(254,  69,  58);/* #FE453A — incorrect / destructive    */
  --bt-warning:        rgb(180, 146, 110);/* warm bronze from gradient            */
  --bt-info:           rgb( 69, 100, 181);/* blue from extended palette           */

  /* ─── Type tokens ───────────────────────────────────────────── */
  --bt-font-sans:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bt-font-mono:      "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bt-font-display:   "Exo", "IBM Plex Sans", system-ui, sans-serif;

  /* Type scale (Figma canvas = 1920×1080, values in px).
     Scale is restrained — there is no heavy H0. */
  --bt-fs-display:     96px;   /* Exo, display only (cover pages)                 */
  --bt-fs-h1:          64px;
  --bt-fs-h2:          48px;
  --bt-fs-h3:          40px;
  --bt-fs-h4:          36px;
  --bt-fs-h5:          28px;
  --bt-fs-h6:          22px;
  --bt-fs-body-lg:     26px;
  --bt-fs-body:        22px;   /* presentation-grade body                          */
  --bt-fs-body-sm:     18px;
  --bt-fs-caption:     16px;   /* the tracked footer / label size                  */
  --bt-fs-micro:       13px;

  --bt-lh-tight:       1.0;
  --bt-lh-snug:        1.2;
  --bt-lh-normal:      1.5;

  --bt-ls-tight:      -0.02em;  /* default display / heading tracking              */
  --bt-ls-normal:      0;
  --bt-ls-wide:        0.04em;
  --bt-ls-caps:        0.15em;  /* the signature "BLOOMTEQ © 2024" tracking        */

  /* ─── Spacing scale (8-unit, rooted in the 80px canvas margin) ── */
  --bt-space-1:        4px;
  --bt-space-2:        8px;
  --bt-space-3:        14px;
  --bt-space-4:        20px;
  --bt-space-5:        30px;
  --bt-space-6:        40px;
  --bt-space-7:        60px;
  --bt-space-8:        80px;   /* canonical slide / page margin                    */
  --bt-space-9:        120px;

  /* ─── Radii ─────────────────────────────────────────────────── */
  --bt-radius-0:       0;       /* default — the system is mostly sharp            */
  --bt-radius-1:       2px;     /* section bounding boxes                          */
  --bt-radius-pill:    999px;   /* swatch circles                                  */

  /* ─── Elevation — intentionally restrained; the system relies on
          hairlines, not drop-shadows. ──────────────────────────── */
  --bt-shadow-0:       none;
  --bt-shadow-1:       0 1px 0 rgba(46, 54, 60, 0.06);
  --bt-shadow-2:       0 2px 12px rgba(46, 54, 60, 0.08);
  --bt-border:         1px solid var(--bt-hairline);
  --bt-border-ink:     1px solid var(--bt-ink);
  --bt-border-soft:    1px solid var(--bt-hairline-soft);

  /* ─── Motion ────────────────────────────────────────────────── */
  --bt-ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
  --bt-ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --bt-dur-fast:       120ms;
  --bt-dur-base:       200ms;
  --bt-dur-slow:       400ms;
}

/* ─── Semantic roles (use these in product code) ──────────────── */
:root {
  --fg-1:        var(--bt-ink);         /* primary text / icon           */
  --fg-2:        var(--bt-ink-muted);   /* secondary text                */
  --fg-3:        var(--bt-blue-pale);   /* tertiary / disabled           */
  --fg-inverse:  var(--bt-surface);
  --fg-link:     var(--bt-blue);
  --bg-1:        var(--bt-surface);
  --bg-2:        var(--bt-panel);
  --bg-3:        var(--bt-panel-3);
  --bg-inverse:  var(--bt-ink);
  --border-1:    var(--bt-hairline);
  --border-2:    var(--bt-hairline-soft);
  --border-ink:  var(--bt-ink);
}

/* ─────────────────────────────────────────────────────────────────
   Base element styles
   ───────────────────────────────────────────────────────────────── */
html { color: var(--fg-1); background: var(--bg-1); }

body {
  font-family: var(--bt-font-sans);
  font-size:   var(--bt-fs-body-sm);
  line-height: var(--bt-lh-normal);
  letter-spacing: var(--bt-ls-tight);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bt-font-sans);
  font-weight: 400;           /* Bloomteq headlines run REGULAR, not bold */
  letter-spacing: var(--bt-ls-tight);
  line-height: var(--bt-lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h1 { font-size: var(--bt-fs-h1); }
h2 { font-size: var(--bt-fs-h2); }
h3 { font-size: var(--bt-fs-h3); }
h4 { font-size: var(--bt-fs-h4); }
h5 { font-size: var(--bt-fs-h5); }
h6 { font-size: var(--bt-fs-h6); }

.bt-display {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-display);
  font-weight: 400;
  line-height: var(--bt-lh-tight);
  letter-spacing: var(--bt-ls-tight);
}

p   { font-size: var(--bt-fs-body-sm); line-height: var(--bt-lh-normal); margin: 0 0 1em; }
small, .bt-caption {
  font-family: var(--bt-font-sans);
  font-size: var(--bt-fs-caption);
  letter-spacing: var(--bt-ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Mono — used for the signature "⎯" separators and page numbers */
code, kbd, .bt-mono {
  font-family: var(--bt-font-mono);
  letter-spacing: var(--bt-ls-caps);
}

/* "Light" voice — used for quotes & attributions (Dieter Rams) */
.bt-quiet { font-weight: 300; }

/* Small-caps label (the navy "NAME" / "FONT SIZE" in type specs) */
.bt-label {
  font-family: var(--bt-font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--bt-ls-caps);
  text-transform: uppercase;
  color: var(--bt-blue-deep);
}

hr, .bt-hairline {
  border: 0;
  border-top: 1px solid var(--bt-ink);
  margin: 0;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--bt-dur-base) var(--bt-ease);
}
a:hover { opacity: 0.65; }