/* Luna design tokens — Mark's p47 design (29 Oct 2026).
   Sources of truth (unpacked bundles):
     ~/jobs/_briefs/p47-design/Luna Workbench.html        (desktop, light)
     ~/jobs/_briefs/p47-design/Luna Workbench Dark.html   (desktop, dark)
     ~/jobs/_briefs/p47-design/Luna Mobile.html           (phone, light)
     ~/jobs/_briefs/p47-design/Luna Mobile Dark.html      (phone, dark)
   The p47 light palette is byte-identical to p45 (verified by diffing
   the unpacked templates); p47 adds a real dark theme (copied verbatim
   below from the two dark files — it replaces p45's derived dark
   values) and a phone layout (see style.css @media sections and
   DESIGN.md §7). See DESIGN.md for the full extraction (type scale,
   colours, radii, shadows, components, states) and the
   "not in design – derived" list.

   The pre-p45 token names (--bg, --surface, --ink, --accent, --snav-*,
   --aiviz-*, …) survive as aliases of the new values so every existing
   rule and inline style keeps working; only the values changed.
   Fonts: Figtree (UI) + Geist Mono (URLs/code/meta), both SIL OFL 1.1,
   subset files decoded from the design bundle (see OFL-Figtree.txt /
   OFL-GeistMono.txt). The bundle declares the same static subset for
   each weight, so 500/600 synthesize exactly as the design renders. */

/* ---------- Figtree (latin + latin-ext) ---------- */
/* p49's icon font (Material Symbols Rounded) is gone in p50: the demo's
   glyphs are inline SVG now (msrpaths.js, app.js icon()). */
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Geist Mono (latin + latin-ext) ---------- */
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- p45 palette (verbatim from the design bundle) ---------- */
  /* brand blues */
  --luna-primary: #1e6fe8;
  --luna-primary-hover: #1460d6;
  --luna-primary-on-accent: #ffffff; /* text/icons on filled primary fills (design: white on #1e6fe8) */
  /* p45b: --luna-on-accent was referenced by style.css (.btn.primary,
     .map-cell.rank-1/2) but never defined, so primary buttons inherited
     dark ink on the blue fill. Defined here to match the design. */
  --luna-on-accent: var(--luna-primary-on-accent);
  --luna-primary-deep: #0b4fb8;
  --luna-primary-deep-2: #0d4fb8;
  --luna-link: #1460d6;
  --luna-avatar-bg: #dce8fb;
  --luna-avatar-fg: #0f55c4;
  /* blue ramp (share/distribution bars) + grid variant */
  --luna-blue-1: #0b4fb8;
  --luna-blue-2: #1e6fe8;
  --luna-blue-3: #4aa0f3;
  --luna-blue-4: #8ccbfa;
  --luna-blue-5: #cfe6fd;
  --luna-blue-6: #e6eef9;
  --luna-grid-2: #3d8ef0;
  --luna-grid-3: #9ccff9;
  --luna-grid-4: #e3effd;
  /* KPI icon-tile shade/tint pairs (design shades[]) */
  --luna-shade-1: #0b4fb8;  --luna-tint-1: #e3edfd;
  --luna-shade-2: #1e6fe8;  --luna-tint-2: #e6f0ff;
  --luna-shade-3: #2f8ff0;  --luna-tint-3: #e7f3fe;
  --luna-shade-4: #3aa3f2;  --luna-tint-4: #e9f6fe;
  /* surfaces */
  --luna-canvas: #f6f8fb;
  --luna-card: #ffffff;
  --luna-card-soft: #f5f8fc;
  --luna-stripe: #fafcfe;
  --luna-code-bg: #f7f9fc;
  --luna-tile: #f1f5fa;
  --luna-fill-muted: #eef1f6;
  --luna-grid-track: #eef3f8;
  /* borders */
  --luna-border: #e3e8f0;
  --luna-border-soft: #edf2f8;
  --luna-border-row: #f1f5fa;
  --luna-border-input: #d9e2ee;
  --luna-border-strong: #cfdcf0;
  --luna-border-dashed: #c9d6ea;
  --luna-border-upload: #9fbfec;
  --luna-border-hover: #b9cff0;
  /* text */
  --luna-ink: #141b26;
  --luna-ink-nav: #222b38;
  --luna-ink-prose: #2b3442;
  --luna-ink-cell: #4a5363;
  --luna-ink-2nd: #5b6576;
  --luna-ink-muted: #7d8796;
  --luna-ink-heading: #8a93a2;
  --luna-ink-faint: #a3acba;
  /* tints */
  --luna-active: #eaf3ff;
  --luna-active-2: #e6f0ff;
  --luna-chip-bg: #eef4fd;
  /* semantic */
  --luna-up: #1a8a5a;
  --luna-up-text: #167a4e;
  --luna-down: #d2492f;
  --luna-down-text: #c23a22;
  --luna-warn: #c98a12;
  --luna-amber: #b7860f;
  --luna-amber-soft: #fff3dc;
  --luna-stars: #e3a514;
  /* tag tones (design tone()) */
  --luna-tag-good-bg: #e6f5ee;   --luna-tag-good-fg: #167a4e;
  --luna-tag-bad-bg: #fdecea;    --luna-tag-bad-fg: #c23a22;
  --luna-tag-muted-bg: #eef1f6;  --luna-tag-muted-fg: #5b6576;
  --luna-tag-info-bg: #e6f0ff;   --luna-tag-info-fg: #1460d6;
  /* pro banner / note */
  --luna-pro-bg: #fff8e8;  --luna-pro-border: #f3e2b5;  --luna-pro-icon: #b7860f;  --luna-pro-text: #7a6a45;
  --luna-note-bg: #eaf3ff;  --luna-note-border: #cfe0fa; --luna-note-text: #3f5577;
  /* overlays + shadows */
  --luna-dim: rgba(20,27,38,0.32);
  --luna-shadow-pop: 0 12px 32px rgba(20,40,80,0.14);
  --luna-shadow-cell: 0 1px 2px rgba(20,40,80,0.12);
  --luna-shadow-sheet: 0 -8px 32px rgba(20,40,80,0.14);
  /* focus */
  --luna-focus-ring: 0 0 0 3px #e3edfd;
  /* radii */
  --luna-radius-card: 12px;
  --luna-radius-pop: 12px;
  --luna-radius-modal: 14px;
  --luna-radius-ctl: 8px;
  --luna-radius-tag: 6px;
  --luna-radius-tile: 10px;
  /* fonts */
  --luna-font: "Figtree", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- shell metrics (design grid: 60px 264px 1fr) ---------- */
  --snav-rail-width: 60px;
  --snav-panel-width: 264px;
  --snav-header-height: 56px;
  --snav-chrome-bg: #ffffff;
  --snav-chrome-border: #e3e8f0;
  --snav-selected: #eaf3ff;
  --snav-hover: #f1f5fa;
  --snav-item-text: #222b38;
  --snav-rail-label: #5b6576;
  --snav-rail-icon: #5b6576;
  --snav-heading: #8a93a2;
  --snav-subheading: #8a93a2;
  --snav-crown: #b7860f;
  --snav-dot: #b7860f;
  --snav-backdrop: rgba(20,27,38,0.32);
  --snav-focus: inset 0 0 0 3px #e3edfd;

  /* ---------- pre-p45 Luna token names as aliases (nothing breaks) ---------- */
  --bg: var(--luna-canvas);
  --surface: var(--luna-card);
  --surface-2: var(--luna-tile);
  --ink: #141b26;
  --ink-2: #5b6576;
  --ink-3: #7d8796;
  --line: #e3e8f0;
  --line-2: #d9e2ee;
  --accent: #1e6fe8;
  --accent-strong: #1460d6;
  --accent-soft: #eaf3ff;
  --on-accent: #ffffff;
  --good: #167a4e;
  --good-soft: #e6f5ee;
  --bad: #c23a22;
  --bad-soft: #fdecea;
  --warn: #a86a00;
  --warn-soft: #fff3dc;
  --warn-fill: #c98a12;
  --shadow: 0 12px 32px rgba(20,40,80,0.14);

  /* aiviz chart palette → design ramp (derived; see DESIGN.md) */
  --aiviz-mentions: #1e6fe8;
  --aiviz-citations: #167a4e;
  --aiviz-pages: #c98a12;
  --aiviz-violet: #8ccbfa;
}

/* ---------- dark theme (p47 — verbatim from Luna Workbench Dark.html /
   Luna Mobile Dark.html; both dark files carry the same palette).
   Light wins by cascade order for the base tokens; dark remaps them
   below. The ramp flips in dark: the lightest light-mode ramp steps
   become the deepest dark-mode steps and vice versa (that is how the
   dark design actually colours its bars). ---------- */
html[data-theme="dark"] {
  /* brand blues (dark design: filled primary #2a6fe0, hover #3b7ef0,
     link/active text #6aa8ff, deep accent #8ab9ff) */
  --luna-primary: #2a6fe0;
  --luna-primary-hover: #3b7ef0;
  --luna-primary-deep: #8ab9ff;
  --luna-primary-deep-2: #8ab9ff;
  --luna-link: #6aa8ff;
  --luna-avatar-bg: #1a3150;
  --luna-avatar-fg: #8ab9ff;
  /* blue ramp (flipped, verbatim) + grid variant */
  --luna-blue-1: #8ab9ff;
  --luna-blue-2: #2a6fe0;
  --luna-blue-3: #2563b8;
  --luna-blue-4: #1f4f8a;
  --luna-blue-5: #1a3456;
  --luna-blue-6: #1f2a38;
  --luna-grid-2: #3b7fe0;
  --luna-grid-3: #2a5590;
  --luna-grid-4: #1c2d45;
  /* KPI icon-tile shade/tint pairs (dark tints[]) */
  --luna-shade-1: #8ab9ff;  --luna-tint-1: #15294a;
  --luna-shade-2: #2a6fe0;  --luna-tint-2: #15294a;
  --luna-shade-3: #5aa2f5;  --luna-tint-3: #132a42;
  --luna-shade-4: #6bb8f5;  --luna-tint-4: #12293c;
  /* surfaces */
  --luna-canvas: #0c1117;
  --luna-card: #131a23;
  --luna-card-soft: #18202b;
  --luna-stripe: #10161e;
  --luna-code-bg: #0f151d;
  --luna-tile: #1a2330;
  --luna-fill-muted: #222c39;
  --luna-grid-track: #18212c;
  /* borders */
  --luna-border: #263241;
  --luna-border-soft: #1f2935;
  --luna-border-row: #1a2330;
  --luna-border-input: #2e3b4c;
  --luna-border-strong: #2c4466;
  --luna-border-dashed: #2c4466;
  --luna-border-upload: #3a5d8c;
  --luna-border-hover: #35527a;
  /* text */
  --luna-ink: #e8edf3;
  --luna-ink-nav: #d5dce5;
  --luna-ink-prose: #d5dce5;
  --luna-ink-cell: #aab4c1;
  --luna-ink-2nd: #9aa5b4;
  --luna-ink-muted: #808b9a;
  --luna-ink-heading: #808b9a;
  --luna-ink-faint: #5d6878;
  /* tints */
  --luna-active: #132640;
  --luna-active-2: #15294a;
  --luna-chip-bg: #132640;
  --luna-focus-ring: 0 0 0 3px #15294a;
  /* semantic */
  --luna-up: #45c08a;
  --luna-up-text: #4cc98f;
  --luna-down: #f2735c;
  --luna-down-text: #ff8a75;
  --luna-warn: #e9b04a;
  --luna-amber: #e0a93a;
  --luna-amber-soft: #2a2212;
  /* tag tones (dark tone()) */
  --luna-tag-good-bg: #10291f;   --luna-tag-good-fg: #4cc98f;
  --luna-tag-bad-bg: #331713;    --luna-tag-bad-fg: #ff8a75;
  --luna-tag-muted-bg: #222c39;  --luna-tag-muted-fg: #9aa5b4;
  --luna-tag-info-bg: #15294a;   --luna-tag-info-fg: #6aa8ff;
  /* pro banner / note */
  --luna-pro-bg: #2a2212;  --luna-pro-border: #4a3b1a;  --luna-pro-icon: #e0a93a;  --luna-pro-text: #c9b68a;
  --luna-note-bg: #132640;  --luna-note-border: #1f3b60; --luna-note-text: #a9bdd8;
  /* overlays + shadows */
  --luna-dim: rgba(0,0,0,0.6);
  --luna-shadow-pop: 0 12px 32px rgba(0,0,0,0.5);
  --luna-shadow-cell: 0 1px 2px rgba(0,0,0,0.5);
  --luna-shadow-sheet: 0 -8px 32px rgba(0,0,0,0.5);

  /* shell metrics (dark nav() values) */
  --snav-chrome-bg: #131a23;
  --snav-chrome-border: #263241;
  --snav-selected: #132640;
  --snav-hover: #1a2330;
  --snav-item-text: #d5dce5;
  --snav-rail-label: #9aa5b4;
  --snav-rail-icon: #9aa5b4;
  --snav-heading: #808b9a;
  --snav-subheading: #808b9a;
  --snav-crown: #e0a93a;
  --snav-dot: #e0a93a;
  --snav-backdrop: rgba(0,0,0,0.6);
  --snav-focus: inset 0 0 0 3px #15294a;

  /* aliases re-derived from the p47 dark palette */
  --bg: var(--luna-canvas);
  --surface: var(--luna-card);
  --surface-2: var(--luna-tile);
  --ink: #e8edf3;
  --ink-2: #9aa5b4;
  --ink-3: #808b9a;
  --line: #263241;
  --line-2: #2e3b4c;
  --accent: #2a6fe0;
  --accent-strong: #6aa8ff;
  --accent-soft: #132640;
  --on-accent: #ffffff;
  --good: #4cc98f;
  --good-soft: #10291f;
  --bad: #ff8a75;
  --bad-soft: #331713;
  --warn: #e0a93a;
  --warn-soft: #2a2212;
  --warn-fill: #e9b04a;
  --shadow: 0 12px 32px rgba(0,0,0,0.5);

  /* aiviz chart palette → design dark ramp */
  --aiviz-mentions: #2a6fe0;
  --aiviz-citations: #4cc98f;
  --aiviz-pages: #e9b04a;
  --aiviz-violet: #1f4f8a;
}