/* Токены в духе @maxhub/max-ui (lightPalette / darkPalette) */

:root,
html[data-theme='light'] {
  color-scheme: light;

  --app-bg: #ededf2;
  --app-surface: #ffffff;
  --app-surface-elevated: #f0f0f0;
  --app-card: #ffffff;
  --app-text: #0c0d0e;
  --app-text-secondary: rgb(12 13 14 / 0.52);
  --app-text-tertiary: rgb(12 13 14 / 0.4);
  --app-border: rgb(0 0 0 / 0.08);
  --app-input-bg: #f9f9f9;
  --app-input-border: #dddddd;
  --app-input-placeholder: rgb(12 13 14 / 0.4);
  --app-accent: #007aff;
  --app-accent-text: #ffffff;
  --app-status-warn-bg: #fff8e6;
  --app-status-warn-border: #ffe8a3;
  --app-status-warn-text: #666666;
  --app-status-loading-bg: #f0f0f0;
  --app-status-loading-border: #e0e0e0;
  --app-status-error-bg: #fff5f5;
  --app-status-error-border: #ffcdd2;
  --app-status-error-text: #b00020;
  --app-shadow: rgb(0 0 0 / 0.06);
  --app-footer-shadow: rgb(0 0 0 / 0.06);
}

html[data-theme='dark'] {
  color-scheme: dark;

  --app-bg: #17181c;
  --app-surface: #17181c;
  --app-surface-elevated: #1e1f24;
  --app-card: #25262d;
  --app-text: rgb(255 255 255 / 0.8);
  --app-text-secondary: rgb(255 255 255 / 0.44);
  --app-text-tertiary: rgb(255 255 255 / 0.28);
  --app-border: rgb(255 255 255 / 0.08);
  --app-input-bg: #25262d;
  --app-input-border: rgb(255 255 255 / 0.12);
  --app-input-placeholder: rgb(255 255 255 / 0.28);
  --app-accent: #007aff;
  --app-accent-text: #ffffff;
  --app-status-warn-bg: rgb(255 159 10 / 0.14);
  --app-status-warn-border: rgb(255 159 10 / 0.28);
  --app-status-warn-text: rgb(255 255 255 / 0.74);
  --app-status-loading-bg: #1e1f24;
  --app-status-loading-border: rgb(255 255 255 / 0.08);
  --app-status-loading-text: rgb(255 255 255 / 0.44);
  --app-status-error-bg: rgb(206 66 87 / 0.16);
  --app-status-error-border: rgb(206 66 87 / 0.35);
  --app-status-error-text: #ff5862;
  --app-shadow: rgb(0 0 0 / 0.28);
  --app-footer-shadow: rgb(0 0 0 / 0.42);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;

    --app-bg: #17181c;
    --app-surface: #17181c;
    --app-surface-elevated: #1e1f24;
    --app-card: #25262d;
    --app-text: rgb(255 255 255 / 0.8);
    --app-text-secondary: rgb(255 255 255 / 0.44);
    --app-text-tertiary: rgb(255 255 255 / 0.28);
    --app-border: rgb(255 255 255 / 0.08);
    --app-input-bg: #25262d;
    --app-input-border: rgb(255 255 255 / 0.12);
    --app-input-placeholder: rgb(255 255 255 / 0.28);
    --app-accent: #007aff;
    --app-accent-text: #ffffff;
    --app-status-warn-bg: rgb(255 159 10 / 0.14);
    --app-status-warn-border: rgb(255 159 10 / 0.28);
    --app-status-warn-text: rgb(255 255 255 / 0.74);
    --app-status-loading-bg: #1e1f24;
    --app-status-loading-border: rgb(255 255 255 / 0.08);
    --app-status-loading-text: rgb(255 255 255 / 0.44);
    --app-status-error-bg: rgb(206 66 87 / 0.16);
    --app-status-error-border: rgb(206 66 87 / 0.35);
    --app-status-error-text: #ff5862;
    --app-shadow: rgb(0 0 0 / 0.28);
    --app-footer-shadow: rgb(0 0 0 / 0.42);
  }
}