/* =========================================================================
   bdg — colors_and_type.css
   "Data In All Honesty" — Decision Intelligence Briefing System
   Design tokens for color, type, spacing. Drop into any HTML.
   ========================================================================= */

/* ---------------- FONTS ---------------- */
/* DM Mono */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DMMono-Regular.woff2") format('woff2'),
       url("fonts/DMMono-Regular-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/DMMono-Medium.woff2") format('woff2'),
       url("fonts/DMMono-Medium-ext.woff2") format('woff2');
}

/* Instrument Sans (variable wght 400–700) */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/InstrumentSans-Regular.woff2") format('woff2'),
       url("fonts/InstrumentSans-Regular-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/InstrumentSans-Italic.woff2") format('woff2'),
       url("fonts/InstrumentSans-Italic-ext.woff2") format('woff2');
}

/* Instrument Sans Condensed — static TTF for headlines */
@font-face {
  font-family: 'Instrument Sans Cond';
  src: url("fonts/InstrumentSansCondensed.ttf") format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans Condensed';
  src: url("fonts/InstrumentSansCondensed.ttf") format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Instrument Serif — reserved for editorial pull-quotes only */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InstrumentSerif-Regular.woff2") format('woff2'),
       url("fonts/InstrumentSerif-Regular-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InstrumentSerif-Italic.woff2") format('woff2'),
       url("fonts/InstrumentSerif-Italic-ext.woff2") format('woff2');
}

/* ---------------- TOKENS ---------------- */
:root {
  /* NEUTRAL LADDER — official ink scale */
  --ink-00: #FFFFFF;
  --ink-05: #09090B;       /* Default dark base. Primary ink. */
  --ink-10: #161618;       /* .ink background */
  --ink-20: #27272A;
  --ink-40: #404045;
  --ink-50: #53535A;       /* Secondary text / labels */
  --ink-60: #727279;
  --ink-75: #A2A2A9;       /* Muted text on dark */
  --ink-85: #D5D5D7;
  --ink-92: #E4E4E7;
  --ink-96: #F4F4F5;       /* Bone — alt paper */
  --ink-98: #FAFAFA;       /* Default paper */
  --ink-100: #FFFFFF;

  --hairline: 0.8px;
  --stroke: #D5D5D7;
  --stroke-dark: rgba(255, 255, 255, 0.18);

  /* SIGNAL ACCENT — load-bearing brand color */
  --accent: #F55910;       /* signal orange (default) */

  /* DATA PALETTE */
  --c-blue:   #3236FF;
  --c-green:  #00D190;
  --c-yellow: #FFE241;
  --c-orange: #F55910;
  --c-red:    #EF353E;
  --c-purple: #A653F9;
  --accent-2: var(--c-blue);
  --accent-3: var(--c-yellow);

  /* FOREGROUND / BACKGROUND SEMANTICS */
  --fg1: var(--ink-05);    /* primary text */
  --fg2: var(--ink-50);    /* secondary text */
  --fg3: var(--ink-60);    /* tertiary */
  --bg1: var(--ink-98);    /* paper */
  --bg2: var(--ink-96);    /* bone */
  --bg-ink: var(--ink-05); /* dark slide */

  /* TYPE SCALE — slide sizes (px). For 1920×1080 stage */
  --t-display:  160px;
  --t-h1:       96px;
  --t-title:    64px;
  --t-subtitle: 44px;
  --t-body-l:   34px;      /* L — primary supporting copy */
  --t-body-m:   26px;      /* M — standard reading copy */
  --t-body-s:   22px;      /* S — list items, descs, meta */
  --t-body-xs:  18px;      /* XS — captions, footnotes */

  /* aliases */
  --t-body:     var(--t-body-l);
  --t-small:    var(--t-body-m);
  --t-chrome:   var(--t-body-xs);

  /* SPACING */
  --space-xs:  12px;
  --space-s:   24px;
  --space-m:   36px;
  --space-l:   60px;
  --space-xl:  100px;
  --space-xxl: 160px;
  --pad-top:   100px;
  --pad-bot:   150px;
  --pad-x:     100px;
  --gap-title: 52px;
  --gap-item:  28px;

  /* FONTS */
  --f-headline:  'Instrument Sans Cond', 'Helvetica Neue', Arial, sans-serif;
  --f-body:      'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-editorial: 'Instrument Serif', 'Times New Roman', serif;
  --f-mono:      'DM Mono', ui-monospace, Menlo, monospace;
}

/* ---------------- SEMANTIC TYPE CLASSES ---------------- */
.bdg-display, h1.bdg {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: var(--t-display);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.bdg-h1, h2.bdg {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: var(--t-h1);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.bdg-title, h3.bdg {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: var(--t-title);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.bdg-subtitle, h4.bdg {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: var(--t-subtitle);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.bdg-body, p.bdg {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t-body-l);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.bdg-body-m   { font-size: var(--t-body-m);  line-height: 1.35; }
.bdg-body-s   { font-size: var(--t-body-s);  line-height: 1.4;  }
.bdg-body-xs  { font-size: var(--t-body-xs); line-height: 1.45; letter-spacing: 0; }

.bdg-mono, code.bdg {
  font-family: var(--f-mono);
  font-size: var(--t-body-m);
  letter-spacing: 0.02em;
  font-weight: 400;
}
.bdg-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-body-s);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: currentColor;
  opacity: 0.5;
}
.bdg-italic {
  font-family: var(--f-headline);
  font-style: normal;
  text-transform: uppercase;
  background: var(--accent);
  color: #FFFFFF;
  padding: 0.04em 0.14em 0.08em;
  line-height: 0.88;
  display: inline-block;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.bdg-accent { color: var(--accent); }
.bdg-muted  { opacity: 0.55; }

/* hairline */
.bdg-hair { border: 0; height: 1px; background: currentColor; opacity: 0.25; width: 100%; }