:root { /* brand */ --ls-primary: #012d50; --ls-primary-hover: #013d6e; --ls-header: #012d50; --ls-header-ink: #ffffff; --ls-link: #2b7fd4; --ls-link-muted: #6b93b8; /* text (cooled toward navy) */ --ls-text: #16202b; --ls-text-secondary: #3f4b57; --ls-text-muted: #5c6b79; --ls-text-label: #8a97a4; /* surfaces */ --ls-surface: #fff; --ls-surface-alt: #f3f6f9; --ls-surface-active: rgba(1, 45, 80, .13); /* borders (cooled) */ --ls-border: #e4e9ef; --ls-border-mid: #dbe2ea; --ls-border-light: #eef2f6; /* status pairs */ --ls-success-bg: #e8f5e9; --ls-success-text: #2e7d32; --ls-success: #28a745; --ls-warning-bg: #fff3e0; --ls-warning-text: #e65100; --ls-danger-bg: #fce4ec; --ls-danger-text: #c62828; --ls-danger: #dc3545; --ls-neutral-bg: #f5f5f5; --ls-neutral-text: #9e9e9e; --ls-info-bg: #e3f2fd; /* search keyword highlight */ --ls-mark-bg: #ffe58f; --ls-mark-text: #3d2f00; /* shape (softer / corporate) */ --ls-radius-control: 8px; --ls-radius-tile: 8px; --ls-radius-card: 12px; --ls-radius-badge: 12px; --ls-shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06); /* refresh — corporate accents, surfaces, tints, elevation */ --ls-steel: #3d6a94; --ls-sky: #2b7fd4; --ls-vip: #a97b2e; --ls-vip-bg: #f7efdd; --ls-canvas: #f3f6f9; --ls-panel: #eef2f7; --ls-primary-tint: rgba(1, 45, 80, .07); --ls-primary-tint-2: rgba(1, 45, 80, .13); --ls-shadow-1: 0 1px 2px rgba(15, 34, 54, .06), 0 1px 3px rgba(15, 34, 54, .05); --ls-shadow-2: 0 10px 24px -8px rgba(15, 34, 54, .16); --ls-shadow-pop: 0 22px 50px -14px rgba(4, 20, 38, .34); /* shell — dark navy side nav (both themes) */ --ls-nav-top: #021d31; --ls-nav-bot: #04263f; --ls-nav-ink: #c2ccd7; --ls-nav-ink-dim: #61788c; /* type */ --ls-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Dark theme — navy-tinted slate. Applied via data-theme="dark" on . Only token values change; every component reads these, so the whole UI re-themes. */ :root[data-theme="dark"] { --ls-primary: #3d8bd4; --ls-primary-hover: #4f9bdf; --ls-header: #011d33; --ls-header-ink: #dfeaf5; --ls-link: #4b9bec; --ls-link-muted: #4a7ba3; --ls-text: #e8eef4; --ls-text-secondary: #b4bcc6; --ls-text-muted: #9aa7b4; --ls-text-label: #6d7c8a; --ls-surface: #0f1a25; --ls-surface-alt: #0a141d; --ls-surface-active: rgba(90, 150, 205, .22); --ls-border: #20303e; --ls-border-mid: #26323f; --ls-border-light: #182430; --ls-success-bg: #16301f; --ls-success-text: #6fd18c; --ls-success: #3ea55f; --ls-warning-bg: #35260f; --ls-warning-text: #f0a95f; --ls-danger-bg: #351720; --ls-danger-text: #f08a9c; --ls-danger: #e0556b; --ls-neutral-bg: #1e252e; --ls-neutral-text: #8a929b; --ls-info-bg: #122536; --ls-mark-bg: #5a4a12; --ls-mark-text: #ffe08a; --ls-shadow-card-hover: 0 2px 10px rgba(0, 0, 0, 0.45); /* refresh — dark counterparts */ --ls-steel: #5b86af; --ls-sky: #4b9bec; --ls-vip: #d0a960; --ls-vip-bg: rgba(208, 169, 96, .15); --ls-canvas: #0a141d; --ls-panel: #101d29; --ls-primary-tint: rgba(90, 150, 205, .12); --ls-primary-tint-2: rgba(90, 150, 205, .22); --ls-shadow-1: 0 1px 3px rgba(0, 0, 0, .4); --ls-shadow-2: 0 12px 26px -10px rgba(0, 0, 0, .6); --ls-shadow-pop: 0 22px 50px -14px rgba(0, 0, 0, .7); --ls-nav-top: #050d15; --ls-nav-bot: #0a1722; --ls-nav-ink: #b8c4d0; --ls-nav-ink-dim: #56697b; color-scheme: dark; }