/* ==========================================================================
   BS Design System — Colors & Type
   Bartosz Sokoliński · Strategia przed hype'em
   ========================================================================== */

/* ---------- Fonts ---------------------------------------------------------
   Brand supplied:
   - BS Black (Arial Black, fonts/Arial_Black.ttf) — reserved for the
     loudest display register: covers, section dividers, big quote marks.
     Acts as the system's "plate-style" heavy voice.
   Still substituted (pending brand files):
   - Body serif / editorial: "Source Serif 4" (Google Fonts) — stands in
     for an editorial serif like GT Sectra / Canela / Tiempos.
   - UI sans: "Inter Tight" (Google Fonts).
   - Data mono: "JetBrains Mono" (Google Fonts) — tabular numerics.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "BS Black";
  src: url("./fonts/Arial_Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BS Serif";
  src: url("./fonts/EBGaramond-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BS Serif";
  src: url("./fonts/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "BS Sans";
  src: url("./fonts/calibri.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BS Sans";
  src: url("./fonts/calibri_bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BS Mono";
  src: url("./fonts/consolas.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* --- Brand ----------------------------------------------------------- */
  --bs-oxblood:        #701828;   /* Primary. Sampled from logo. */
  --bs-oxblood-deep:   #4E0F1B;   /* Hover / pressed, darker burgundy. */
  --bs-oxblood-soft:   #8A2C3C;   /* Lifted, for accents on dark. */
  --bs-oxblood-50:     #F5E7E9;   /* Tinted background. */
  --bs-oxblood-100:    #E8C8CD;
  --bs-oxblood-200:    #CF8F98;

  /* Accent mark — the ✦ glyph, drawn cyan-accent for annotation marks
     (footnotes, calibration points in Nexus Index charts) */
  --bs-mark:           #C28B00;   /* Aged brass. Reserved for micro-accents. */

  /* --- Neutrals (warm paper → ink) ------------------------------------- */
  --bs-paper:          #F6F1EA;   /* Off-white, warm — default background. */
  --bs-paper-2:        #EFE8DC;   /* Slightly deeper paper tone. */
  --bs-rule:           #D9D1C2;   /* Hairline rules between sections. */
  --bs-mute:           #8A8275;   /* Secondary body text. */
  --bs-ink-2:          #3A342B;   /* Muted ink for body. */
  --bs-ink:            #161310;   /* Near-black ink — headings, primary. */

  /* --- Dark surface (editorial inversion) ------------------------------ */
  --bs-dark:           #141013;   /* Dark surface — printed serif on black. */
  --bs-dark-2:         #1E181B;

  /* --- Semantic (muted, not saturated. No bluish-purple.) -------------- */
  --bs-positive:       #2E5D3A;   /* Forest. Muted, not go-green. */
  --bs-caution:        #8B6508;   /* Warning — aged mustard. */
  --bs-critical:       #701828;   /* Same as oxblood: the brand IS critical. */
  --bs-neutral:        #8A8275;

  /* --- Surfaces -------------------------------------------------------- */
  --bs-bg:             var(--bs-paper);
  --bs-bg-elevated:    #FCFAF5;
  --bs-fg:             var(--bs-ink);
  --bs-fg-2:           var(--bs-ink-2);
  --bs-fg-3:           var(--bs-mute);
  --bs-border:         var(--bs-rule);
  --bs-border-strong:  #9B9383;

  /* --- Typography ------------------------------------------------------ */
  --bs-font-plate:     "BS Black", "Arial Black", "Helvetica Neue", sans-serif; /* Loudest register: covers, plate lockups, giant callouts. */
  --bs-font-display:   "BS Serif", "EB Garamond", "Times New Roman", serif;
  --bs-font-body:      "BS Serif", "EB Garamond", Georgia, serif;
  --bs-font-ui:        "BS Sans", Calibri, ui-sans-serif, system-ui, sans-serif;
  --bs-font-mono:      "BS Mono", Consolas, ui-monospace, Menlo, monospace;

  /* --- Spacing (8pt base + editorial tracks) --------------------------- */
  --bs-space-1:  4px;
  --bs-space-2:  8px;
  --bs-space-3:  12px;
  --bs-space-4:  16px;
  --bs-space-5:  24px;
  --bs-space-6:  32px;
  --bs-space-7:  48px;
  --bs-space-8:  64px;
  --bs-space-9:  96px;
  --bs-space-10: 128px;

  /* --- Radii — minimal. Architectural. ---------------------------------
     Oxblood square logo is uncompromisingly square. So is the brand. */
  --bs-radius-0:  0px;      /* Default. Hard corners. */
  --bs-radius-1:  2px;      /* Subtle, for buttons only. */
  --bs-radius-2:  4px;      /* Cards on web (max allowed). */

  /* --- Shadows — extremely restrained ---------------------------------- */
  --bs-shadow-0: none;
  --bs-shadow-1: 0 1px 0 rgba(22, 19, 16, 0.06);
  --bs-shadow-2: 0 2px 8px rgba(22, 19, 16, 0.08), 0 1px 2px rgba(22, 19, 16, 0.06);
  --bs-shadow-editorial: 0 24px 48px -16px rgba(22, 19, 16, 0.18);

  /* --- Motion (minimal; analytical) ------------------------------------ */
  --bs-ease:       cubic-bezier(0.2, 0.6, 0.2, 1);
  --bs-dur-1:      120ms;
  --bs-dur-2:      200ms;
  --bs-dur-3:      320ms;
}

/* ---------- Base type scale ---------------------------------------------
   Editorial rhythm. Serif display; sans for UI chrome and data labels;
   mono for numeric columns (Nexus Index).
   -------------------------------------------------------------------------- */
html, body {
  background: var(--bs-bg);
  color: var(--bs-fg);
  font-family: var(--bs-font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display headlines — serif, tight leading, editorial. */
h1, .bs-h1 {
  font-family: var(--bs-font-display);
  font-weight: 600;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--bs-fg);
  text-wrap: balance;
}
h2, .bs-h2 {
  font-family: var(--bs-font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--bs-fg);
  text-wrap: balance;
}
h3, .bs-h3 {
  font-family: var(--bs-font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bs-fg);
}
h4, .bs-h4 {
  font-family: var(--bs-font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-fg-3);
}

/* Body */
p, .bs-p {
  font-family: var(--bs-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--bs-fg-2);
  text-wrap: pretty;
}
.bs-lede {
  font-family: var(--bs-font-body);
  font-size: 22px;
  line-height: 1.4;
  font-style: italic;
  color: var(--bs-fg);
}
.bs-small {
  font-size: 14px;
  line-height: 1.45;
  color: var(--bs-fg-3);
}

/* UI label — all caps, tracked. Used for eyebrows, chart axes, section tags. */
.bs-eyebrow {
  font-family: var(--bs-font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bs-fg-3);
}

/* Data / numeric — mono, tabular. The heart of the Nexus Index. */
.bs-data, code, pre, .bs-mono {
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.bs-score {
  font-family: var(--bs-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bs-fg);
}

/* Quote — the house voice. Italic serif, oxblood rule on left. */
blockquote, .bs-quote {
  font-family: var(--bs-font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  padding: 0 0 0 var(--bs-space-5);
  border-left: 3px solid var(--bs-oxblood);
  color: var(--bs-fg);
}

/* Rule — thin horizontal hairline, never decorative. */
hr, .bs-hr {
  border: 0;
  border-top: 1px solid var(--bs-border);
  margin: var(--bs-space-6) 0;
}

/* Link — oxblood underline, no decoration games. */
a, .bs-link {
  color: var(--bs-oxblood);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--bs-dur-1) var(--bs-ease);
}
a:hover, .bs-link:hover {
  color: var(--bs-oxblood-deep);
}

/* The signature accent glyph — ✦ U+2726. Only allowed emoji/dingbat. */
.bs-mark::before {
  content: "✦";
  color: var(--bs-oxblood);
  font-size: 0.9em;
  padding-right: 0.35em;
}