/*!*****************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***! \*****************************************************************************************************************************************************************************************************************************************************************/ /* ═══ THEME SYSTEM ═══ * Default `:root` values define the LIGHT theme. * `:root[data-theme="dark"]` overrides the same custom properties for DARK. * The `data-theme` attribute is set by: * 1. an inline script in (FOUC prevention) reading localStorage * 2. the ThemeToggle component (manual override) writing localStorage * 3. when the user picks "system", the script resolves it against * `prefers-color-scheme` and listens for OS-level changes. * * Contrast targets: body text ≥ 4.5:1 (WCAG AA), large text ≥ 3:1. * light --t1 #1a1a18 on --bg #f4f2ee ≈ 14.7:1 * light --t2 #4a4a44 on --bg #f4f2ee ≈ 8.1:1 * light --t3 #5d5d57 on --bg #f4f2ee ≈ 5.5:1 (was #8a8a82 ≈ 3.6:1; bumped for AA) * dark --t1 #f0f1ef on --bg #161816 ≈ 14.5:1 * dark --t2 #c2c6c1 on --bg #161816 ≈ 9.5:1 * dark --t3 #97a098 on --bg #161816 ≈ 5.4:1 */ :root { --color-background-primary: #f4f2ee; --color-background-secondary: #edeae4; --color-background-tertiary: #e8e5df; --color-border-primary: rgba(0, 0, 0, 0.08); --color-border-secondary: rgba(0, 0, 0, 0.16); --color-border-tertiary: rgba(0, 0, 0, 0.12); --color-text-primary: #1a1a18; --color-text-secondary: #4a4a44; --color-text-tertiary: #5d5d57; --color-accent: #185fa5; --color-accent-soft: #e6f1fb; --color-accent-strong: #0c447c; --color-status-background: #185fa5; --color-status-border: #0c447c; --color-status-text: #b5d4f4; --color-status-text-strong: #e6f1fb; /* Existing aliases kept for compatibility */ --bg: var(--color-background-primary); --bg-panel: var(--color-background-secondary); --bg-sidebar: var(--color-background-tertiary); --bg-white: #ffffff; --bg-hover: rgba(0, 0, 0, 0.04); --bg-active: rgba(0, 0, 0, 0.07); --border: var(--color-border-primary); --border-md: var(--color-border-secondary); /* Brand colors */ --cyan: #007A8C; --cyan-bg: rgba(0, 122, 140, 0.08); --cyan-border: rgba(0, 122, 140, 0.2); --violet: #5B3FCC; --violet-bg: rgba(91, 63, 204, 0.08); --teal: #008A6A; --teal-bg: rgba(0, 138, 106, 0.08); --amber: #B87000; --amber-bg: rgba(184, 112, 0, 0.1); --red: #C0392B; --green: #1A7F5A; /* Accent */ --accent: #00B4CC; --accent-bg: rgba(0, 180, 204, 0.1); /* Text */ --t1: #1A1A18; --t2: #4A4A44; --t3: #5D5D57; --t4: #8A8A82; /* Shadows (light) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.05); /* Radius */ --r-sm: 5px; --r: 8px; --r-lg: 12px; --r-xl: 16px; /* Font */ --f: "Inter", sans-serif; --fm: "JetBrains Mono", monospace; /* ── JERO IDE chrome tokens (light) ── * These are consumed via `var(--ide-*)` from chrome components and via * `T_LIGHT` from graphics renderers (Cytoscape, Mol*, Viv, …) that need * real hex strings. Keep the two in sync: a change here should be matched * in `frontend/src/components/jero/theme.ts`. */ --ide-bg0: #ffffff; --ide-bg1: #f4f2ee; --ide-bg2: #edeae4; --ide-bg3: #e8e5df; --ide-bg4: #dfdcd5; --ide-border: rgba(0, 0, 0, 0.08); --ide-border-strong: rgba(0, 0, 0, 0.16); --ide-text0: #1a1a18; --ide-text1: #4a4a44; --ide-text2: #5d5d57; --ide-text3: #8a8a82; --ide-accent: #185fa5; --ide-purple: #5b3fcc; --ide-success: #1a7f5a; --ide-warning: #b87000; --ide-danger: #c0392b; --ide-cyan: #007a8c; --ide-icon-default: var(--ide-text2); --ide-icon-emphasis: var(--ide-accent); --ide-icon-chrome: var(--ide-text1); color-scheme: light; } :root[data-theme="dark"] { --color-background-primary: #161816; --color-background-secondary: #1c1f1c; --color-background-tertiary: #202421; --color-border-primary: rgba(255, 255, 255, 0.08); --color-border-secondary: rgba(255, 255, 255, 0.16); --color-border-tertiary: rgba(255, 255, 255, 0.12); --color-text-primary: #f0f1ef; --color-text-secondary: #c2c6c1; --color-text-tertiary: #97a098; --color-accent: #3e83c5; --color-accent-soft: rgba(62, 131, 197, 0.2); --color-accent-strong: #b8d4ee; --color-status-background: #214b74; --color-status-border: #163553; --color-status-text: #c3ddf3; --color-status-text-strong: #eff7ff; --bg-white: #202421; --bg-hover: rgba(255, 255, 255, 0.05); --bg-active: rgba(255, 255, 255, 0.08); --bg-panel: var(--color-background-secondary); --bg-sidebar: var(--color-background-tertiary); --border: var(--color-border-primary); --border-md: var(--color-border-secondary); /* Legacy text aliases — keep MessageUI / ChatPanel readable in dark */ --t1: #f0f1ef; --t2: #c2c6c1; --t3: #97a098; --t4: #5a6059; /* Shadows (dark) — deeper, slightly cooler */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4); /* ── JERO IDE chrome tokens (dark) ── kept in sync with `T_DARK` in jero/theme.ts. */ --ide-bg0: #0f0f0f; --ide-bg1: #141414; --ide-bg2: #1a1a1a; --ide-bg3: #202020; --ide-bg4: #272727; --ide-border: #252525; --ide-border-strong: #2e2e2e; --ide-text0: #e2e2e2; --ide-text1: #b0b0b0; --ide-text2: #707070; --ide-text3: #444444; --ide-accent: #4f8ef7; --ide-purple: #9b7cf8; --ide-success: #3dca8a; --ide-warning: #e8a838; --ide-danger: #e05c5c; --ide-cyan: #35bfca; --ide-icon-default: var(--ide-text2); --ide-icon-emphasis: var(--ide-accent); --ide-icon-chrome: var(--ide-text1); color-scheme: dark; } /* Smooth theme transitions, scoped to the brief window when the theme is * actually swapping (set by useTheme.applyDOM). Outside that window the * universal transition is off, so routine hover/focus state changes don't * get the 220ms tax. * * `.no-theme-transition` is added by the inline FOUC script in and * cleared on the first animation frame — it suppresses any transition during * the initial paint. */ :root.theme-transitioning *, :root.theme-transitioning *::before, :root.theme-transitioning *::after { transition-property: background-color, color, border-color, fill, stroke; transition-duration: 180ms; transition-timing-function: ease; } :root.no-theme-transition, :root.no-theme-transition * { transition: none !important; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; font-family: var(--f); background: var(--bg); color: var(--t1); font-size: 13px; line-height: 1.55; } a { color: inherit; text-decoration: none; } /* ═══ ANIMATIONS ═══ */ @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* ═══ SCROLLBAR ═══ */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 99px; } /* ═══ FORM ELEMENTS ═══ */ .input { width: 100%; background: var(--bg-white); color: var(--t1); border: 1px solid var(--border-md); border-radius: var(--r-lg); padding: 10px 12px; font-family: var(--f); font-size: 13px; } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .input::placeholder { color: var(--t4); } /* ═══ DASHBOARD PAGE ═══ */ .page { max-width: 1120px; margin: 0 auto; padding: 24px; } .card { background: var(--bg-white); border: 1px solid var(--border-md); border-radius: var(--r-lg); padding: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-md); background: var(--bg-white); color: var(--t2); border-radius: var(--r-lg); padding: 8px 12px; cursor: pointer; font-weight: 500; font-size: 13px; transition: all 0.12s; font-family: var(--f); } .btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--cyan); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-gap: 12px; gap: 12px; } /* ═══ CHAT MESSAGE MARKDOWN (light theme, mobile/ChatPanel) ═══ */ /* Scoped markdown for MessageUI component (light background panels) */ .message-md p { margin: 0 0 6px 0; line-height: 1.6; } .message-md p:last-child { margin-bottom: 0; } .message-md h1, .message-md h2, .message-md h3, .message-md h4 { font-size: 13px; font-weight: 600; color: var(--t1); margin: 8px 0 4px 0; line-height: 1.4; } .message-md ul, .message-md ol { margin: 4px 0 6px 0; padding-left: 16px; } .message-md li { margin-bottom: 3px; line-height: 1.55; } .message-md strong { font-weight: 600; color: var(--t1); } .message-md em { color: var(--t2); } .message-md code { font-family: var(--fm); font-size: 11px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; color: var(--cyan); } .message-md pre { background: var(--bg-panel); border: 1px solid var(--border-md); border-radius: 5px; padding: 8px 10px; margin: 6px 0; overflow-x: auto; } .message-md pre code { background: none; border: none; padding: 0; font-size: 11px; color: var(--t2); } .message-md blockquote { border-left: 2px solid var(--accent); margin: 4px 0; padding: 4px 8px; color: var(--t3); font-style: italic; } /* ═══ BIOMNI MARKDOWN ═══ */ /* Scoped markdown styles for Biomni chat messages rendered in the dark IDE panel */ .biomni-md p { margin: 0 0 6px 0; line-height: 1.65; } .biomni-md p:last-child { margin-bottom: 0; } .biomni-md h1, .biomni-md h2, .biomni-md h3, .biomni-md h4 { font-size: 10px; font-weight: 600; color: #e2e2e2; margin: 8px 0 4px 0; line-height: 1.4; } .biomni-md ul, .biomni-md ol { margin: 4px 0 6px 0; padding-left: 14px; } .biomni-md li { margin-bottom: 3px; line-height: 1.55; } .biomni-md strong { color: #c8c8c8; font-weight: 600; } .biomni-md em { color: #a0a0a0; } .biomni-md code { font-family: 'IBM Plex Mono', monospace; font-size: 9px; background: #1a1a1a; border: 1px solid #2e2e2e; border-radius: 2px; padding: 1px 4px; color: #9b7cf8; } .biomni-md pre { background: #141414; border: 1px solid #252525; border-radius: 3px; padding: 8px 10px; margin: 6px 0; overflow-x: auto; } .biomni-md pre code { background: none; border: none; padding: 0; font-size: 9px; color: #b0b0b0; } .biomni-md blockquote { border-left: 2px solid #9b7cf8; margin: 4px 0; padding: 4px 8px; color: #707070; font-style: italic; } /* JERO IDE — run tab row (left sidebar): keyboard focus */ button.jero-run-tab:focus-visible, button.jero-run-tab-new:focus-visible { outline: 1px solid #4f8ef7; outline-offset: -1px; } /* Theme toggle (segmented control): three buttons in a pill. */ .theme-toggle { display: inline-flex; align-items: center; padding: 2px; gap: 1px; border-radius: var(--r); border: 1px solid var(--border-md); background: var(--bg-white); } .theme-toggle__btn { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: calc(var(--r) - 3px); background: transparent; color: var(--t3); cursor: pointer; padding: 0; font-family: var(--f); } .theme-toggle__btn:hover { background: var(--bg-hover); color: var(--t2); } .theme-toggle__btn[aria-pressed="true"] { background: var(--bg-active); color: var(--t1); } .theme-toggle__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }