/* ───────────────────────────────────────────────────────────────────────────── 618 DESIGN TOKENS & THEME LAYER Feature: 037-modern-ui-redesign — replaces css/horizon.css (spec 029). Loaded LAST so its token-driven overrides win over Bootstrap and the Radzen base theme. DARK is the default; light activates on . Token contract: specs/037-modern-ui-redesign/contracts/ui-tokens.md Visual source of truth: specs/037-modern-ui-redesign/design/ The --hz- prefix is retained from 029 to avoid a shell-wide class rename (research.md R2); values and semantics are the 618 system. ───────────────────────────────────────────────────────────────────────────── */ /* ── Self-hosted typefaces (SIL OFL; no font CDN — FR-002/research R3) ───────── */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/space-grotesk-500.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/space-grotesk-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-500.woff2') format('woff2'); } :root { /* Brand — the 618 gold ramp (derived from the logo gradient). Raw gold cannot carry as text on light surfaces; text-level gold always goes through --hz-brand-strong, which is bright gold on dark and deep gold on light. */ --hz-brand: #E49D25; /* core gold — fills, active indicator, focus */ --hz-brand-hover: #F0B95A; /* hover/active shift (brighter on dark) */ --hz-brand-deep: #A27029; /* gradient end, pressed states */ --hz-brand-soft: rgba(228, 157, 37, 0.10); /* soft fills, active-nav bg, row hover */ --hz-brand-strong: #E49D25; /* the ONLY token for gold text/links */ --hz-on-brand: #1A1206; /* text/icons on a gold fill */ --hz-brand-gradient: linear-gradient(100deg, #A27029, #E49D25 55%, #DABB35); /* Surfaces — dark (default): near-black layers separated by hairline borders, not shadows (FR-018 — precision-terminal, no puffy elevation). */ --hz-bg: #0A0C10; --hz-card: #10141B; --hz-raised: #151A23; --hz-border: #1F2733; --hz-border-strong: #2B3547; --hz-sidebar: #10141B; /* Text — dark */ --hz-text: #E6E9F0; --hz-text-muted: #8B94A7; --hz-text-faint: #5C6577; /* Semantic (meaning preserved — FR-008). Warning is ORANGE, never gold, and UI pairs it with the ▲ glyph so it can never be confused with brand accents. */ --hz-success: #2FBF71; --hz-warning: #FF8C42; --hz-danger: #F04E4E; --hz-info: #4D9FFF; --hz-success-soft: rgba(47, 191, 113, 0.12); --hz-warning-soft: rgba(255, 140, 66, 0.12); --hz-danger-soft: rgba(240, 78, 78, 0.12); --hz-info-soft: rgba(77, 159, 255, 0.12); /* Shape & elevation — crisp, near-square (FR-018). Cards carry a 1px border instead of a shadow; only true overlays (dialogs, popups) cast one. */ --hz-radius-card: 4px; --hz-radius-control: 2px; --hz-radius-badge: 3px; --hz-shadow-card: none; --hz-shadow-overlay: 0 6px 24px rgba(0, 0, 0, 0.5); /* Typography — Space Grotesk (display) / Inter (UI) / JetBrains Mono (data). */ --hz-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --hz-font-display: 'Space Grotesk', var(--hz-font); --hz-font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; color-scheme: dark; } :root[data-appearance="light"] { --hz-brand-hover: #C9851A; /* deeper gold on hover over light surfaces */ --hz-brand-soft: #FBEFD6; --hz-brand-strong: #7A5A12; /* AA-readable gold text on light */ --hz-bg: #F4F5F7; --hz-card: #FFFFFF; --hz-raised: #FFFFFF; --hz-border: #E3E6EC; --hz-border-strong: #D3D8E0; --hz-sidebar: #FFFFFF; --hz-text: #16191F; --hz-text-muted: #5A6374; --hz-text-faint: #8A93A4; --hz-success: #0B7040; --hz-warning: #B45309; --hz-danger: #C92A2A; --hz-info: #2563EB; --hz-success-soft: rgba(14, 138, 80, 0.10); --hz-warning-soft: rgba(180, 83, 9, 0.10); --hz-danger-soft: rgba(201, 42, 42, 0.08); --hz-info-soft: rgba(37, 99, 235, 0.08); --hz-shadow-overlay: 0 6px 24px rgba(23, 27, 38, 0.18); color-scheme: light; } /* ── Global base ─────────────────────────────────────────────────────────────── */ html, body { background-color: var(--hz-bg); color: var(--hz-text); font-family: var(--hz-font); } /* Display type for headings — geometric, echoes the wordmark. */ h1, h2, h3, h4, .hz-page-title { font-family: var(--hz-font-display); } /* ── Radzen variable mapping (override contract) ─────────────────────────────── */ :root { --rz-primary: var(--hz-brand); --rz-primary-dark: var(--hz-brand-hover); --rz-success: var(--hz-success); --rz-warning: var(--hz-warning); --rz-danger: var(--hz-danger); --rz-info: var(--hz-info); --rz-text-color: var(--hz-text); --rz-base-background-color: var(--hz-bg); --rz-body-background-color: var(--hz-bg); --rz-card-background-color: var(--hz-card); --rz-panel-background-color: var(--hz-card); --rz-series-grid-line-color: var(--hz-border); --rz-input-value-color: var(--hz-text); --rz-input-background-color: var(--hz-card); } /* ── Legacy desktop palette bridge (backtest/history/compare components) ─────── */ :root { --botley-text: var(--hz-text); --botley-muted: var(--hz-text-muted); --botley-border: var(--hz-border); --botley-border-strong: var(--hz-border-strong); --botley-accent: var(--hz-brand); --botley-accent-strong: var(--hz-brand-hover); } /* ── Bootstrap bridges ───────────────────────────────────────────────────────── */ .text-muted, .text-secondary { color: var(--hz-text-muted) !important; } .btn { border-radius: var(--hz-radius-control); font-weight: 600; } .btn-primary { background-color: var(--hz-brand); border-color: var(--hz-brand); color: var(--hz-on-brand); } .btn-primary:hover, .btn-primary:focus { background-color: var(--hz-brand-hover); border-color: var(--hz-brand-hover); color: var(--hz-on-brand); } /* ── 618 shared surfaces ─────────────────────────────────────────────────────── */ .hz-card { background: var(--hz-card); border-radius: var(--hz-radius-card); box-shadow: var(--hz-shadow-card); border: 1px solid var(--hz-border); padding: 1.1rem 1.25rem; } .hz-page-title { color: var(--hz-text); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.01em; margin: 0 0 0.25rem 0; } .hz-muted { color: var(--hz-text-muted); } /* Tabular monospaced numerals — the terminal signature for trading data. */ .hz-mono { font-family: var(--hz-font-mono); font-variant-numeric: tabular-nums; } /* Gold gradient keyline — the recurring brand gesture on hero surfaces. */ .hz-keyline { position: relative; overflow: hidden; } .hz-keyline::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--hz-brand-gradient); } /* Visible focus for accessibility (FR-013). */ a:focus-visible, button:focus-visible, .hz-focusable:focus-visible { outline: 2px solid var(--hz-brand); outline-offset: 2px; } /* ════════════════════════════════════════════════════════════════════════════ Shared Radzen surfaces — token-driven, so light/dark follow [data-appearance] with no extra rules. Semantic colors preserved (FR-008); chart canvases are intentionally untouched (FR-011). ════════════════════════════════════════════════════════════════════════════ */ /* ── Buttons ─────────────────────────────────────────────────────────────────── */ .rz-button { border-radius: var(--hz-radius-control); font-family: var(--hz-font); font-weight: 600; box-shadow: none; } .rz-button.rz-primary { background-color: var(--hz-brand); border-color: var(--hz-brand); color: var(--hz-on-brand); } .rz-button.rz-primary:not(.rz-state-disabled):hover { background-color: var(--hz-brand-hover); border-color: var(--hz-brand-hover); color: var(--hz-on-brand); } .rz-button.rz-danger { background-color: var(--hz-danger); border-color: var(--hz-danger); } .rz-button.rz-secondary, .rz-button.rz-light { background-color: transparent; border: 1px solid var(--hz-border-strong); color: var(--hz-text); } .rz-button.rz-secondary:not(.rz-state-disabled):hover, .rz-button.rz-light:not(.rz-state-disabled):hover { background-color: var(--hz-brand-soft); border-color: var(--hz-brand); color: var(--hz-brand-strong); } /* ── Form inputs ─────────────────────────────────────────────────────────────── */ .rz-textbox, .rz-inputtext, .rz-textarea, .rz-numeric, .rz-dropdown, .rz-datepicker, .rz-chkbox-box { border-radius: var(--hz-radius-control); border: 1px solid var(--hz-border-strong); background-color: var(--hz-card); color: var(--hz-text); font-family: var(--hz-font); } .rz-textbox:focus, .rz-inputtext:focus, .rz-textarea:focus, .rz-numeric.rz-state-focused, .rz-dropdown.rz-state-focused, .rz-datepicker.rz-state-focused { border-color: var(--hz-brand); box-shadow: 0 0 0 1px var(--hz-brand); outline: none; } .rz-dropdown-item.rz-state-highlight, .rz-dropdown-item:hover { background-color: var(--hz-brand-soft); color: var(--hz-brand-strong); } /* ── Tables / DataGrid: hairline frame, compact terminal density, mono data ──── */ .rz-datatable, .rz-data-grid { background-color: var(--hz-card); border: 1px solid var(--hz-border); border-radius: var(--hz-radius-card); overflow: auto; } .rz-datatable .rz-column-title, .rz-data-grid .rz-column-title, .rz-datatable th, .rz-data-grid th { /* muted (not faint): small uppercase headers must clear WCAG AA (T029 audit) */ color: var(--hz-text-muted); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; font-weight: 600; } .rz-cell-data { color: var(--hz-text); font-family: var(--hz-font-mono); font-variant-numeric: tabular-nums; font-size: 0.8rem; padding: 0.45rem 0.9rem; } .rz-data-row:hover { background-color: var(--hz-brand-soft); } /* ── DataGrid pager ──────────────────────────────────────────────────────────── */ .rz-pager { background-color: var(--hz-card); color: var(--hz-text); border-top: 1px solid var(--hz-border); } .rz-pager .rz-pager-page, .rz-pager .rz-pager-first, .rz-pager .rz-pager-prev, .rz-pager .rz-pager-next, .rz-pager .rz-pager-last { background-color: var(--hz-raised); color: var(--hz-text); border: 1px solid var(--hz-border); border-radius: var(--hz-radius-control); } .rz-pager .rz-pager-page.rz-state-active { background-color: var(--hz-brand); color: var(--hz-on-brand); border-color: var(--hz-brand); } .rz-pager .rz-pager-page:not(.rz-state-active):hover { background-color: var(--hz-brand-soft); color: var(--hz-brand-strong); } .rz-pager .rz-pager-summary { color: var(--hz-text-muted); } /* ── Fieldset / panel surfaces ───────────────────────────────────────────────── */ .rz-fieldset, .rz-panel { background-color: var(--hz-card); border: 1px solid var(--hz-border); border-radius: var(--hz-radius-card); box-shadow: var(--hz-shadow-card); } .rz-fieldset-legend { color: var(--hz-text); font-family: var(--hz-font-display); font-weight: 600; } /* Role-grouped sidebar sections: heading + divider collapse when the section's child nav components render no links (user lacks the role). Global so it can see the .botley-nav__link elements child components render. */ .hz-nav__section:not(:has(.botley-nav__link)) { display: none; } /* ── Badges / status pills: crisp 3px, semantic colors, mono caps ────────────── */ .rz-badge { border-radius: var(--hz-radius-badge); font-family: var(--hz-font-mono); font-weight: 600; padding: 0.2rem 0.55rem; } /* ── Alerts / notifications / tooltips ───────────────────────────────────────── */ .rz-notification, .rz-alert { border-radius: var(--hz-radius-control); } .rz-notification-item { background-color: var(--hz-raised); color: var(--hz-text); border: 1px solid var(--hz-border-strong); box-shadow: var(--hz-shadow-overlay); } .rz-tooltip-content { background-color: var(--hz-raised); color: var(--hz-text); border: 1px solid var(--hz-border-strong); border-radius: var(--hz-radius-control); font-family: var(--hz-font); } /* ── Popup panels (dropdowns, autocompletes, datepickers, overlay panels) ────── Radzen portals attach to , outside any component scope — these rules keep them on-theme in both modes, including while open during a live toggle. */ .rz-popup, .rz-overlaypanel, .rz-dropdown-panel, .rz-autocomplete-panel, .rz-multiselect-panel, .rz-lookup-panel, .rz-datepicker-popup, .rz-context-menu, .rz-menu-popup { background-color: var(--hz-raised); color: var(--hz-text); border: 1px solid var(--hz-border-strong); border-radius: var(--hz-radius-card); box-shadow: var(--hz-shadow-overlay); } .rz-dropdown-items, .rz-multiselect-items { background-color: var(--hz-raised); color: var(--hz-text); } /* ── Dialogs — the only card-level surface that casts a shadow (true overlay) ── */ .rz-dialog { border-radius: var(--hz-radius-card); background-color: var(--hz-raised); border: 1px solid var(--hz-border-strong); box-shadow: var(--hz-shadow-overlay); overflow: hidden; } .rz-dialog-titlebar { background-color: var(--hz-raised); color: var(--hz-text); font-family: var(--hz-font-display); border-bottom: 1px solid var(--hz-border); } .rz-dialog-content { background-color: var(--hz-raised); color: var(--hz-text); } /* ── Tabs — flat underline, gold active ──────────────────────────────────────── */ .rz-tabview-nav li a { font-family: var(--hz-font); font-weight: 600; } .rz-tabview-nav li.rz-state-active a { color: var(--hz-brand-strong); border-color: var(--hz-brand); } .rz-text-subtitle, .rz-text-subtitle1, .rz-text-subtitle2 { color: var(--hz-text-muted); } /* ── Empty / first-run states (FR-016) ─────────────────────────────────────────── Shared branded treatment for "no data yet" moments: quiet, technical, helpful. */ .hz-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2.5rem 1.5rem; border: 1px dashed var(--hz-border-strong); border-radius: var(--hz-radius-card); color: var(--hz-text-muted); text-align: center; } .hz-empty .hz-empty__title { font-family: var(--hz-font-display); font-weight: 600; color: var(--hz-text); } .hz-empty .hz-empty__hint { font-family: var(--hz-font-mono); font-size: 0.78rem; color: var(--hz-text-muted); } /* ── Chart chrome (FR-011) ─────────────────────────────────────────────────────── The candlestick canvas is dark-tuned in BOTH modes (market-data readability). In light mode, frame the dark surface with a hairline so it reads as an intentional dark inset rather than an unthemed region. */ :root[data-appearance="light"] .chart-page { border: 1px solid var(--hz-border-strong); border-radius: var(--hz-radius-card); overflow: hidden; } /* Bare headings inside the content region get the display treatment. */ .hz-content h1:not([class]), .hz-content h2:not([class]), .hz-content h3:not([class]) { color: var(--hz-text); font-family: var(--hz-font-display); font-weight: 600; letter-spacing: 0.01em; margin-bottom: 1rem; }