/* Design tokens — Shopify Polaris naming (--p-*) for the admin UI plus the validated data-viz palette (--viz-*) for charts. Light is the default; dark follows the OS setting or an explicit data-theme="dark" on . */ :root { color-scheme: light; /* Backgrounds */ --p-color-bg: #f1f1f1; --p-color-bg-surface: #fcfcfb; --p-color-bg-surface-secondary: #f7f7f6; --p-color-bg-surface-tertiary: #f1f1f0; --p-color-bg-surface-hover: #f3f3f2; --p-color-bg-surface-active: #ebebea; --p-color-bg-inverse: #303030; /* Fills */ --p-color-bg-fill-brand: #303030; --p-color-bg-fill-brand-hover: #1a1a1a; --p-color-bg-fill-brand-active: #0a0a0a; --p-color-bg-fill-critical: #e51c00; --p-color-bg-fill-critical-hover: #b41a00; --p-color-bg-fill-success-secondary: #cdfed4; --p-color-bg-fill-info-secondary: #e0f0ff; --p-color-bg-fill-warning-secondary: #ffef9d; --p-color-bg-fill-critical-secondary: #fedad9; --p-color-bg-fill-caution-secondary: #ffd6a4; --p-color-bg-fill-neutral-secondary: #e3e3e3; --p-color-bg-fill-magic-secondary: #e6e0ff; /* Text */ --p-color-text: #303030; --p-color-text-secondary: #616161; --p-color-text-disabled: #a5a5a5; --p-color-text-brand-on-bg-fill: #ffffff; --p-color-text-critical-on-bg-fill: #ffffff; --p-color-text-success: #0c5132; --p-color-text-info: #00527c; --p-color-text-warning: #4f4700; --p-color-text-critical: #8e1f0b; --p-color-text-caution: #5e4200; --p-color-text-magic: #3b2e8a; --p-color-text-link: #005bd3; /* Borders & icons */ --p-color-border: #e3e3e3; --p-color-border-secondary: #ebebeb; --p-color-border-focus: #005bd3; --p-color-border-critical: #e51c00; --p-color-border-inverse: #616161; --p-color-icon: #4a4a4a; --p-color-icon-secondary: #8a8a8a; /* Spacing — 4px scale */ --p-space-050: 2px; --p-space-100: 4px; --p-space-150: 6px; --p-space-200: 8px; --p-space-300: 12px; --p-space-400: 16px; --p-space-500: 20px; --p-space-600: 24px; --p-space-800: 32px; --p-space-1000: 40px; --p-space-1200: 48px; --p-space-1600: 64px; /* Typography */ --p-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --p-font-family-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace; --p-font-size-body-xs: 11px; --p-font-size-body-sm: 12px; --p-font-size-body-md: 13px; --p-font-size-body-lg: 14px; --p-font-size-heading-xs: 12px; --p-font-size-heading-sm: 13px; --p-font-size-heading-md: 14px; --p-font-size-heading-lg: 16px; --p-font-size-heading-xl: 20px; --p-font-size-heading-2xl: 24px; --p-font-size-heading-3xl: 32px; --p-font-weight-regular: 400; --p-font-weight-medium: 500; --p-font-weight-semibold: 600; --p-font-weight-bold: 700; --p-font-line-height-body: 1.45; --p-font-line-height-heading: 1.25; /* Radius, shadow, motion */ --p-border-radius-100: 4px; --p-border-radius-200: 8px; --p-border-radius-300: 12px; --p-border-radius-400: 16px; --p-border-radius-full: 9999px; --p-shadow-100: 0 1px 0 rgba(26, 26, 26, 0.07); --p-shadow-200: 0 3px 1px -1px rgba(26, 26, 26, 0.07), 0 1px 0 rgba(26, 26, 26, 0.07); --p-shadow-300: 0 4px 6px -2px rgba(26, 26, 26, 0.2); --p-shadow-600: 0 20px 20px -8px rgba(26, 26, 26, 0.28); --p-motion-duration-150: 150ms; --p-motion-duration-200: 200ms; --p-motion-duration-300: 300ms; --p-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* Charts — reference palette (validated against the light surface) */ --viz-surface: #fcfcfb; --viz-ink: #0b0b0b; --viz-ink-2: #52514e; --viz-muted: #898781; --viz-grid: #e1e0d9; --viz-axis: #c3c2b7; --viz-other: #b5b4ad; --viz-s1: #2a78d6; --viz-s2: #eb6834; --viz-s3: #1baf7a; --viz-s4: #eda100; --viz-s5: #e87ba4; --viz-s6: #008300; --viz-s7: #4a3aa7; --viz-s8: #e34948; --viz-seq-250: #86b6ef; --viz-seq-450: #2a78d6; --viz-seq-600: #184f95; --viz-status-good: #0ca30c; --viz-status-warning: #fab219; --viz-status-serious: #ec835a; --viz-status-critical: #d03b3b; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --p-color-bg: #0d0d0d; --p-color-bg-surface: #1a1a19; --p-color-bg-surface-secondary: #222221; --p-color-bg-surface-tertiary: #2a2a28; --p-color-bg-surface-hover: #262625; --p-color-bg-surface-active: #2e2e2c; --p-color-bg-inverse: #e3e3e3; --p-color-bg-fill-brand: #e3e3e3; --p-color-bg-fill-brand-hover: #f1f1f1; --p-color-bg-fill-brand-active: #ffffff; --p-color-bg-fill-critical: #ef5c4a; --p-color-bg-fill-critical-hover: #ff7a6b; --p-color-bg-fill-success-secondary: #0f3b1f; --p-color-bg-fill-info-secondary: #0b2a45; --p-color-bg-fill-warning-secondary: #3d3200; --p-color-bg-fill-critical-secondary: #4a1410; --p-color-bg-fill-caution-secondary: #3f2a00; --p-color-bg-fill-neutral-secondary: #333332; --p-color-bg-fill-magic-secondary: #2b2452; --p-color-text: #f1f1f1; --p-color-text-secondary: #b5b5b5; --p-color-text-disabled: #6d6d6d; --p-color-text-brand-on-bg-fill: #1a1a1a; --p-color-text-critical-on-bg-fill: #1a1a1a; --p-color-text-success: #9beeb0; --p-color-text-info: #9fd0ff; --p-color-text-warning: #ffe27a; --p-color-text-critical: #ffb3ab; --p-color-text-caution: #ffcf8a; --p-color-text-magic: #c9bfff; --p-color-text-link: #7fb3ff; --p-color-border: #3a3a39; --p-color-border-secondary: #2c2c2b; --p-color-border-focus: #3d8bff; --p-color-border-critical: #ef5c4a; --p-color-border-inverse: #b5b5b5; --p-color-icon: #d0d0d0; --p-color-icon-secondary: #8a8a8a; --p-shadow-100: 0 1px 0 rgba(0, 0, 0, 0.4); --p-shadow-200: 0 3px 1px -1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4); --p-shadow-300: 0 4px 6px -2px rgba(0, 0, 0, 0.5); --p-shadow-600: 0 20px 20px -8px rgba(0, 0, 0, 0.6); --viz-surface: #1a1a19; --viz-ink: #ffffff; --viz-ink-2: #c3c2b7; --viz-muted: #898781; --viz-grid: #2c2c2a; --viz-axis: #383835; --viz-other: #5b5a55; --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70; --viz-s4: #c98500; --viz-s5: #d55181; --viz-s6: #008300; --viz-s7: #9085e9; --viz-s8: #e66767; --viz-seq-250: #6da7ec; --viz-seq-450: #3987e5; --viz-seq-600: #184f95; } } :root[data-theme="dark"] { color-scheme: dark; --p-color-bg: #0d0d0d; --p-color-bg-surface: #1a1a19; --p-color-bg-surface-secondary: #222221; --p-color-bg-surface-tertiary: #2a2a28; --p-color-bg-surface-hover: #262625; --p-color-bg-surface-active: #2e2e2c; --p-color-bg-inverse: #e3e3e3; --p-color-bg-fill-brand: #e3e3e3; --p-color-bg-fill-brand-hover: #f1f1f1; --p-color-bg-fill-brand-active: #ffffff; --p-color-bg-fill-critical: #ef5c4a; --p-color-bg-fill-critical-hover: #ff7a6b; --p-color-bg-fill-success-secondary: #0f3b1f; --p-color-bg-fill-info-secondary: #0b2a45; --p-color-bg-fill-warning-secondary: #3d3200; --p-color-bg-fill-critical-secondary: #4a1410; --p-color-bg-fill-caution-secondary: #3f2a00; --p-color-bg-fill-neutral-secondary: #333332; --p-color-bg-fill-magic-secondary: #2b2452; --p-color-text: #f1f1f1; --p-color-text-secondary: #b5b5b5; --p-color-text-disabled: #6d6d6d; --p-color-text-brand-on-bg-fill: #1a1a1a; --p-color-text-critical-on-bg-fill: #1a1a1a; --p-color-text-success: #9beeb0; --p-color-text-info: #9fd0ff; --p-color-text-warning: #ffe27a; --p-color-text-critical: #ffb3ab; --p-color-text-caution: #ffcf8a; --p-color-text-magic: #c9bfff; --p-color-text-link: #7fb3ff; --p-color-border: #3a3a39; --p-color-border-secondary: #2c2c2b; --p-color-border-focus: #3d8bff; --p-color-border-critical: #ef5c4a; --p-color-border-inverse: #b5b5b5; --p-color-icon: #d0d0d0; --p-color-icon-secondary: #8a8a8a; --p-shadow-100: 0 1px 0 rgba(0, 0, 0, 0.4); --p-shadow-200: 0 3px 1px -1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4); --p-shadow-300: 0 4px 6px -2px rgba(0, 0, 0, 0.5); --p-shadow-600: 0 20px 20px -8px rgba(0, 0, 0, 0.6); --viz-surface: #1a1a19; --viz-ink: #ffffff; --viz-ink-2: #c3c2b7; --viz-muted: #898781; --viz-grid: #2c2c2a; --viz-axis: #383835; --viz-other: #5b5a55; --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70; --viz-s4: #c98500; --viz-s5: #d55181; --viz-s6: #008300; --viz-s7: #9085e9; --viz-s8: #e66767; --viz-seq-250: #6da7ec; --viz-seq-450: #3987e5; --viz-seq-600: #184f95; } @media (prefers-reduced-motion: reduce) { :root { --p-motion-duration-150: 0ms; --p-motion-duration-200: 0ms; --p-motion-duration-300: 0ms; } }