/* * Public-menu themes. * * Each theme applies either at the document root (public menu — `data-theme` * on ) or on a scoped `.theme-preview` container (admin Appearance * preview). The explicit selector list is deliberate: a bare `[data-theme]` * would match admin wrappers and drop specificity below the base `:root {}` * token block in application.css. * * The `.theme-preview` base block re-declares the full default token set so a * preview pane is self-contained: without it, tokens a previewed theme does * not override would inherit the SAVED theme's values from , producing a * hybrid the customer never sees. Keep this block in sync with the :root color * tokens in application.css. */ .theme-preview { --color-bg: oklch(0.97 0.012 86); --color-surface: oklch(0.99 0.008 82); --color-surface-raised: oklch(0.94 0.018 86); --color-surface-deep: oklch(0.89 0.022 84); --color-border: oklch(0.8 0.028 110); --color-text: oklch(0.16 0.018 92); --color-text-muted: oklch(0.42 0.03 105); --color-accent: oklch(0.36 0.07 172); --color-accent-hover: oklch(0.3 0.065 174); --color-accent-light: oklch(0.87 0.045 155); --color-secondary: oklch(0.49 0.07 128); --color-secondary-light: oklch(0.9 0.05 120); --color-honey: oklch(0.78 0.12 82); --color-honey-light: oklch(0.92 0.055 86); --color-mist: oklch(0.86 0.035 218); --color-mist-strong: oklch(0.48 0.055 215); --color-danger: oklch(0.5 0.18 25); --color-danger-light: oklch(0.98 0.01 20); --color-warning: oklch(0.65 0.14 75); --color-focus-ring: oklch(0.55 0.15 240); --color-inverse: oklch(0.19 0.025 160); --color-inverse-text: oklch(0.93 0.015 84); } :root[data-theme="asturian"], .theme-preview[data-theme="asturian"] { --color-bg: oklch(0.97 0.012 86); --color-surface: oklch(0.99 0.008 82); --color-text: oklch(0.16 0.018 92); --color-text-muted: oklch(0.42 0.03 105); --color-accent: oklch(0.36 0.07 172); --color-accent-light: oklch(0.87 0.045 155); --color-honey-light: oklch(0.92 0.055 86); } :root[data-theme="minimal"], .theme-preview[data-theme="minimal"] { --color-bg: oklch(1 0 0); --color-surface: oklch(1 0 0); --color-surface-raised: oklch(0.96 0 0); --color-border: oklch(0.65 0 0); --color-text: oklch(0 0 0); --color-text-muted: oklch(0.33 0 0); --color-accent: oklch(0.25 0 0); --color-accent-hover: oklch(0 0 0); --color-accent-light: oklch(0.9 0 0); --color-honey-light: oklch(0.96 0 0); } :root[data-theme="blue-mist"], .theme-preview[data-theme="blue-mist"] { --color-bg: oklch(0.97 0.012 86); --color-surface: oklch(0.99 0.008 82); --color-surface-raised: oklch(0.93 0.025 220); --color-border: oklch(0.78 0.035 218); --color-text: oklch(0.16 0.018 245); --color-text-muted: oklch(0.42 0.035 230); --color-accent: oklch(0.48 0.055 215); --color-accent-hover: oklch(0.38 0.055 218); --color-accent-light: oklch(0.86 0.035 218); --color-honey-light: oklch(0.91 0.025 218); } :root[data-theme="sage"], .theme-preview[data-theme="sage"] { --color-bg: oklch(0.97 0.014 130); --color-surface: oklch(0.99 0.01 120); --color-surface-raised: oklch(0.93 0.03 150); --color-border: oklch(0.8 0.04 150); --color-text: oklch(0.18 0.02 150); --color-text-muted: oklch(0.44 0.03 150); --color-accent: oklch(0.5 0.06 150); --color-accent-hover: oklch(0.4 0.06 150); --color-accent-light: oklch(0.87 0.04 150); --color-honey-light: oklch(0.92 0.05 90); } :root[data-theme="ink"], .theme-preview[data-theme="ink"] { --color-bg: oklch(0.98 0.005 250); --color-surface: oklch(1 0 0); --color-surface-raised: oklch(0.95 0.01 250); --color-border: oklch(0.8 0.02 250); --color-text: oklch(0.18 0.03 265); --color-text-muted: oklch(0.42 0.03 265); --color-accent: oklch(0.3 0.06 265); --color-accent-hover: oklch(0.22 0.06 265); --color-accent-light: oklch(0.88 0.03 265); --color-honey-light: oklch(0.92 0.05 90); }