/* ============================================================ Packatape Control Tower — global design tokens (theme layer) ============================================================ THE application-wide theme. Every UI surface (current and future: Executive Dashboard, Sales Analytics, Advertising, Inventory, POs, Monday planning, Stock Risk, Forecasting, Warehouse, Factory, Containers, Profitability, Data Health, Audit, Settings) consumes these semantic tokens and NOTHING else. Never hard-code colours in page CSS/JS; never invent page-specific palettes. Contract: - The effective theme is `data-theme="light"` or `data-theme="dark"` on , managed by /theme.js (modes: AUTO | LIGHT | DARK). - Tokens are SEMANTIC (role-named), technology-neutral, and equally consumable by future React / ECharts / AG Grid / embedded BI. - Dark is the established Packatape look (preserved from the first Sales Analytics build); Light is its own professionally designed daytime theme — not an inversion. See docs/design-system.md for conventions and the anti-flash snippet. ============================================================ */ /* ---------- LIGHT: professional daytime theme ---------- */ html[data-theme="light"] { color-scheme: light; /* surfaces: white page, near-white cards, subtle grey layering */ --bg-page: #f5f6f8; --bg-surface: #ffffff; --bg-surface-secondary: #f8f9fb; --bg-elevated: #ffffff; --text-primary: #14161a; --text-secondary: #495057; --text-muted: #7b828c; --border: #e3e6ea; --border-strong: #c6ccd4; --accent: #1c5cab; --accent-hover: #164a8c; --accent-selected: #e4edf9; /* business semantics — always paired with text/icons, never colour-alone */ --positive: #0a6e0a; --negative: #c22f2f; --warning: #9a6a00; --critical: #b02a2a; --info: #1c5cab; /* risk badges (bg + ink pairs keep AA contrast in-theme) */ --risk-low-bg: #e7f3e7; --risk-low-ink: #0a5c0a; --risk-medium-bg: #fdf3d7; --risk-medium-ink: #7a5600; --risk-high-bg: #fdeadd; --risk-high-ink: #96400c; --risk-critical-bg: #fbe3e3; --risk-critical-ink: #8f1f1f; --risk-unknown-bg: #eceef1; --risk-unknown-ink: #4b5563; /* charts */ --chart-grid: #e8eaee; --chart-axis: #c6ccd4; --chart-tooltip-bg: #ffffff; --chart-series-1: #2a78d6; --chart-series-2: #eb6834; --chart-series-3: #1baf7a; --chart-series-4: #eda100; --chart-series-5: #e87ba4; --chart-series-6: #008300; --chart-series-7: #4a3aa7; --chart-series-8: #e34948; /* controls, tables, interaction */ --input-bg: #ffffff; --input-border: #c6ccd4; --input-disabled-bg: #f1f3f5; --table-header-bg: #f3f5f7; --table-row-alt-bg: #fafbfc; --table-total-bg: #eef1f5; --hover-bg: #f1f4f8; --selected-bg: #e4edf9; --focus-ring: #7fa8d9; --shadow: 0 1px 3px rgba(20, 22, 26, 0.08), 0 4px 14px rgba(20, 22, 26, 0.06); } /* ---------- DARK: the established Packatape look ---------- */ html[data-theme="dark"] { color-scheme: dark; --bg-page: #0d0d0d; --bg-surface: #1a1a19; --bg-surface-secondary: #171716; --bg-elevated: #222221; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.22); --accent: #3987e5; --accent-hover: #5598e7; --accent-selected: #1d2f47; --positive: #0ca30c; --negative: #e66767; --warning: #d9a62e; --critical: #e05555; --info: #3987e5; --risk-low-bg: #12300f; --risk-low-ink: #7fd97f; --risk-medium-bg: #38300f; --risk-medium-ink: #e6c464; --risk-high-bg: #3d2413; --risk-high-ink: #efa06b; --risk-critical-bg: #401a1a; --risk-critical-ink: #f08a8a; --risk-unknown-bg: #26282b; --risk-unknown-ink: #a8afb8; --chart-grid: #2c2c2a; --chart-axis: #383835; --chart-tooltip-bg: #222221; --chart-series-1: #3987e5; --chart-series-2: #d95926; --chart-series-3: #199e70; --chart-series-4: #c98500; --chart-series-5: #d55181; --chart-series-6: #008300; --chart-series-7: #9085e9; --chart-series-8: #e66767; --input-bg: #171716; --input-border: rgba(255, 255, 255, 0.18); --input-disabled-bg: #202020; --table-header-bg: #202020; --table-row-alt-bg: #1e1e1d; --table-total-bg: #242423; --hover-bg: #232322; --selected-bg: #1d2f47; --focus-ring: #3987e5; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.35); } /* ---------- shared component primitives ---------- */ html { background: var(--bg-page); } body { background: var(--bg-page); color: var(--text-primary); } /* Theme control (rendered by theme.js into [data-theme-control]) */ .pt-theme-control { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-surface); } .pt-theme-control button { appearance: none; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; padding: 5px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .pt-theme-control button + button { border-left: 1px solid var(--border); } .pt-theme-control button[aria-pressed="true"] { background: var(--accent-selected); color: var(--text-primary); font-weight: 600; } .pt-theme-control button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } /* Session control ("email · Sign out"), rendered by theme.js beside the theme control on every authenticated page. */ .pt-session-control { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; font-size: 12px; color: var(--text-secondary); } .pt-session-control__user { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-session-control button { appearance: none; background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 12px; padding: 5px 10px; cursor: pointer; } .pt-session-control button:hover { background: var(--hover-bg); color: var(--text-primary); } .pt-session-control button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } /* Risk/status badges: text is always present — never colour alone */ .pt-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .pt-badge--low { background: var(--risk-low-bg); color: var(--risk-low-ink); } .pt-badge--medium { background: var(--risk-medium-bg); color: var(--risk-medium-ink); } .pt-badge--high { background: var(--risk-high-bg); color: var(--risk-high-ink); } .pt-badge--critical { background: var(--risk-critical-bg); color: var(--risk-critical-ink); } .pt-badge--unknown { background: var(--risk-unknown-bg); color: var(--risk-unknown-ink); }