:root, [data-theme="dark"] { /* Typography */ --font-primary: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* Backgrounds */ --bg-page: #05060a; --bg-card: #0f1117; --bg-card-alt: #0a0c12; --bg-card-hover: #161b27; --bg-input: rgba(255,255,255,.06); --bg-overlay: rgba(0,0,0,.75); --bg-surface: #1a1d26; /* Borders */ --border-subtle: rgba(255,255,255,.06); --border-default: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.20); /* Text */ --text-primary: #e2e8f0; --text-secondary: rgba(226,232,240,.65); --text-muted: rgba(226,232,240,.35); --text-disabled: rgba(226,232,240,.20); --text-inverse: #0a0f1a; /* Accent colors (same both themes) */ --accent-blue: #63b3ed; --accent-blue-alt: #58a6ff; --accent-blue-muted: #4fa3e0; --accent-green: #4caf7d; --accent-red: #fc8181; --accent-amber: #f6ad55; --accent-purple: #7f77dd; /* Status */ --status-success: #4caf7d; --status-warning: #eab308; --status-error: #ef4444; /* Interactive */ --btn-primary-bg: #63b3ed; --btn-primary-text: #0a0f1a; --btn-hover-bg: rgba(255,255,255,.05); --btn-active-bg: rgba(255,255,255,.10); /* Nav sidebar */ --nav-bg: #0a0d14; --nav-border: rgba(255,255,255,.06); --nav-text: rgba(226,232,240,.55); --nav-text-active: #e2e8f0; --nav-hover-bg: rgba(255,255,255,.05); --nav-active-bg: rgba(255,255,255,.08); /* Cards */ --card-bg: rgba(255,255,255,.02); --card-border: rgba(255,255,255,.07); --card-shadow: none; /* Tables */ --table-header-text: rgba(226,232,240,.35); --table-row-alt: rgba(255,255,255,.02); --table-border: rgba(255,255,255,.04); --table-hover: rgba(255,255,255,.03); /* Status dots */ --dot-on: #4caf7d; --dot-warn: #f6ad55; --dot-off: rgba(226,232,240,.20); --dot-error: #fc8181; /* Inputs */ --input-bg: rgba(255,255,255,.06); --input-border: rgba(255,255,255,.12); --input-focus: rgba(99,179,237,.45); --input-text: #e2e8f0; --input-placeholder: rgba(226,232,240,.30); /* Badge / flash status backgrounds */ --badge-success-bg: #0d2e1a; --badge-warning-bg: #1e1a0d; --badge-neutral-bg: #1a1a1a; --flash-success-bg: #0d2e1a; --flash-success-border: #1a4d2e; --flash-error-bg: #2e0d0d; --flash-error-color: #e05252; --flash-error-border: #4d1a1a; --flash-warning-bg: #1e1a0d; --flash-warning-color: #c4a235; --flash-warning-border: #3d3210; /* Brand colours (source accents on the Shopify Manager overview; the same in both themes) */ --brand-shopify: #95BF47; --brand-shopify-dark: #5E8E3E; --brand-google-blue: #4285F4; --brand-google-red: #EA4335; --brand-google-yellow: #FBBC05; --brand-google-green: #34A853; --brand-pill-text: #ffffff; /* Scrollbar */ --scrollbar-track: rgba(255,255,255,.03); --scrollbar-thumb: rgba(255,255,255,.15); } [data-theme="light"] { /* Backgrounds */ --bg-page: #f0f2f5; --bg-card: #ffffff; --bg-card-alt: #f8fafc; --bg-card-hover: #f1f5f9; --bg-input: rgba(0,0,0,.04); --bg-overlay: rgba(0,0,0,.40); --bg-surface: #e8eef6; /* Borders */ --border-subtle: rgba(0,0,0,.06); --border-default: rgba(0,0,0,.12); --border-strong: rgba(0,0,0,.25); /* Text */ --text-primary: #1a202c; --text-secondary: rgba(26,32,44,.65); --text-muted: rgba(26,32,44,.40); --text-disabled: rgba(26,32,44,.25); --text-inverse: #ffffff; /* Accent colors */ --accent-blue: #2b6cb0; --accent-blue-alt: #3182ce; --accent-blue-muted: #4299e1; --accent-green: #276749; --accent-red: #c53030; --accent-amber: #b7791f; --accent-purple: #553c9a; /* Status */ --status-success: #276749; --status-warning: #b7791f; --status-error: #c53030; /* Interactive */ --btn-primary-bg: #2b6cb0; --btn-primary-text: #ffffff; --btn-hover-bg: rgba(0,0,0,.05); --btn-active-bg: rgba(0,0,0,.10); /* Nav sidebar — stays dark in light mode */ --nav-bg: #1a202c; --nav-border: rgba(255,255,255,.08); --nav-text: rgba(226,232,240,.65); --nav-text-active: #ffffff; --nav-hover-bg: rgba(255,255,255,.08); --nav-active-bg: rgba(255,255,255,.12); /* Cards */ --card-bg: #ffffff; --card-border: rgba(0,0,0,.08); --card-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); /* Tables */ --table-header-text: rgba(26,32,44,.50); --table-row-alt: rgba(0,0,0,.02); --table-border: rgba(0,0,0,.06); --table-hover: rgba(0,0,0,.03); /* Status dots */ --dot-on: #276749; --dot-warn: #b7791f; --dot-off: rgba(26,32,44,.20); --dot-error: #c53030; /* Inputs */ --input-bg: #ffffff; --input-border: rgba(0,0,0,.15); --input-focus: rgba(43,108,176,.45); --input-text: #1a202c; --input-placeholder: rgba(26,32,44,.35); /* Badge / flash status backgrounds */ --badge-success-bg: #dcfce7; --badge-warning-bg: #fefce8; --badge-neutral-bg: #f1f5f9; --flash-success-bg: #f0fdf4; --flash-success-border: #bbf7d0; --flash-error-bg: #fef2f2; --flash-error-color: #c53030; --flash-error-border: #fecaca; --flash-warning-bg: #fffbeb; --flash-warning-color: #b7791f; --flash-warning-border: #fde68a; /* Scrollbar */ --scrollbar-track: rgba(0,0,0,.05); --scrollbar-thumb: rgba(0,0,0,.20); } /* Smooth transitions when switching themes */ *, *::before, *::after { transition: background-color .20s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }