/* ============================================================ Sajadatabase design tokens ------------------------------------------------ Theming: set `data-theme="dark" | "light"` on . The :root block IS the dark theme; [data-theme="light"] overrides just the values that change. Components should ONLY reference these variables, never hard-coded colours. ============================================================ */ @font-face { font-family: 'Gotham Round'; src: url('/static/fonts/gothamrnd_medium.otf') format('opentype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gotham Round'; src: url('/static/fonts/gothamrnd_bold.otf') format('opentype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'IBM Plex Sans'; src: url('/static/fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'IBM Plex Sans'; src: url('/static/fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } /* ---- Dark theme (default) ---- */ :root { /* surfaces */ --bg-page: #0c0c0c; --bg-raised: #1e1e1e; --bg-card: #262626; --bg-inset: #161616; --bg-hover: #333333; --bg-active: #454545; /* accent (violet) */ --accent: #7c4dff; --accent-hover: #6c3aef; --accent-muted: #52447d; --accent-soft: rgba(124, 77, 255, 0.15); --accent-strong: rgba(124, 77, 255, 0.3); --accent-text: #ffffff; /* semantic */ --success: #4ade80; --success-soft: rgba(87, 255, 87, 0.18); --danger: #ef4444; --danger-soft: rgba(255, 87, 87, 0.18); --warning: #f59e0b; --warning-soft: rgba(255, 165, 0, 0.18); /* text */ --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-muted: #a0a0a0; --text-faint: #888888; --text-link: var(--accent); /* borders */ --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.25); /* radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 20px; /* shadow */ --shadow: 0 6px 16px rgba(0, 0, 0, 0.35); /* fonts */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-brand: "IBM Plex Sans", "Gotham Round", -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* monochrome svg icons are black by default: invert for dark backgrounds */ --icon-filter: invert(100%); } /* ---- Light theme ---- */ [data-theme="light"] { --bg-page: #f5f5f7; --bg-raised: #ffffff; --bg-card: #ececf1; --bg-inset: #ffffff; --bg-hover: #e3e3ea; --bg-active: #d5d6e0; --accent: #6a3bf5; --accent-hover: #5a2fdb; --accent-muted: #9d86e0; --accent-soft: rgba(106, 59, 245, 0.12); --accent-strong: rgba(106, 59, 245, 0.28); --accent-text: #ffffff; --success: #16a34a; --success-soft: rgba(22, 163, 74, 0.16); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.14); --warning: #d97706; --warning-soft: rgba(217, 119, 6, 0.16); --text-primary: #1a1a1a; --text-secondary: #2f2f2f; --text-muted: #5b5b66; --text-faint: #8a8a94; --border-default: rgba(0, 0, 0, 0.12); --border-strong: rgba(0, 0, 0, 0.24); --shadow: 0 6px 16px rgba(0, 0, 0, 0.12); --icon-filter: invert(0%); } html, body { position: relative; width: 100%; height: 100%; } /* Shared page container: keeps content off the screen edges and aligned with the navbar's centered content width. */ .page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem; box-sizing: border-box; } @media (max-width: 768px) { .page { padding: 1.25rem 1rem; } } /* Full-width page variant for data-heavy table views: the table needs the room, so it is allowed to escape the regular content column. */ .page-full { max-width: none; padding: 1rem 1.25rem; box-sizing: border-box; } @media (max-width: 768px) { .page-full { padding: 1rem; } } body { background-color: var(--bg-page); color: var(--text-primary); margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1 { color: var(--text-primary); margin-bottom: 16px; margin-left: 4px; } h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-default); } p, span, div, label { color: inherit; } a { color: var(--text-link); text-decoration: none; } a:hover { text-decoration: underline; } input, button, select, textarea { font-family: inherit; font-size: 14px; -webkit-padding: 0.4em 0; padding: 0.4em; margin: 0; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background-color: var(--bg-inset); color: var(--text-primary); } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.6; }