/* ═══════════════════════════════════════════════════════════════════════════
   MacroGuru — ELECTRIC
   The canonical brand token file. v1.1, 2026-08.
   Replaces BULLETIN (red on white). Cool slate ground, electric blue accent.

   DROP-IN REPLACEMENT for web/public/brand/tokens.css.
   Every --mg-* name is unchanged, so no page needs editing. Values only.

   Everything visual reads from here — the site, the reports, the social cards.
   Nothing downstream should hard-code a hex value or a font stack.

   ── THE ONE RULE THAT IS NOT NEGOTIABLE ────────────────────────────────────
   Electric blue (--mg-brand) means OUR NUMBER. Amber (--mg-market) means the
   MARKET's number. Green and red (--mg-pos/--mg-neg) mean signed return, and
   nothing else. A colour never carries two meanings on one surface.

   This is why the accent moved off red. Red means "down" in every finance chart
   ever drawn, so a red brand inside a chart said "MacroGuru" and "loss" at the
   same time — the worst possible ambiguity for a forecasting product. Electric
   blue sits nowhere near red or green, so it can carry the brand AND mark our
   series without collision.

   Bright blue is the most common accent in fintech, so the distinctiveness now
   comes from the ruled structure and the flush-left grid, not the hue. The rules
   below are load-bearing, not decorative.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── ground & ink ─────────────────────────────────────────────────────── */
  --mg-paper:        #FFFFFF;
  --mg-paper-2:      #EBEFF5;   /* the default page ground, sunken panels */
  --mg-paper-3:      #E3E8F0;   /* table stripes, deeper wells */
  --mg-ink:          #101522;
  --mg-ink-2:        #3E4658;   /* secondary copy */
  --mg-ink-3:        #586179;   /* captions, axis labels — MIN for text on light */
  --mg-rule:         #D7DCE5;   /* hairlines, table borders */
  --mg-rule-strong:  #B9C1CF;

  /* ── brand ────────────────────────────────────────────────────────────── */
  --mg-brand:        #1B45D7;   /* OUR NUMBER. also the primary action. */
  --mg-brand-ink:    #FFFFFF;   /* type on brand */
  --mg-brand-deep:   #122F96;   /* the box on a brand ground; pressed state */
  --mg-brand-wash:   rgba(27, 69, 215, .08);

  /* ── accent ramp — 50…900, for tints, borders and pressed states ──────── */
  --mg-brand-50:  #EDF0FE;
  --mg-brand-100: #DBE1FC;
  --mg-brand-200: #B8C4F8;
  --mg-brand-300: #8B9DF2;
  --mg-brand-400: #4A6AE5;
  --mg-brand-500: #1B45D7;   /* base — same as --mg-brand */
  --mg-brand-600: #1638AE;
  --mg-brand-700: #122F96;
  --mg-brand-900: #0A1C5C;

  /* ── data semantics — separate from brand, on purpose ─────────────────── */
  --mg-pos:          #0E7A46;   /* positive signed return ONLY */
  --mg-neg:          #C3372B;   /* negative signed return ONLY */
  --mg-market:       #B8790A;   /* the market's odds — CHART FILL, not text */
  --mg-market-text:  #8A5A06;   /* amber below 18px must use this step */
  --mg-benchmark:    #74819F;   /* the third series: history, peer, baseline */
  --mg-pos-wash:     rgba(14, 122, 70, .10);
  --mg-neg-wash:     rgba(195, 55, 43, .10);

  /* ── type ─────────────────────────────────────────────────────────────── */
  /* Switzer for everything, Geist Mono for figures. Both already self-hosted
     in brand/fonts.css. Futura and Georgia survive ONLY inside the logo. */
  --mg-font-display: "Switzer", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mg-font-body:    "Switzer", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mg-font-data:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mg-font-logo:    Futura, "Futura PT", "Avenir Next", Avenir,
                     "Century Gothic", sans-serif;   /* LOCKUP ONLY */
  --mg-font-logo-m:  Georgia, "Times New Roman", serif;  /* the mark's M ONLY */

  /* Type scale — 1.25 minor third off a 16px base. Stay on it. */
  --mg-t-hero:   3.052rem;
  --mg-t-xxl:    2.441rem;
  --mg-t-xl:     1.953rem;
  --mg-t-lg:     1.563rem;
  --mg-t-md:     1.25rem;
  --mg-t-base:   1rem;
  --mg-t-sm:     0.8rem;
  --mg-t-xs:     0.64rem;

  --mg-lh-tight: 1.06;
  --mg-lh-snug:  1.28;
  --mg-lh-body:  1.6;

  /* Switzer is a neo-grotesque: it wants tighter tracking than Futura did. */
  --mg-ls-display: -.028em;
  --mg-ls-label:   .12em;

  --mg-w-regular: 400;
  --mg-w-medium:  500;
  --mg-w-bold:    600;   /* Switzer 600 replaces Futura 700 as the bold step */

  /* ── space — 4px base ─────────────────────────────────────────────────── */
  --mg-s-1: 4px;   --mg-s-2: 8px;   --mg-s-3: 12px;  --mg-s-4: 16px;
  --mg-s-5: 24px;  --mg-s-6: 32px;  --mg-s-7: 48px;  --mg-s-8: 64px;
  --mg-s-9: 96px;

  /* ── geometry — square. no rounding anywhere. ─────────────────────────── */
  --mg-radius:      0;
  --mg-rule-w:      1px;
  --mg-rule-w-bold: 3px;
  --mg-rule-w-sect: 2px;    /* between major sections */
  --mg-measure:     65ch;

  /* ── charts ───────────────────────────────────────────────────────────── */
  --mg-chart-primary:   var(--mg-brand);       /* our series */
  --mg-chart-compare:   var(--mg-market);      /* the market's series */
  --mg-chart-benchmark: var(--mg-benchmark);   /* dashed, thinnest */
  --mg-chart-grid:      #E3E8F0;
  --mg-chart-axis:      var(--mg-ink-3);
  --mg-chart-w:         2.5px;
  --mg-chart-w-compare: 2px;
  --mg-chart-w-bench:   1.5px;

  /* ── focus — never the browser default ────────────────────────────────── */
  --mg-focus: 2px solid var(--mg-brand);
  --mg-focus-offset: 2px;
}

/* ── one theme only ────────────────────────────────────────────────────────
   The product ships a single cobalt-on-white theme. No dark mode: the OS
   preference and any stale data-theme attribute resolve to the same values. */

/* The viewer's toggle must beat the media query in both directions. */
:root[data-theme="light"] {
  --mg-paper:#FFFFFF; --mg-paper-2:#EBEFF5; --mg-paper-3:#E3E8F0;
  --mg-ink:#101522; --mg-ink-2:#3E4658; --mg-ink-3:#586179;
  --mg-rule:#D7DCE5; --mg-rule-strong:#B9C1CF;
  --mg-brand:#1B45D7; --mg-brand-ink:#FFFFFF; --mg-brand-deep:#122F96;
  --mg-brand-wash:rgba(27,69,215,.08);
  --mg-pos:#0E7A46; --mg-neg:#C3372B; --mg-market:#B8790A;
  --mg-market-text:#8A5A06; --mg-benchmark:#74819F; --mg-chart-grid:#E3E8F0;
}
:root[data-theme="dark"] {
  /* dark is retired — resolves to the light values above */
  --mg-paper:#FFFFFF; --mg-paper-2:#EBEFF5; --mg-paper-3:#E3E8F0;
  --mg-ink:#101522; --mg-ink-2:#3E4658; --mg-ink-3:#586179;
  --mg-rule:#D7DCE5; --mg-rule-strong:#B9C1CF;
  --mg-brand:#1B45D7; --mg-brand-ink:#FFFFFF; --mg-brand-deep:#122F96;
  --mg-brand-wash:rgba(27,69,215,.08);
  --mg-pos:#0E7A46; --mg-neg:#C3372B; --mg-market:#B8790A;
  --mg-market-text:#8A5A06; --mg-benchmark:#74819F; --mg-chart-grid:#E3E8F0;
}

/* ═══ primitives ══════════════════════════════════════════════════════════ */

.mg-eyebrow {
  font-family: var(--mg-font-data);
  font-size: var(--mg-t-xs);
  letter-spacing: var(--mg-ls-label);
  text-transform: uppercase;
  color: var(--mg-ink-3);
}

.mg-display {
  font-family: var(--mg-font-display);
  font-weight: var(--mg-w-medium);
  line-height: var(--mg-lh-tight);
  letter-spacing: var(--mg-ls-display);
  color: var(--mg-ink);
  text-wrap: balance;
}

.mg-rule-accent {
  height: var(--mg-rule-w-bold);
  width: 44px;
  background: var(--mg-brand);
  border: 0;
}

/* ── the lockup ─────────────────────────────────────────────────────────────
   Serif M over its bar, reversed out of a dark electric box, beside the Futura
   wordmark. The box is PART of the lockup — the mark is never set bare beside
   the wordmark. On a brand ground the box drops to --mg-brand-deep.
   Below 20px the bar closes up: ship the M alone, no bar.                     */
.mg-lockup { display: inline-flex; align-items: center; gap: 13px; }

.mg-mark {
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  /* The logo does not re-theme: the box stays the dark electric box on every
     ground, matching the shipped SVG/PNG assets and the favicon. */
  width: 32px; height: 32px; background: #1B45D7; flex: 0 0 auto;
}
.mg-mark__m   { font-family: var(--mg-font-logo-m); font-weight: 700;
                font-size: 21px; line-height: .82; color: #FFFFFF; }
.mg-mark__bar { width: 16px; height: 3px; background: #FFFFFF;
                opacity: .5; }

.mg-wordmark {
  font-family: var(--mg-font-logo);
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--mg-ink);
}

/* On a brand-coloured ground the box must stay a DARK electric box. */
.mg-on-brand .mg-mark { background: #122F96; }
.mg-on-brand .mg-wordmark { color: var(--mg-brand-ink); }

/* ── data ─────────────────────────────────────────────────────────────────── */
/* Numerals must align in every column, everywhere. */
.mg-num { font-variant-numeric: tabular-nums; font-family: var(--mg-font-data); }
.mg-pos { color: var(--mg-pos); }
.mg-neg { color: var(--mg-neg); }
.mg-market { color: var(--mg-market-text); }

/* ── interaction — themed, never browser defaults ─────────────────────────── */
.mg-btn {
  display: inline-block;
  font-family: var(--mg-font-body);
  font-weight: var(--mg-w-bold);
  font-size: .94rem; line-height: 1;
  padding: 13px 20px;
  border-radius: var(--mg-radius);
  border: 1px solid var(--mg-brand);
  background: var(--mg-brand);
  color: var(--mg-brand-ink);
  text-align: left;              /* flush left when wider than the label */
  text-decoration: none;
  cursor: pointer;
}
.mg-btn:hover  { background: var(--mg-brand-600); border-color: var(--mg-brand-600); }
.mg-btn:active { background: var(--mg-brand-700); border-color: var(--mg-brand-700); }
.mg-btn--ghost { background: transparent; color: var(--mg-ink); border-color: var(--mg-ink); }
.mg-btn--ghost:hover { background: var(--mg-ink); color: var(--mg-paper); }
.mg-btn[disabled] { opacity: .45; pointer-events: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--mg-focus);
  outline-offset: var(--mg-focus-offset);
}

::selection { background: var(--mg-brand-100); color: var(--mg-ink); }