/* ============================================================
   Broadwaters Digital — Colors & Type
   Official 2026 Brand Guidelines
   ============================================================ */

/* ---------- Fonts ---------- */
/* Polymath is the exclusive typeface.
   - Polymath      : all-purpose neutral
   - PolymathText  : optimized for body at smaller sizes
   - PolymathDisp  : optimized for display / large headlines
*/
@font-face { font-family: "Polymath"; src: url("fonts/Polymath-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath"; src: url("fonts/Polymath-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Polymath"; src: url("fonts/Polymath-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath"; src: url("fonts/Polymath-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Polymath"; src: url("fonts/Polymath-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath"; src: url("fonts/Polymath-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Polymath"; src: url("fonts/Polymath-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath"; src: url("fonts/Polymath-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Polymath Text"; src: url("fonts/PolymathText-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath Text"; src: url("fonts/PolymathText-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath Text"; src: url("fonts/PolymathText-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Polymath Text"; src: url("fonts/PolymathText-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath Text"; src: url("fonts/PolymathText-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath Text"; src: url("fonts/PolymathText-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Polymath Display"; src: url("fonts/PolymathDisp-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath Display"; src: url("fonts/PolymathDisp-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath Display"; src: url("fonts/PolymathDisp-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath Display"; src: url("fonts/PolymathDisp-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Typeface tokens ---------- */
  --font-display: "Polymath Display", "Polymath", "Inter", "DM Sans", system-ui, sans-serif;
  --font-sans:    "Polymath", "Inter", "DM Sans", system-ui, sans-serif;
  --font-text:    "Polymath Text", "Polymath", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Core brand colors ---------- */
  --bw-primary-blue:    #0A2540;  /* Foundation — dark backgrounds, primary text on light */
  --bw-secondary-blue:  #1E3A5F;  /* Secondary surface on dark layouts */
  --bw-accent-green:    #22C55E;  /* 10% accent — CTAs, rules, tagline treatments */

  /* ---------- Neutrals ---------- */
  --bw-neutral-1:       #F8FAFC;  /* Light canvas / document background */
  --bw-neutral-2:       #E5E7EB;  /* Hairline rules, subtle fills */
  --bw-neutral-3:       #9CA3AF;  /* Secondary text, muted labels */
  --bw-neutral-4:       #6B7280;  /* Tertiary text */
  --bw-white:           #FFFFFF;
  --bw-black:           #000000;

  /* ---------- Tertiary (CHARTS & DASHBOARDS ONLY) ---------- */
  --bw-chart-cyan:      #06B6D4;
  --bw-chart-purple:    #6366F1;

  /* ---------- Semantic — light mode (default) ---------- */
  --bg:           var(--bw-neutral-1);
  --bg-elevated: var(--bw-white);
  --bg-subtle:   #EEF2F7;
  --surface-inverse: var(--bw-primary-blue);

  --fg:          var(--bw-primary-blue);      /* Primary text on light */
  --fg-muted:    var(--bw-neutral-4);         /* Secondary copy */
  --fg-subtle:   var(--bw-neutral-3);         /* Labels, captions */
  --fg-inverse:  var(--bw-white);
  --fg-accent:   var(--bw-accent-green);

  --rule:        var(--bw-neutral-2);
  --rule-strong: var(--bw-neutral-3);
  --rule-on-dark: rgba(255,255,255,0.14);

  --accent:      var(--bw-accent-green);
  --accent-ink:  #15803D;  /* darker green for hover/press on green */
  --link:        var(--bw-primary-blue);
  --link-hover:  var(--bw-accent-green);

  /* ---------- Type scale (px) ----------
     Reference: Heading 85 / Subheading 36 / Highlight 25 / Body 22 at slide scale.
     For web/doc contexts, scaled ~60% unless noted.
  */
  --fs-display-1: 85px;   /* Slide / cover headline */
  --fs-display-2: 56px;
  --fs-h1:        36px;   /* Subheading / doc H1 */
  --fs-h2:        28px;
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-small:     14px;
  --fs-micro:     12px;
  --fs-label:     11px;   /* ALL CAPS eyebrow labels */

  --lh-display: 1.08;
  --lh-heading: 1.15;
  --lh-body:    1.5;
  --lh-tight:   1.2;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-label:  0.14em;   /* eyebrow / category labels */

  /* ---------- Spacing ---------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Radii (4px MAX — no big rounds) ---------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;     /* maximum */

  /* ---------- Borders ---------- */
  --border-hairline: 1px solid var(--rule);
  --border-strong:   1px solid var(--rule-strong);
  --border-accent:   1px solid var(--accent);

  /* ---------- Shadows (used sparingly; institutional) ---------- */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(10, 37, 64, 0.06), 0 1px 1px rgba(10, 37, 64, 0.04);
  --shadow-overlay: 0 12px 32px rgba(10, 37, 64, 0.12);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 320ms;
}

/* ---------- Dark (Primary Blue) semantic overrides ---------- */
.bw-dark,
[data-theme="dark"] {
  --bg:           var(--bw-primary-blue);
  --bg-elevated:  var(--bw-secondary-blue);
  --bg-subtle:    #16304E;
  --surface-inverse: var(--bw-neutral-1);

  --fg:         var(--bw-white);
  --fg-muted:   #B9C7D6;
  --fg-subtle:  #8AA0B8;
  --fg-inverse: var(--bw-primary-blue);

  --rule:        var(--rule-on-dark);
  --rule-strong: rgba(255,255,255,0.28);

  --link: var(--bw-white);
  --link-hover: var(--bw-accent-green);
}

/* ============================================================
   Semantic element styles
   Use these on raw HTML elements; override with component classes.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 300;            /* Polymath Light is the default body weight */
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 500;            /* Polymath Medium — headings */
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
  color: var(--fg);
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 500; }

.display-1 { font-family: var(--font-display); font-size: var(--fs-display-1); font-weight: 500; line-height: var(--lh-display); letter-spacing: var(--tracking-tight); }
.display-2 { font-family: var(--font-display); font-size: var(--fs-display-2); font-weight: 500; line-height: var(--lh-display); letter-spacing: var(--tracking-tight); }

p {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

.highlight {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

/* Eyebrow / category label — e.g. "RESEARCH INSIGHTS" */
.eyebrow,
.label-caps {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* Hairline rule used throughout layouts */
.rule,
hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--s-5) 0;
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

small, .caption {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  line-height: 1.45;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Tabular figures for numeric tables — Bloomberg-density */
.num, td.num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}