/* Design tokens for the BIRT Portal. Brand green is sampled directly from Restless Systems' real logo file (static/logo.png) -- rgb(82,243,66) / #52F343 -- not a guess and not the teal from the reference site we were shown for structural inspiration. Radius scale (8/12/18/999px) and Inter as the UI font are sampled from a real live BIRT3 report fetch, so the portal's shapes and type match the report it wraps instead of introducing a competing visual language. Warning/danger tones below are pulled from that same report's real chart palette for the same reason. Dark is the default theme (matches the brand direction); light is a fully separate, intentionally designed palette -- never a plain invert. Theme is toggled by setting data-theme="light"|"dark" on ; with no stored preference, prefers-color-scheme decides. */ :root { /* Brand ramp -- hue ~115 (the sampled #52F343), lightness/saturation varied per step */ --brand-50: hsl(115, 70%, 95%); --brand-100: hsl(115, 65%, 90%); --brand-200: hsl(115, 60%, 80%); --brand-300: hsl(115, 65%, 70%); --brand-400: hsl(115, 75%, 62%); --brand-500: hsl(115, 88%, 61%); /* the sampled logo color */ --brand-600: hsl(115, 75%, 48%); --brand-700: hsl(115, 70%, 38%); --brand-800: hsl(115, 65%, 28%); --brand-900: hsl(115, 60%, 16%); /* Radius + spacing + type scale (shared across themes) */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --font-ui: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --transition-fast: 120ms ease; --transition-base: 200ms ease; --header-height: 60px; } /* ---- Dark theme (default) ---- */ :root, :root[data-theme="dark"] { --bg: #0B0E12; --surface: #12161C; --surface-raised: #171C24; --surface-hover: #1D232C; --border: #232A33; --border-strong: #2E3742; --text: #F2F5F7; --text-muted: #8B95A3; --text-faint: #5C6673; --brand: var(--brand-500); --brand-hover: var(--brand-400); --brand-active: var(--brand-600); --brand-contrast: #06210A; --brand-tint: rgba(82, 243, 66, 0.12); --brand-tint-strong: rgba(82, 243, 66, 0.22); --success: #7CCE8F; --success-tint: rgba(124, 206, 143, 0.14); --warning: #F0AD65; --warning-tint: rgba(240, 173, 101, 0.14); --danger: #E5607A; --danger-tint: rgba(229, 96, 122, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55); --scrim: rgba(4, 6, 8, 0.6); color-scheme: dark; /* The embedded report's own real background per theme (BIRT-Usman's --bg, sampled from app.py's REPORT_THEME_OVERRIDE + its own default dark palette) -- deliberately its own token rather than reusing --bg, since the report's dark base (#080b0d) isn't quite the portal chrome's own dark (#0B0E12). The report-loading overlay uses this so its fade-out lands on a pixel-matched color instead of a near-miss. */ --report-bg: #080b0d; } /* ---- Light theme (explicit opt-in, or system preference with no stored choice) ---- */ :root[data-theme="light"] { --bg: #F4F5F2; /* matches a real background tone already used in BIRT3 reports */ --surface: #FFFFFF; --surface-raised: #FFFFFF; --surface-hover: #EEF0EC; --border: #E1E4DE; --border-strong: #CBD0C7; --text: #141A12; --text-muted: #5B6560; --text-faint: #8A938C; --brand: var(--brand-600); --brand-hover: var(--brand-700); --brand-active: var(--brand-800); --brand-contrast: #06210A; --brand-tint: var(--brand-50); --brand-tint-strong: var(--brand-100); --success: #3F9A57; --success-tint: #E7F5EB; --warning: #B9762E; --warning-tint: #FBF0E2; --danger: #B8425A; --danger-tint: #FBE9ED; --shadow-sm: 0 1px 2px rgba(20, 26, 18, 0.06); --shadow-md: 0 8px 24px rgba(20, 26, 18, 0.08); --shadow-lg: 0 20px 48px rgba(20, 26, 18, 0.12); --scrim: rgba(20, 26, 18, 0.35); color-scheme: light; /* Matches REPORT_THEME_OVERRIDE's light --bg exactly -- unlike dark, the report's light palette already equals the portal's own --bg. */ --report-bg: #F4F5F2; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --bg: #F4F5F2; --surface: #FFFFFF; --surface-raised: #FFFFFF; --surface-hover: #EEF0EC; --border: #E1E4DE; --border-strong: #CBD0C7; --text: #141A12; --text-muted: #5B6560; --text-faint: #8A938C; --brand: var(--brand-600); --brand-hover: var(--brand-700); --brand-active: var(--brand-800); --brand-contrast: #06210A; --brand-tint: var(--brand-50); --brand-tint-strong: var(--brand-100); --success: #3F9A57; --success-tint: #E7F5EB; --warning: #B9762E; --warning-tint: #FBF0E2; --danger: #B8425A; --danger-tint: #FBE9ED; --shadow-sm: 0 1px 2px rgba(20, 26, 18, 0.06); --shadow-md: 0 8px 24px rgba(20, 26, 18, 0.08); --shadow-lg: 0 20px 48px rgba(20, 26, 18, 0.12); --scrim: rgba(20, 26, 18, 0.35); color-scheme: light; --report-bg: #F4F5F2; } } * { box-sizing: border-box; } html, body { background: var(--bg); color: var(--text); /* The portal shell itself must never scroll sideways -- only intentionally-scrollable things (report iframe, .table-scroll, switcher lists) may overflow their own box. */ overflow-x: hidden; max-width: 100%; } body { margin: 0; font-family: var(--font-ui); -webkit-font-smoothing: antialiased; } /* Tighter spacing on phones -- every component already reads spacing exclusively through these tokens, so redefining them once here tightens the whole app instead of adding a media query per component. */ @media (max-width: 640px) { :root { --space-6: 18px; --space-8: 22px; --space-10: 26px; --space-12: 32px; --space-16: 40px; --header-height: 56px; } }