/* MathBB theme: Blueprint
 * High-contrast technical. Near-neutral cool greys, an electric blue, square corners and Plex throughout — precise and instrument-like.
 * Generated by tools/build_themes.py — do not edit by hand.
 */

@import url('/static/vendor/fonts/fonts.css');

:root {
    --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-reading: 'IBM Plex Serif', 'Charter', Georgia, 'Times New Roman', serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-capsule: 'CapsuleGlyph', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --radius-xs: 0px;
    --radius-sm: 0px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-xl: 3px;
    --radius-2xl: 4px;
    --radius-3xl: 6px;
    --radius-pill: 999px;
    --lp-radius: 4px;
    --surface-1: #ffffff;
    --surface-2: #f9f9fa;
    --surface-3: #f4f5f6;
    --surface-4: #eff0f1;
    --surface-5: #ebeced;
    --surface-6: #e0e2e4;
    --surface-7: #cccfd2;
    --surface-8: #b7bbc0;
    --surface-inverse: #2e3136;
    --text-strong: #111213;
    --text-1: #202122;
    --text-2: #424548;
    --text-3: #56595d;
    --text-4: #787d82;
    --text-5: #8a8f93;
    --text-6: #a0a3a7;
    --text-7: #b2b5b8;
    --text-8: #c6c8ca;
    --text-9: #dadbdd;
    --border-1: #ecedee;
    --border-2: #e7e8ea;
    --border-3: #d9dbde;
    --border-4: #d3d5d9;
    --border-5: #c0c4c8;
    --border-6: #979ea5;
    --border-inverse: #40454a;
    --sb-bg: #1d2b3c;
    --sb-bg-hover: #26384e;
    --sb-bg-active: #2d425c;
    --sb-panel: #131d29;
    --sb-panel-2: #1a2839;
    --sb-panel-3: #172332;
    --sb-border: #26384e;
    --sb-border-strong: #314763;
    --sb-text: #d8dce1;
    --sb-text-dim: #c6cbd2;
    --sb-text-faint: #9fa9b4;
    --sb-text-soft: #8d98a5;
    --sb-text-mid: #7a8696;
    --sb-text-dimmest: #5a6572;
    --sb-text-strong: #ffffff;
    --sb-accent: #5c9aff;
    --accent: #0f5fe0;
    --accent-hover: #074cba;
    --accent-deep: #033586;
    --accent-light: #4487f2;
    --accent-pale: #8bb1ee;
    --accent-faint: #b5cbed;
    --accent-bg: #e8effa;
    --accent-disabled: #a5b3ca;
    --accent-on-dark: #72a7fd;
    --slate: #69798c;
    --link: #0357de;
    --accent2: #8a3ffc;
    --accent2-light: #a971fd;
    --accent2-border: #be9ef0;
    --accent2-bg: #f2ecfb;
    --danger: #cf2b2b;
    --danger-deep: #861313;
    --danger-bg: #f9eeee;
    --danger-border: #e5c2c2;
    --danger-strong: #c61515;
    --danger-btn: #cb4949;
    --danger-vivid: #e53f33;
    --danger-muted: #d19e9e;
    --danger-muted-bd: #ae5151;
    --success: #0f8a4a;
    --success-deep: #06753b;
    --success-bg: #e9f9f1;
    --success-border: #9cdebb;
    --success-btn: #1d9b59;
    --warning: #bd8300;
    --warning-deep: #8f6300;
    --warning-bg: #fdf9f0;
    --warning-border: #ead4a4;
    --warning-text: #b87f00;
    --warning-vivid: #b38500;
    --warning-muted: #ddc388;
    --warning-muted-bd: #b68e35;
    --syn-header: #023b97;
    --syn-marker: #787d82;
    --syn-text: #202122;
    --syn-fence: #288f37;
    --syn-code: #198520;
    --syn-math: #bb2020;
    --syn-link-bracket: #1757bf;
    --syn-link-text: #144ba4;
    --syn-link-url: #5a18be;
    --syn-list: #ae6513;
    --syn-rule: #b2b5b8;
    --tag-blue-bg: #e3ecf7;
    --tag-blue-fg: #224d87;
    --tag-violet-bg: #ebe3f7;
    --tag-violet-fg: #4a2287;
    --tag-green-bg: #e3f7ec;
    --tag-green-fg: #22874c;
    --tag-amber-bg: #f7f0e3;
    --tag-amber-fg: #876222;
    --tag-red-bg: #f7e6e3;
    --tag-red-fg: #872f22;
    --tag-teal-bg: #e3f6f7;
    --tag-teal-fg: #228387;
    --tag-pink-bg: #f7e3ee;
    --tag-pink-fg: #872258;
    --tag-slate-bg: #e8ecf3;
    --tag-slate-fg: #425067;
    --lp-ink: #121314;
    --lp-ink-2: #262729;
    --lp-body: #424548;
    --lp-muted: #56595d;
    --lp-faint: #a0a3a7;
    --lp-surface: #ffffff;
    --lp-surface-2: #f9f9fa;
    --lp-surface-3: #f4f5f6;
    --lp-wash: #e8effa;
    --lp-wash-2: #eef2fa;
    --lp-wash-3: #f5f7fb;
    --lp-border: #d9dbde;
    --lp-border-2: #c0c4c8;
    --lp-border-3: #d3d5d9;
    --lp-border-4: #e7e8ea;
    --lp-border-5: #ecedee;
    --lp-accent: #074cba;
    --lp-accent-deep: #033586;
    --lp-accent-pale: #b5cbed;
    --lp-accent-pale-2: #e8effa;
    --lp-danger: #ad2424;
    --lp-danger-bg: #f9eeee;
    --lp-danger-bd: #e5c2c2;
    --lp-danger-bd-2: #ddb1b1;
    --lp-danger-btn: #cb4949;
    --lp-success: #0c6e3b;
    --lp-success-bg: #e9f9f1;
    --lp-success-bd: #9cdebb;
    --lp-success-bd-2: #95dab6;
    --lp-success-btn: #1d9b59;
    --lp-warning: #bd8300;
    --lp-warning-bd: #ead4a4;
    --lp-scrim: rgba(20,25,31,0.45);
    --lp-glass: rgba(255,255,255,0.92);
    --lp-glass-2: rgba(255,255,255,0.55);
    --lp-fade: rgba(232,239,250,0);
    --lp-fade-2: rgba(249,249,250,0);
    --lp-ring: rgba(15,95,224,0.22);
    --lp-tint-1: rgba(16,20,25,0.05);
    --lp-tint-2: rgba(16,20,25,0.06);
    --lp-tint-3: rgba(16,20,25,0.07);
    --lp-tint-4: rgba(16,20,25,0.08);
    --lp-tint-5: rgba(16,20,25,0.1);
    --lp-tint-6: rgba(16,20,25,0.14);
    --lp-tint-7: rgba(16,20,25,0.18);
    --text-inverse: #fff;
    --text-inverse-dim: rgba(255,255,255,0.6);
    --glass: rgba(255,255,255,0.7);
    --glass-strong: rgba(255,255,255,0.95);
    --glass-faint: rgba(183,187,192,0.1);
    --scrim: rgba(12,15,19,0.4);
    --scrim-strong: rgba(12,15,19,0.5);
    --tint-1: rgba(8,10,12,0.05);
    --tint-2: rgba(8,10,12,0.06);
    --tint-3: rgba(8,10,12,0.08);
    --shadow-1: rgba(8,10,12,0.12);
    --shadow-2: rgba(8,10,12,0.15);
    --shadow-3: rgba(8,10,12,0.2);
    --shadow-4: rgba(8,10,12,0.25);
    --shadow-5: rgba(8,10,12,0.3);
    --accent-wash-1: rgba(15,95,224,0.04);
    --accent-wash-2: rgba(15,95,224,0.08);
    --accent-wash-3: rgba(15,95,224,0.3);
    --accent2-wash-1: rgba(138,63,252,0.06);
    --accent2-wash-2: rgba(138,63,252,0.1);
    --accent2-wash-3: rgba(138,63,252,0.15);
    --success-wash: rgba(15,138,74,0.1);
    --danger-wash: rgba(207,43,43,0.1);
    --danger-wash-2: rgba(207,43,43,0.08);
    --warning-wash: rgba(189,131,0,0.08);
    --warning-glow: rgba(189,131,0,0.35);
}

/* Dark variant — only the colors change; type and shape are shared. */
:root[data-mode="dark"] {
    --surface-1: #131618;
    --surface-2: #1a1d20;
    --surface-3: #212529;
    --surface-4: #282c31;
    --surface-5: #2f343a;
    --surface-6: #3a4148;
    --surface-7: #4c555e;
    --surface-8: #5f6975;
    --surface-inverse: #434c56;
    --text-strong: #ffffff;
    --text-1: #f2f2f3;
    --text-2: #dddedf;
    --text-3: #cdced0;
    --text-4: #b0b2b5;
    --text-5: #a1a3a6;
    --text-6: #8e9195;
    --text-7: #7d8184;
    --text-8: #6f7376;
    --text-9: #626568;
    --border-1: #292e33;
    --border-2: #2f343a;
    --border-3: #393f46;
    --border-4: #3f464e;
    --border-5: #4c555e;
    --border-6: #626d79;
    --border-inverse: #57606b;
    --sb-bg: #182230;
    --sb-bg-hover: #213043;
    --sb-bg-active: #283b52;
    --sb-panel: #0f1721;
    --sb-panel-2: #15202e;
    --sb-panel-3: #121b27;
    --sb-border: #223144;
    --sb-border-strong: #2d415b;
    --sb-text: #d3d7dc;
    --sb-text-dim: #c0c6ce;
    --sb-text-faint: #9aa3af;
    --sb-text-soft: #8994a2;
    --sb-text-mid: #768393;
    --sb-text-dimmest: #5a6572;
    --sb-text-strong: #f7f7f8;
    --sb-accent: #5c9bff;
    --accent: #5c9bff;
    --accent-hover: #8ab7ff;
    --accent-deep: #c2daff;
    --accent-light: #99c0ff;
    --accent-pale: #0d48a5;
    --accent-faint: #153c79;
    --accent-bg: #1a2a44;
    --accent-disabled: #445a7e;
    --accent-on-dark: #70a7ff;
    --slate: #606f80;
    --link: #5c9bff;
    --accent2: #8a3ffc;
    --accent2-light: #a971fd;
    --accent2-border: #4a1896;
    --accent2-bg: #2d1e43;
    --danger: #cf2b2b;
    --danger-deep: #e75555;
    --danger-bg: #3d2121;
    --danger-border: #6f3434;
    --danger-strong: #e82b2b;
    --danger-btn: #cb4949;
    --danger-vivid: #e53f33;
    --danger-muted: #d19e9e;
    --danger-muted-bd: #ae5151;
    --success: #0f8a4a;
    --success-deep: #64f7aa;
    --success-bg: #1c3d2c;
    --success-border: #2b6e4b;
    --success-btn: #1d9b59;
    --warning: #bd8300;
    --warning-deep: #ffd370;
    --warning-bg: #433619;
    --warning-border: #866927;
    --warning-text: #ffca52;
    --warning-vivid: #b38500;
    --warning-muted: #ddc388;
    --warning-muted-bd: #b68e35;
    --syn-header: #66a1ff;
    --syn-marker: #b0b2b5;
    --syn-text: #f2f2f3;
    --syn-fence: #68d578;
    --syn-code: #6de475;
    --syn-math: #e66b6b;
    --syn-link-bracket: #5a97f6;
    --syn-link-text: #3d84f5;
    --syn-link-url: #955cea;
    --syn-list: #eca251;
    --syn-rule: #7d8184;
    --tag-blue-bg: #1f314a;
    --tag-blue-fg: #9dbde7;
    --tag-violet-bg: #301f4a;
    --tag-violet-fg: #ba9de7;
    --tag-green-bg: #1f4a31;
    --tag-green-fg: #9de7bc;
    --tag-amber-bg: #4a3a1f;
    --tag-amber-fg: #e7cc9d;
    --tag-red-bg: #4a241f;
    --tag-red-fg: #e7a79d;
    --tag-teal-bg: #1f484a;
    --tag-teal-fg: #9de4e7;
    --tag-pink-bg: #4a1f36;
    --tag-pink-fg: #e79dc4;
    --tag-slate-bg: #293240;
    --tag-slate-fg: #b4bfcf;
    --lp-ink: #f6f6f6;
    --lp-ink-2: #e6e7e8;
    --lp-body: #dddedf;
    --lp-muted: #cdced0;
    --lp-faint: #8e9195;
    --lp-surface: #131618;
    --lp-surface-2: #1a1d20;
    --lp-surface-3: #212529;
    --lp-wash: #1a2a44;
    --lp-wash-2: #182539;
    --lp-wash-3: #19212e;
    --lp-border: #393f46;
    --lp-border-2: #4c555e;
    --lp-border-3: #3f464e;
    --lp-border-4: #2f343a;
    --lp-border-5: #292e33;
    --lp-accent: #8ab7ff;
    --lp-accent-deep: #c2daff;
    --lp-accent-pale: #153c79;
    --lp-accent-pale-2: #1a2a44;
    --lp-danger: #e75555;
    --lp-danger-bg: #3d2121;
    --lp-danger-bd: #6f3434;
    --lp-danger-bd-2: #8e3e3e;
    --lp-danger-btn: #cb4949;
    --lp-success: #64f7aa;
    --lp-success-bg: #1c3d2c;
    --lp-success-bd: #2b6e4b;
    --lp-success-bd-2: #32905f;
    --lp-success-btn: #1d9b59;
    --lp-warning: #bd8300;
    --lp-warning-bd: #866927;
    --lp-scrim: rgba(20,25,31,0.55);
    --lp-glass: rgba(19,22,24,0.92);
    --lp-glass-2: rgba(19,22,24,0.55);
    --lp-fade: rgba(26,42,68,0);
    --lp-fade-2: rgba(26,29,32,0);
    --lp-ring: rgba(92,155,255,0.22);
    --lp-tint-1: rgba(16,20,25,0.095);
    --lp-tint-2: rgba(16,20,25,0.114);
    --lp-tint-3: rgba(16,20,25,0.133);
    --lp-tint-4: rgba(16,20,25,0.152);
    --lp-tint-5: rgba(16,20,25,0.19);
    --lp-tint-6: rgba(16,20,25,0.266);
    --lp-tint-7: rgba(16,20,25,0.342);
    --text-inverse: #fff;
    --text-inverse-dim: rgba(255,255,255,0.6);
    --glass: rgba(19,22,24,0.7);
    --glass-strong: rgba(19,22,24,0.95);
    --glass-faint: rgba(95,105,117,0.1);
    --scrim: rgba(12,15,19,0.45);
    --scrim-strong: rgba(12,15,19,0.62);
    --tint-1: rgba(8,10,12,0.095);
    --tint-2: rgba(8,10,12,0.114);
    --tint-3: rgba(8,10,12,0.152);
    --shadow-1: rgba(8,10,12,0.228);
    --shadow-2: rgba(8,10,12,0.285);
    --shadow-3: rgba(8,10,12,0.38);
    --shadow-4: rgba(8,10,12,0.475);
    --shadow-5: rgba(8,10,12,0.57);
    --accent-wash-1: rgba(92,155,255,0.076);
    --accent-wash-2: rgba(92,155,255,0.152);
    --accent-wash-3: rgba(92,155,255,0.3);
    --accent2-wash-1: rgba(138,63,252,0.114);
    --accent2-wash-2: rgba(138,63,252,0.19);
    --accent2-wash-3: rgba(138,63,252,0.285);
    --success-wash: rgba(15,138,74,0.19);
    --danger-wash: rgba(207,43,43,0.19);
    --danger-wash-2: rgba(207,43,43,0.152);
    --warning-wash: rgba(189,131,0,0.152);
    --warning-glow: rgba(189,131,0,0.35);
}

/* Base layer shared by all themes. */
:root { color-scheme: light; }
:root[data-mode="dark"] { color-scheme: dark; }

html, body { background: var(--surface-1); color: var(--text-1); }

/* Form controls inherit browser chrome colors unless told otherwise. Bare
   element selectors, so anything styled by class in style.css still wins. */
input, textarea, select { background-color: var(--surface-1); color: var(--text-1); }
input::placeholder, textarea::placeholder { color: var(--text-6); }

* { scrollbar-color: var(--border-5) transparent; }

/* Rendered page content: headings and rules follow the theme, and KaTeX
   inherits the reading color rather than the browser default. */
.preview-pane, #fullscreen-content, .shared-content, .snb-content-container
    { color: var(--text-1); }
.preview-pane hr, #fullscreen-content hr, .shared-content hr { border-color: var(--border-3); }
/* Links inside rendered content are unstyled in the stock design and fall back
   to the browser's blue; give them the theme's link color instead. */
.preview-pane a, #fullscreen-content a, .shared-content a, .snb-content-container a
    { color: var(--link); }

/* Theme-specific flourishes beyond the token layer. */
/* Drafting-table typography: wide tracking on labels, mono for every number. */
.logo-text { letter-spacing: 0.09em; font-weight: 600; text-transform: uppercase; font-size: 0.92em; }
.section-header { letter-spacing: 0.13em; font-weight: 600; }
.tab, .admin-tab, .chats-tab { letter-spacing: 0.045em; text-transform: uppercase; font-size: 0.78em; }
.preview-pane, .fullscreen-content { font-family: var(--font-reading); }
.page-size, .notebook-meta, .chat-timestamp, .chat-thinking-time,
.ar-run-time, .ar-tool-dur { font-family: var(--font-mono); font-size: 0.92em; }

/* A faint drafting grid behind the rendered page. */
.preview-pane {
    background-image:
        linear-gradient(var(--border-1) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-1) 1px, transparent 1px);
    background-size: 28px 28px, 28px 28px;
    background-position: -1px -1px;
}

/* Instrument chrome: square, ruled, no soft edges. */
.editor-header { background: var(--surface-2); border-bottom: 1px solid var(--border-4); }
.tab.active, .chats-tab.active, .admin-tab.active { box-shadow: inset 0 -2px 0 var(--accent); }
.page-item.active, .notebook-item.active, .tool-item.active {
    background: var(--sb-bg-active); box-shadow: inset 4px 0 0 var(--accent-light);
}
.modal-content, .settings-modal-content { box-shadow: 0 10px 34px var(--shadow-4); }
.btn-primary, .btn-secondary, .modal-btn { letter-spacing: 0.03em; font-weight: 500; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; }