/*
 * Wave color system.
 *
 * This is the only web source file that may contain literal colors. Components
 * consume semantic --color-* tokens; templates and application code select
 * semantic states instead of choosing colors.
 */

:root {
  color-scheme: dark;

  /* Page and neutral surfaces. */
  --color-page: #121212;
  --color-page-deep: #000000;
  --color-page-overlay: rgb(18 18 18 / 0.96);
  --color-page-overlay-mobile: rgb(18 18 18 / 0.94);
  --color-page-overlay-soft: rgb(18 18 18 / 0.76);
  --color-gradient-strong: rgb(0 0 0 / 0.90);
  --color-gradient-middle: rgb(0 0 0 / 0.55);
  --color-page-mobile: rgb(0 0 0 / 0.95);
  --color-backdrop: rgb(0 0 0 / 0.72);
  --color-backdrop-soft: rgb(0 0 0 / 0.66);
  --color-backdrop-strong: rgb(0 0 0 / 0.82);
  --color-backdrop-photo: rgb(0 0 0 / 0.62);
  --color-surface-deepest: #050505;
  --color-surface-deeper: #0a0a0a;
  --color-sidebar: #0b0b0b;
  --color-surface-notice: #0f0f0f;
  --color-surface-sidebar: #101010;
  --color-surface-low: #111111;
  --color-surface-muted: #131313;
  --color-surface-header: #141414;
  --color-surface-soft: #151515;
  --color-surface: #181818;
  --color-surface-selected: #1a1a1a;
  --color-surface-active: #1b1b1b;
  --color-control: #1c1c1c;
  --color-surface-raised: #1e1e1e;
  --color-surface-elevated: #202020;
  --color-control-raised: #212121;
  --color-control-hover: #242424;
  --color-control-secondary: #252525;
  --color-avatar: #292929;
  --color-control-active: #2a2a2a;
  --color-message-outgoing: #2b2b2b;
  --color-badge-muted: #3a3a3a;
  --color-control-disabled: #333333;
  --color-surface-inverse: var(--color-text-primary);
  --color-surface-inverse-soft: var(--color-text-soft);
  --color-surface-inverse-accent: var(--color-text-accent-soft);
  --color-sidebar-overlay: rgb(11 11 11 / 0.96);
  --color-surface-glass: rgb(12 12 12 / 0.52);
  --color-surface-muted-glass: rgb(19 19 19 / 0.58);
  --color-surface-muted-overlay: rgb(19 19 19 / 0.92);
  --color-surface-transparent: rgb(19 19 19 / 0);

  /* Text and icon hierarchy. */
  --color-text-primary: #f2f2f2;
  --color-text-softest: #f8fafc;
  --color-text-heading: #f7f7f7;
  --color-text-soft: #f5f5f5;
  --color-text-accent-soft: #f4f4f4;
  --color-text-hover: #f2f2f2;
  --color-text-control: #e5e7eb;
  --color-text-secondary-strong: #e5e5e5;
  --color-text-icon: #e3e3e3;
  --color-text-prose-quote: #e2e8f0;
  --color-text-secondary: #d4d4d4;
  --color-text-prose: #cbd5e1;
  --color-text-caption: #cfcfcf;
  --color-text-guest: #b7b7b7;
  --color-text-muted: #a3a3a3;
  --color-text-placeholder: #9a9a9a;
  --color-text-icon-muted: #8d8d8d;
  --color-text-subtle: #737373;
  --color-text-faint: #525252;
  --color-text-inverse: #050505;

  /* Primary action and selection. */
  --color-action: #e8e8e4;
  --color-action-hover: #f2f2ef;
  --color-action-active: #dadad4;
  --color-action-text: #111111;
  --color-selection: #e8e8e4;
  --color-selection-ring: rgb(232 232 228 / 0.42);
  --color-focus: rgb(238 239 244 / 0.72);
  --color-focus-strong: rgb(224 224 224 / 0.88);
  --color-focus-cyan: rgb(103 232 249 / 0.85);

  /* Borders and neutral translucent layers. */
  --color-border-hairline: rgb(191 192 203 / 0.08);
  --color-border-hairline-hover: rgb(191 192 203 / 0.16);
  --color-border-hairline-strong: rgb(191 192 203 / 0.14);
  --color-border: rgb(214 215 222 / 0.10);
  --color-border-strong: rgb(214 215 222 / 0.14);
  --color-border-emphasis: rgb(214 215 222 / 0.18);
  --color-border-hover: rgb(238 239 244 / 0.28);
  --color-border-white-soft: rgb(210 210 210 / 0.08);
  --color-border-white: rgb(210 210 210 / 0.12);
  --color-border-white-strong: rgb(214 214 214 / 0.15);
  --color-border-white-emphasis: rgb(218 218 218 / 0.20);
  --color-border-white-hover: rgb(228 228 228 / 0.30);
  --color-border-white-selected: rgb(222 222 222 / 0.42);
  --color-border-selected: #dedede;
  --color-divider: rgb(210 210 210 / 0.14);
  --color-divider-prose: rgb(245 245 245 / 0.28);

  --color-tint-faint: rgb(216 216 216 / 0.03);
  --color-tint-low: rgb(216 216 216 / 0.035);
  --color-tint: rgb(216 216 216 / 0.04);
  --color-tint-soft: rgb(216 216 216 / 0.045);
  --color-tint-hover: rgb(230 230 230 / 0.065);
  --color-tint-middle: rgb(216 216 216 / 0.05);
  --color-tint-focus: rgb(226 226 226 / 0.09);
  --color-tint-raised: rgb(216 216 216 / 0.075);
  --color-tint-selected: rgb(220 220 220 / 0.09);
  --color-tint-selected-strong: rgb(220 220 220 / 0.11);
  --color-tint-control: rgb(216 216 216 / 0.10);
  --color-tint-control-hover: rgb(228 228 228 / 0.13);
  --color-tint-emphasis: rgb(216 216 216 / 0.12);
  --color-tint-emphasis-hover: rgb(230 230 230 / 0.16);
  --color-tint-emphasis-strong: rgb(216 216 216 / 0.18);
  --color-tint-active: rgb(212 212 212 / 0.22);
  --color-tint-active-strong: rgb(212 212 212 / 0.26);
  --color-tint-border-focus: rgb(230 230 230 / 0.48);
  --color-tint-decoration: rgb(232 232 232 / 0.42);
  --color-tint-decoration-strong: rgb(232 232 232 / 0.45);
  --color-tint-text-faded: rgb(242 242 242 / 0.52);
  --color-tint-text-soft: rgb(242 242 242 / 0.58);
  --color-tint-text: rgb(242 242 242 / 0.72);
  --color-tint-text-medium: rgb(242 242 242 / 0.68);
  --color-tint-text-strong: rgb(242 242 242 / 0.78);
  --color-tint-text-high: rgb(242 242 242 / 0.84);
  --color-tint-text-emphasis: rgb(242 242 242 / 0.86);
  --color-tint-text-max: rgb(242 242 242 / 0.92);
  --color-tint-decoration-hover: rgb(240 240 240 / 0.82);
  --color-transparent: rgb(0 0 0 / 0);

  /* Feedback states. */
  --color-danger: #ef4444;
  --color-danger-strong: #ff3b30;
  --color-danger-text: #fecaca;
  --color-danger-text-soft: #fee2e2;
  --color-danger-text-muted: #fca5a5;
  --color-danger-text-active: #f87171;
  --color-danger-surface: rgb(127 29 29 / 0.16);
  --color-danger-surface-soft: rgb(127 29 29 / 0.18);
  --color-danger-surface-hover: rgb(127 29 29 / 0.20);
  --color-danger-surface-translucent-pill: rgb(127 29 29 / 0.22);
  --color-danger-surface-active: rgb(127 29 29 / 0.34);
  --color-danger-surface-message: #351619;
  --color-danger-surface-solid-pill: #3a1717;
  --color-danger-border-soft: rgb(248 113 113 / 0.28);
  --color-danger-border: rgb(248 113 113 / 0.42);
  --color-danger-border-message: rgb(248 113 113 / 0.32);
  --color-danger-border-pill: rgb(248 113 113 / 0.34);
  --color-danger-border-hover: rgb(248 113 113 / 0.38);
  --color-danger-progress-surface: rgb(239 68 68 / 0.15);
  --color-danger-progress-surface-hover: rgb(239 68 68 / 0.25);
  --color-danger-progress-border: rgb(239 68 68 / 0.35);
  --color-danger-progress-border-strong: rgb(239 68 68 / 0.48);
  --color-danger-strong-surface: rgb(255 59 48 / 0.16);
  --color-danger-strong-surface-hover: rgb(255 59 48 / 0.20);
  --color-danger-strong-surface-active: rgb(255 59 48 / 0.22);

  --color-success: #22c55e;
  --color-success-text: #d1fae5;
  --color-success-text-soft: #bbf7d0;
  --color-success-text-bright: #86efac;
  --color-success-text-muted: #6ee7b7;
  --color-success-surface: rgb(6 78 59 / 0.16);
  --color-success-surface-soft: rgb(6 95 70 / 0.14);
  --color-success-surface-medium: rgb(6 95 70 / 0.18);
  --color-success-surface-strong: rgb(6 95 70 / 0.20);
  --color-success-border: rgb(52 211 153 / 0.42);
  --color-success-border-soft: rgb(52 211 153 / 0.28);
  --color-success-border-medium: rgb(52 211 153 / 0.35);
  --color-success-border-strong: rgb(52 211 153 / 0.36);
  --color-success-highlight: rgb(52 211 153 / 0.12);
  --color-success-progress-surface: rgb(34 197 94 / 0.15);
  --color-success-progress-surface-hover: rgb(34 197 94 / 0.25);
  --color-success-progress-border: rgb(34 197 94 / 0.28);
  --color-success-pill-surface: rgb(20 83 45 / 0.28);

  --color-warning: #facc15;
  --color-warning-text: #fde68a;
  --color-warning-text-bright: #fde047;
  --color-warning-brand: #fdc700;
  --color-warning-admin: #ffb900;
  --color-warning-surface: rgb(146 64 14 / 0.16);
  --color-warning-surface-admin: #211209;
  --color-warning-border: rgb(245 158 11 / 0.42);
  --color-warning-border-admin: rgb(255 185 0 / 0.42);
  --color-warning-border-admin-strong: rgb(255 185 0 / 0.45);
  --color-warning-progress-surface: rgb(250 204 21 / 0.15);
  --color-warning-progress-surface-hover: rgb(250 204 21 / 0.25);

  --color-info-text: #bae6fd;
  --color-product-world: #fdc700;
  --color-product-boost: #51a2ff;
  --color-product-good: #05df72;
  --color-status-active-surface: #0d542b;
  --color-status-active-text: #7bf1a8;
  --color-status-expired-surface: #7f1d1d;
  --color-status-expired-text: #ff6467;

  /* Admin client lifecycle statuses. */
  --color-client-status-expiring: #FF8066;
  --color-client-status-expiring-soon: #F5B942;
  --color-client-status-expired: #FF4D5E;
  --color-client-status-departed: #3A3E45;
  --color-client-status-new-customer: #54A6FF;
  --color-client-status-regular: #45D483;
  --color-client-status-active: #2FC7B1;
  --color-client-status-newcomer: #A38BFA;
  --color-client-status-no-purchase: #747B85;
  --color-client-status-lost: #5A3B42;

  /* Shadows and focus effects. */
  --color-shadow-faint: rgb(0 0 0 / 0.04);
  --color-shadow-inset: rgb(0 0 0 / 0.06);
  --color-shadow-soft: rgb(0 0 0 / 0.20);
  --color-shadow-toolbar: rgb(0 0 0 / 0.24);
  --color-shadow-card: rgb(0 0 0 / 0.26);
  --color-shadow-medium: rgb(0 0 0 / 0.28);
  --color-shadow-raised: rgb(0 0 0 / 0.34);
  --color-shadow-focus: rgb(0 0 0 / 0.32);
  --color-shadow-bottom: rgb(0 0 0 / 0.35);
  --color-shadow-modal: rgb(0 0 0 / 0.55);
  --color-shadow-hover: rgb(0 0 0 / 0.45);
  --color-text-shadow-strong: rgb(0 0 0 / 0.90);
  --color-text-shadow-soft: rgb(0 0 0 / 0.65);
  --color-highlight-faint: rgb(220 220 220 / 0.04);
  --color-highlight-soft: rgb(196 196 196 / 0.07);
  --color-highlight-hover: rgb(196 196 196 / 0.10);
  --color-highlight-strong: rgb(220 220 220 / 0.46);
  --color-card-ring-hover: rgb(238 239 244 / 0.44);
  --color-card-ring-focus: rgb(238 239 244 / 0.52);
  --color-prose: rgb(203 213 225);
  --color-prose-quote: rgb(226 232 240);
  --color-theme-soft-translucent: rgb(244 244 244 / 0.72);
  --color-prose-border-soft: rgb(245 245 245 / 0.14);
  --color-prose-border: rgb(245 245 245 / 0.16);
  --color-prose-decoration: rgb(245 245 245 / 0.44);

  /* Canvas and generated visuals. */
  --color-qr-dark: #000000;
  --color-qr-light: #f0f0f0;
  --color-chart-text: rgb(226, 232, 240);
  --color-chart-grid: rgb(203, 213, 225);
  --color-chart-grid-faint: rgba(148, 163, 184, 0.16);
  --color-chart-canvas: rgb(5, 5, 5);
  --color-chart-tooltip-bg: rgba(17, 17, 17, 0.96);
  --color-chart-tooltip-border: rgba(210, 210, 210, 0.14);
  --color-chart-tooltip-title: rgb(242, 242, 242);
  --color-chart-revenue: rgb(250, 204, 21);
  --color-chart-revenue-fill-top: rgba(250, 204, 21, 0.22);
  --color-chart-revenue-fill-bottom: rgba(250, 204, 21, 0.02);
  --color-chart-payments: rgb(45, 212, 191);
  --color-chart-payments-fill: rgba(45, 212, 191, 0.26);
  --color-chart-payments-hover: rgba(45, 212, 191, 0.42);
  --color-chart-new: rgb(52, 211, 153);
  --color-chart-new-fill: rgba(52, 211, 153, 0.34);
  --color-chart-new-hover: rgba(52, 211, 153, 0.48);
  --color-chart-renewal: rgb(251, 191, 36);
  --color-chart-renewal-fill: rgba(251, 191, 36, 0.34);
  --color-chart-renewal-hover: rgba(251, 191, 36, 0.48);
  --color-chart-danger: rgb(239, 68, 68);
  --color-chart-danger-fill: rgba(239, 68, 68, 0.18);
  --color-chart-site: rgb(15, 23, 42);
  --color-chart-site-fill: rgba(15, 23, 42, 0.18);
  --color-chart-bot: rgb(59, 130, 246);
  --color-chart-bot-fill: rgba(59, 130, 246, 0.18);
  --color-chart-other-method: rgb(251, 113, 133);
  --color-chart-other-method-fill: rgba(251, 113, 133, 0.18);
  --color-chart-other-source: rgb(132, 204, 22);
  --color-chart-other-source-fill: rgba(132, 204, 22, 0.18);
  --color-chart-boost: rgb(96, 165, 250);
  --color-chart-boost-fill: rgba(96, 165, 250, 0.18);
  --color-chart-revenue-series-fill: rgba(250, 204, 21, 0.18);
  --color-chart-green: rgb(34, 197, 94);
  --color-chart-green-fill: rgba(34, 197, 94, 0.18);
  --color-chart-series-sky: rgb(14, 165, 233);
  --color-chart-series-sky-fill: rgba(14, 165, 233, 0.18);
  --color-chart-series-purple: rgb(168, 85, 247);
  --color-chart-series-purple-fill: rgba(168, 85, 247, 0.18);
  --color-chart-series-pink: rgb(236, 72, 153);
  --color-chart-series-pink-fill: rgba(236, 72, 153, 0.18);

  /* Admin workspace palette. */
  --color-admin-bg: #0c0c0c;
  --color-admin-bg-deep: #070707;
  --color-admin-sidebar: #0a0a0a;
  --color-admin-sidebar-overlay: rgb(10 10 10 / 0.96);
  --color-admin-surface-deep: #101010;
  --color-admin-surface: #171717;
  --color-admin-surface-muted: #1b1b1b;
  --color-admin-surface-raised: #202020;
  --color-admin-control: #242424;
  --color-admin-control-hover: #2d2d2d;
  --color-admin-control-active: #363636;
  --color-admin-border: rgb(196 196 196 / 0.14);
  --color-admin-border-strong: rgb(210 210 210 / 0.23);
  --color-admin-border-hover: rgb(232 232 232 / 0.34);
  --color-admin-divider: rgb(196 196 196 / 0.12);
  --color-admin-text-primary: #f7f7f7;
  --color-admin-text-soft: #e6e6e6;
  --color-admin-text-secondary: #cecece;
  --color-admin-text-muted: #a7a7a7;
  --color-admin-text-subtle: #929292;
  --color-admin-text-faint: #777777;
  --color-admin-text-inverse: #0b0b0b;
  --color-admin-notification: #ed1e39;
  --color-admin-notification-text: #ffffff;
  --color-admin-accent: #e5e5e5;
  --color-admin-accent-hover: #ffffff;
  --color-admin-accent-active: #c9c9c9;
  --color-admin-accent-soft: rgb(232 232 232 / 0.1);
  --color-admin-accent-medium: rgb(232 232 232 / 0.16);
  --color-admin-accent-ring: rgb(232 232 232 / 0.28);
  --color-admin-focus: rgb(245 245 245 / 0.9);
  --color-admin-highlight: rgb(232 232 232 / 0.72);
  --color-admin-tint-faint: rgb(232 232 232 / 0.025);
  --color-admin-tint: rgb(232 232 232 / 0.05);
  --color-admin-tint-hover: rgb(232 232 232 / 0.075);
  --color-admin-tint-selected: rgb(232 232 232 / 0.11);
  --color-admin-message-outgoing: #2a2a2a;
  --color-admin-message-incoming: #1f1f1f;
  --color-admin-shadow: rgb(0 0 0 / 0.42);
  --color-admin-shadow-soft: rgb(0 0 0 / 0.24);

  /* Admin chart palette. */
  --color-admin-chart-text: #d9dde2;
  --color-admin-chart-axis: #8f98a5;
  --color-admin-chart-grid: #252b33;
  --color-admin-chart-track: #2a3038;
  --color-admin-chart-canvas: #111111;
  --color-admin-chart-tooltip: rgb(12 12 12 / 0.97);
  --color-admin-chart-tooltip-border: rgb(210 210 210 / 0.28);
  --color-admin-chart-revenue: #62db7a;
  --color-admin-chart-payments: #a876ff;
  --color-admin-chart-new: #25c878;
  --color-admin-chart-renewal: #ff8a3d;
  --color-admin-chart-rub: #7FAF54;
  --color-admin-chart-crypto: #f04d57;
  --color-admin-chart-site: #3656c9;
  --color-admin-chart-bot: #229ed9;
  --color-admin-chart-other-method: #8f98a5;
  --color-admin-chart-other-source: #8f98a5;
  --color-admin-chart-boost: #3698ff;
  --color-admin-chart-server-1: #ffce2f;
  --color-admin-chart-server-2: #8f98a5;
  --color-admin-chart-server-3: #8f98a5;
  --color-admin-chart-server-4: #8f98a5;
  --color-admin-chart-server-5: #8f98a5;
  --color-admin-chart-server-6: #8f98a5;
  --color-action-legacy-cyan: rgb(34 211 238);
}

/* Existing component namespaces are aliases, not independent palettes. */
body.user-surface {
  --ui-bg: var(--color-page);
  --ui-bg-backdrop: var(--color-backdrop);
  --ui-bg-mobile: var(--color-page-mobile);
  --ui-surface: var(--color-surface);
  --ui-surface-muted: var(--color-surface-muted);
  --ui-surface-soft: var(--color-surface-soft);
  --ui-surface-raised: var(--color-surface-raised);
  --ui-control: var(--color-control);
  --ui-control-muted: var(--color-control-hover);
  --ui-border: var(--color-border);
  --ui-border-strong: var(--color-border-strong);
  --ui-border-emphasis: var(--color-border-emphasis);
  --ui-border-hover: var(--color-border-hover);
  --ui-border-focus: var(--color-focus);
  --ui-text: var(--color-text-primary);
  --ui-text-soft: var(--color-text-soft);
  --ui-text-muted: var(--color-text-muted);
  --ui-text-subtle: var(--color-text-subtle);
  --ui-text-faint: var(--color-text-faint);
  --ui-text-inverse: var(--color-text-inverse);
  --ui-prose-text: var(--color-text-prose);
  --ui-prose-quote-text: var(--color-text-prose-quote);
  --ui-accent: var(--color-action);
  --ui-accent-hover: var(--color-action-hover);
  --ui-accent-active: var(--color-action-active);
  --ui-accent-text: var(--color-action-text);
  --ui-tint: var(--color-tint-faint);
  --ui-tint-hover: var(--color-tint);
  --ui-tint-selected: var(--color-tint-selected);
  --ui-selected-border: var(--color-selection);
  --ui-selected-ring: var(--color-selection-ring);
  --ui-danger-bg: var(--color-danger-surface);
  --ui-danger-border: var(--color-danger-border);
  --ui-danger-text: var(--color-danger-text);
  --ui-danger-text-strong: var(--color-danger-text-active);
  --ui-success-bg: var(--color-success-surface);
  --ui-success-border: var(--color-success-border);
  --ui-success-text: var(--color-success-text);
  --ui-warning-bg: var(--color-warning-surface);
  --ui-warning-border: var(--color-warning-border);
  --ui-warning-text: var(--color-warning-text);
  --ui-status-active-bg: var(--color-status-active-surface);
  --ui-status-active-text: var(--color-status-active-text);
  --ui-status-expired-bg: var(--color-status-expired-surface);
  --ui-status-expired-text: var(--color-status-expired-text);
  --ui-status-world-text: var(--color-product-world);
  --ui-status-boost-text: var(--color-product-boost);
  --ui-avatar-bg: var(--color-avatar);
}

body.admin-surface {
  --color-page: var(--color-admin-bg);
  --color-page-deep: var(--color-admin-bg-deep);
  --color-page-overlay: var(--color-admin-sidebar-overlay);
  --color-sidebar: var(--color-admin-sidebar);
  --color-sidebar-overlay: var(--color-admin-sidebar-overlay);
  --color-surface-deepest: var(--color-admin-bg-deep);
  --color-surface-deeper: var(--color-admin-surface-deep);
  --color-surface-notice: var(--color-admin-surface-deep);
  --color-surface-low: var(--color-admin-surface-muted);
  --color-surface-muted: var(--color-admin-surface-muted);
  --color-surface-header: var(--color-admin-surface-raised);
  --color-surface-soft: var(--color-admin-surface-muted);
  --color-surface: var(--color-admin-surface);
  --color-surface-selected: var(--color-admin-control-hover);
  --color-surface-active: var(--color-admin-control-active);
  --color-control: var(--color-admin-control);
  --color-surface-raised: var(--color-admin-surface-raised);
  --color-surface-elevated: var(--color-admin-control-hover);
  --color-control-raised: var(--color-admin-control);
  --color-control-hover: var(--color-admin-control-hover);
  --color-avatar: var(--color-admin-control-hover);
  --color-control-active: var(--color-admin-control-active);
  --color-message-outgoing: var(--color-admin-message-outgoing);
  --color-badge-muted: var(--color-admin-control-active);
  --color-control-disabled: var(--color-admin-control-hover);
  --color-text-primary: var(--color-admin-text-primary);
  --color-text-heading: var(--color-admin-text-primary);
  --color-text-softest: var(--color-admin-text-primary);
  --color-text-soft: var(--color-admin-text-soft);
  --color-text-accent-soft: var(--color-admin-text-soft);
  --color-text-hover: var(--color-admin-text-primary);
  --color-text-control: var(--color-admin-text-soft);
  --color-text-secondary-strong: var(--color-admin-text-soft);
  --color-text-icon: var(--color-admin-text-secondary);
  --color-text-prose: var(--color-admin-text-secondary);
  --color-text-secondary: var(--color-admin-text-secondary);
  --color-text-caption: var(--color-admin-text-muted);
  --color-text-muted: var(--color-admin-text-muted);
  --color-text-placeholder: var(--color-admin-text-subtle);
  --color-text-icon-muted: var(--color-admin-text-subtle);
  --color-text-subtle: var(--color-admin-text-subtle);
  --color-text-faint: var(--color-admin-text-faint);
  --color-text-inverse: var(--color-admin-text-inverse);
  --color-action: var(--color-admin-accent);
  --color-action-hover: var(--color-admin-accent-hover);
  --color-action-active: var(--color-admin-accent-active);
  --color-action-text: var(--color-admin-text-inverse);
  --color-surface-inverse: var(--color-admin-accent-hover);
  --color-surface-inverse-soft: var(--color-admin-accent-hover);
  --color-surface-inverse-accent: var(--color-admin-accent);
  --color-selection: var(--color-admin-accent);
  --color-selection-ring: var(--color-admin-accent-ring);
  --color-focus: var(--color-admin-focus);
  --color-focus-strong: var(--color-admin-focus);
  --color-border-hairline: var(--color-admin-border);
  --color-border-hairline-hover: var(--color-admin-border-hover);
  --color-border-hairline-strong: var(--color-admin-border-strong);
  --color-border: var(--color-admin-border);
  --color-border-strong: var(--color-admin-border-strong);
  --color-border-emphasis: var(--color-admin-border-strong);
  --color-border-hover: var(--color-admin-border-hover);
  --color-border-white-soft: var(--color-admin-divider);
  --color-border-white: var(--color-admin-border);
  --color-border-white-strong: var(--color-admin-border-strong);
  --color-border-white-emphasis: var(--color-admin-border-strong);
  --color-border-white-hover: var(--color-admin-border-hover);
  --color-border-white-selected: var(--color-admin-accent);
  --color-border-selected: var(--color-admin-accent);
  --color-divider: var(--color-admin-divider);
  --color-tint-faint: var(--color-admin-tint-faint);
  --color-tint-low: var(--color-admin-tint-faint);
  --color-tint: var(--color-admin-tint);
  --color-tint-soft: var(--color-admin-tint);
  --color-tint-hover: var(--color-admin-tint-hover);
  --color-tint-middle: var(--color-admin-tint-hover);
  --color-tint-focus: var(--color-admin-accent-soft);
  --color-tint-raised: var(--color-admin-tint-hover);
  --color-tint-selected: var(--color-admin-tint-selected);
  --color-tint-selected-strong: var(--color-admin-accent-medium);
  --color-tint-control: var(--color-admin-tint-hover);
  --color-tint-active: var(--color-admin-tint-selected);
  --color-tint-active-strong: var(--color-admin-accent-ring);
  --color-highlight-soft: var(--color-admin-accent-soft);
  --color-highlight-hover: var(--color-admin-accent-medium);
  --color-highlight-strong: var(--color-admin-highlight);
  --color-card-ring-hover: var(--color-admin-border-hover);
  --color-card-ring-focus: var(--color-admin-focus);
  --color-shadow-card: var(--color-admin-shadow);
  --color-shadow-soft: var(--color-admin-shadow-soft);
  --color-shadow-toolbar: var(--color-admin-shadow-soft);
  --color-chart-text: var(--color-admin-chart-text);
  --color-chart-axis: var(--color-admin-chart-axis);
  --color-chart-grid: var(--color-admin-chart-axis);
  --color-chart-grid-faint: var(--color-admin-chart-grid);
  --color-chart-track: var(--color-admin-chart-track);
  --color-chart-canvas: var(--color-admin-chart-canvas);
  --color-chart-tooltip-bg: var(--color-admin-chart-tooltip);
  --color-chart-tooltip-border: var(--color-admin-chart-tooltip-border);
  --color-chart-tooltip-title: var(--color-admin-text-primary);
  --color-chart-revenue: var(--color-admin-chart-revenue);
  --color-chart-payments: var(--color-admin-chart-payments);
  --color-chart-payments-fill: color-mix(in srgb, var(--color-admin-chart-payments) 65%, transparent);
  --color-chart-payments-hover: color-mix(in srgb, var(--color-admin-chart-payments) 75%, transparent);
  --color-chart-new: var(--color-admin-chart-new);
  --color-chart-new-fill: color-mix(in srgb, var(--color-admin-chart-new) 65%, transparent);
  --color-chart-new-hover: color-mix(in srgb, var(--color-admin-chart-new) 75%, transparent);
  --color-chart-renewal: var(--color-admin-chart-renewal);
  --color-chart-renewal-fill: color-mix(in srgb, var(--color-admin-chart-renewal) 65%, transparent);
  --color-chart-renewal-hover: color-mix(in srgb, var(--color-admin-chart-renewal) 75%, transparent);
  --color-chart-rub: var(--color-admin-chart-rub);
  --color-chart-rub-fill: color-mix(in srgb, var(--color-admin-chart-rub) 65%, transparent);
  --color-chart-danger: var(--color-admin-chart-crypto);
  --color-chart-danger-fill: color-mix(in srgb, var(--color-admin-chart-crypto) 65%, transparent);
  --color-chart-site: var(--color-admin-chart-site);
  --color-chart-site-fill: color-mix(in srgb, var(--color-admin-chart-site) 65%, transparent);
  --color-chart-bot: var(--color-admin-chart-bot);
  --color-chart-bot-fill: color-mix(in srgb, var(--color-admin-chart-bot) 65%, transparent);
  --color-chart-other-method: var(--color-admin-chart-other-method);
  --color-chart-other-method-fill: color-mix(in srgb, var(--color-admin-chart-other-method) 65%, transparent);
  --color-chart-other-source: var(--color-admin-chart-other-source);
  --color-chart-other-source-fill: color-mix(in srgb, var(--color-admin-chart-other-source) 65%, transparent);
  --color-chart-boost: var(--color-admin-chart-boost);
  --color-chart-boost-fill: color-mix(in srgb, var(--color-admin-chart-boost) 65%, transparent);
  --color-chart-server-1: var(--color-admin-chart-server-1);
  --color-chart-server-2: var(--color-admin-chart-server-2);
  --color-chart-server-3: var(--color-admin-chart-server-3);
  --color-chart-server-4: var(--color-admin-chart-server-4);
  --color-chart-server-5: var(--color-admin-chart-server-5);
  --color-chart-server-6: var(--color-admin-chart-server-6);
  --admin-ui-bg: var(--color-admin-bg);
  --admin-ui-surface: var(--color-admin-surface);
  --admin-ui-surface-muted: var(--color-admin-surface-muted);
  --admin-ui-surface-raised: var(--color-admin-surface-raised);
  --admin-ui-control: var(--color-admin-control);
  --admin-ui-control-hover: var(--color-admin-control-hover);
  --admin-ui-border: var(--color-admin-border);
  --admin-ui-border-hover: var(--color-admin-border-hover);
  --admin-support-divider: var(--color-admin-divider);
}

body.support-surface {
  --support-layout-bg: var(--color-page);
  --support-sidebar-surface: var(--color-surface);
  --support-sidebar-control: var(--color-control);
  --support-sidebar-control-hover: var(--color-surface-raised);
  --support-layout-border: var(--color-border);
}

/* Semantic color utilities used by server-rendered templates. */
.text-primary { color: var(--color-text-primary) !important; }
.text-primary-90 { color: var(--color-tint-text-emphasis) !important; }
.text-primary-80 { color: var(--color-tint-text-strong) !important; }
.text-soft { color: var(--color-text-soft) !important; }
.text-secondary-strong { color: var(--color-text-secondary-strong) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-subtle { color: var(--color-text-subtle) !important; }
.text-inverse { color: var(--color-text-inverse) !important; }
.text-accent { color: var(--color-text-accent-soft) !important; }
.text-info-muted { color: var(--color-tint-text) !important; }
.text-danger { color: var(--color-danger-text) !important; }
.text-danger-strong { color: var(--color-danger-text-active) !important; }
.text-success { color: var(--color-success-text) !important; }
.text-success-strong { color: var(--color-success-text-soft) !important; }
.text-warning { color: var(--color-warning-text) !important; }
.text-product-world { color: var(--color-product-world) !important; }
.text-product-boost { color: var(--color-product-boost) !important; }
.text-product-good { color: var(--color-product-good) !important; }

.tariff-label--default { color: var(--color-text-secondary-strong); }
.tariff-label--world { color: var(--color-product-world); }
.tariff-label--boost { color: var(--color-product-boost); }
.expiry-hint--unknown { color: var(--color-text-subtle); }
.expiry-hint--expired,
.expiry-hint--danger { color: var(--color-status-expired-text); }
.expiry-hint--warning { color: var(--color-product-world); }
.expiry-hint--good { color: var(--color-product-good); }
[data-renew-selected-period].is-populated { color: var(--color-text-primary) !important; }

.hover-text-primary:hover,
.group:hover .group-hover-text-primary { color: var(--color-text-primary) !important; }
.hover-text-accent:hover { color: var(--color-text-accent-soft) !important; }

.bg-page { background-color: var(--color-page) !important; }
.bg-page-overlay { background-color: var(--color-page-overlay) !important; }
.bg-surface-deep { background-color: var(--color-surface-deepest) !important; }
.bg-surface { background-color: var(--color-surface) !important; }
.bg-control { background-color: var(--color-control) !important; }
.bg-control-hover { background-color: var(--color-control-hover) !important; }
.bg-avatar { background-color: var(--color-avatar) !important; }
.bg-overlay { background-color: var(--color-backdrop-strong) !important; }
.bg-overlay-soft { background-color: var(--color-page-overlay-soft) !important; }
.bg-tint { background-color: var(--color-tint) !important; }
.bg-tint-faint { background-color: var(--color-tint-faint) !important; }
.bg-tint-focus { background-color: var(--color-tint-focus) !important; }
.bg-tint-control { background-color: var(--color-tint-control) !important; }
.bg-danger-soft { background-color: var(--color-danger-surface) !important; }
.bg-success-soft { background-color: var(--color-success-surface) !important; }
.bg-warning-soft { background-color: var(--color-warning-surface) !important; }
.bg-action { background-color: var(--color-action) !important; }
.bg-period { background-color: var(--color-surface-low) !important; }
.bg-period-selected { background-color: var(--color-surface-selected) !important; }
.bg-code { background-color: var(--color-control-hover) !important; }

.hover-bg-surface:hover { background-color: var(--color-surface) !important; }
.hover-bg-surface-raised:hover { background-color: var(--color-surface-raised) !important; }
.hover-bg-control:hover { background-color: var(--color-control) !important; }
.hover-bg-tint:hover { background-color: var(--color-tint) !important; }
.hover-bg-tint-faint:hover { background-color: var(--color-tint-faint) !important; }
.hover-bg-tint-control:hover { background-color: var(--color-tint-control) !important; }
.hover-bg-tint-strong:hover { background-color: var(--color-tint-active) !important; }
.hover-bg-action:hover { background-color: var(--color-action-hover) !important; }
.hover-bg-period:hover { background-color: var(--color-surface) !important; }

.border-default { border-color: var(--color-border-strong) !important; }
.border-selected { border-color: var(--color-border-selected) !important; }
.border-danger { border-color: var(--color-danger-border) !important; }
.border-success { border-color: var(--color-success-border) !important; }
.border-warning { border-color: var(--color-warning-border) !important; }
.border-light-soft { border-color: var(--color-border-white-strong) !important; }
.hover-border:hover { border-color: var(--color-border-hover) !important; }
.hover-border-selected:hover { border-color: var(--color-border-selected) !important; }
.focus-border-selected:focus { border-color: var(--color-border-selected) !important; }
.focus-outline { outline-color: var(--color-focus) !important; }
.focus-outline-soft { outline-color: var(--color-border-white-selected) !important; }

.placeholder-subtle::placeholder { color: var(--color-text-subtle) !important; }

.gradient-from-overlay {
  --tw-gradient-from: var(--color-gradient-strong) var(--tw-gradient-from-position);
  --tw-gradient-to: var(--color-transparent) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.gradient-via-overlay {
  --tw-gradient-to: var(--color-transparent) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--color-gradient-middle) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.period-option {
  background-color: var(--color-surface-low) !important;
  border-color: var(--color-border) !important;
}

.period-option.is-selected {
  background-color: var(--color-surface-selected) !important;
  border-color: var(--color-border-selected) !important;
}

.period-option:not(.is-selected):hover {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border-hover) !important;
}

.buy-tariff-card {
  border-color: var(--color-border-white-strong) !important;
  filter: grayscale(1);
  opacity: 0.8;
}

.buy-tariff-card:hover,
.buy-tariff-card.is-selected {
  border-color: var(--color-border-selected) !important;
  filter: grayscale(0);
  opacity: 1;
}

.buy-period-card {
  border-color: var(--color-border) !important;
  background-color: var(--color-surface-low) !important;
}

.buy-period-card:not(:disabled):not(.is-selected):hover {
  border-color: var(--color-border-hover) !important;
  background-color: var(--color-surface) !important;
}

.buy-period-card.is-selected {
  border-color: var(--color-border-selected) !important;
  background-color: var(--color-surface-selected) !important;
}

.support-message-bubble--outgoing {
  background-color: var(--color-message-outgoing) !important;
  color: var(--color-text-primary) !important;
}

.support-message-bubble--incoming {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.mobile-buy-summary-shadow {
  --tw-shadow: 0 -18px 50px var(--color-shadow-bottom);
  --tw-shadow-colored: 0 -18px 50px var(--color-shadow-bottom);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 var(--color-transparent)),
    var(--tw-ring-shadow, 0 0 var(--color-transparent)),
    var(--tw-shadow);
}