/* SRX Hub — the company theme (RoarAI). Replaces the customer's second theme (log 232: their brand never enters the
 * framework). The palette is the one measured from the RoarAI logo for SRX Code's own RoarAI theme
 * (studio-src/src/themes/roarai/theme-roarai.base.css): violet #4C24EC -> royal blue #1553EC -> cyan #00AAF2, midnight
 * chrome, light canvas. White text sits only on violet/royal blue (WCAG AA); cyan is an accent, never a text background.
 * Kept in its own file so the SRX Code theme (theme-nexa.css) is never affected. */
html[data-theme="roarai"] {
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --heading-font: var(--font);
  --bg: #f5f7fc; --surface: #ffffff; --surface-2: #f1f4fb; --line: #e3e8f3; --line-strong: #cfd7e8;
  --ink: #0b1020; --ink-2: #1f2a44; --muted: #5d6885; --link: #1553ec; --code-bg: #eef2fb;
  --primary: #1553ec; --primary-strong: #3b1fd1; --primary-soft: #eef0ff;
  --primary-bg: linear-gradient(115deg, #4c24ec 0%, #1553ec 100%); --primary-ink: #ffffff;
  --primary-shadow: 0 6px 18px rgba(21, 83, 236, .28); --primary-shadow-hover: 0 8px 24px rgba(21, 83, 236, .36);
  --focus: #1553ec; --ring: rgba(21, 83, 236, .18);
  --radius: 16px; --radius-sm: 12px; --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(10, 15, 36, .04), 0 8px 24px rgba(10, 15, 36, .06);
  --shadow-hover: 0 10px 28px rgba(10, 15, 36, .10);
  --shadow-lg: 0 24px 60px rgba(10, 15, 36, .24);
  --topbar-bg: #0a0f24; --topbar-ink: #ffffff; --topbar-muted: #a9b3d1; --topbar-line: rgba(255, 255, 255, .12); --topbar-hover: rgba(255, 255, 255, .08);
  --nav-on-line: #00aaf2; --nav-spacing: 0; --nav-transform: none;
  --hero-bg: radial-gradient(1200px 520px at 100% 0%, rgba(21, 83, 236, .34), transparent 60%), linear-gradient(135deg, #070b1c 0%, #0a0f24 55%, #121a3f 100%);
  --hero-ink: #ffffff; --hero-muted: #c3cae0; --hero-accent: #00aaf2; --hero-chip: rgba(21, 83, 236, .22);
  --hero-glow: radial-gradient(circle, rgba(76, 36, 236, .45), rgba(76, 36, 236, 0) 65%);
  --hero-pattern: none;
  --auth-panel-bg: radial-gradient(900px 500px at 100% 100%, #eef0ff, transparent 60%), #ffffff;
  --tile-bg: linear-gradient(135deg, #eef0ff, #dfe6ff); --tile-ink: #3b1fd1;
  --avatar-bg: linear-gradient(135deg, #4c24ec, #1553ec); --avatar-ink: #ffffff;
  --toast-bg: #0a0f24;
  --btn-spacing: 0; --btn-transform: none;
  --h1-spacing: -.02em; --h1-transform: none; --h2-spacing: -.01em; --h2-transform: none; --h3-spacing: 0; --h3-transform: none;
}
html[data-theme="roarai"] .brand-alt { display: inline-flex; }
/* the logo is a coloured mark on white: give it a white tile on the midnight bar and hero */
html[data-theme="roarai"] .top .brand-alt img,
html[data-theme="roarai"] .auth-brand .brand-alt img { background: #ffffff; border-radius: 8px; padding: 4px 8px; height: 34px; }