:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-app: 27 27 27;
  --color-surface: 42 59 65;
  --color-surface-2: 46 80 92;
  --color-elevated: 19 19 20;
  --color-border-subtle: 0 165 219;
  --color-text-strong: 225 225 225;
  --color-text-muted: 169 195 204;
  --color-text-accent: 0 165 219;
  --color-bg-accent: 0 165 219;
  --color-bg-accent-soft: 0 165 219;
  --color-bg-highlight: 217 250 90;
  --color-text-highlight-strong: 31 42 23;
  --color-ring-accent: 0 165 219;
  --color-overlay: 10 18 21;
  --color-modal: 30 31 32;
  --color-modal-bg: 31 31 32;
  --color-modal-overlay: 0 0 0;
  --color-task-list-overlay: 0 0 0;
  --color-app-bg: 27 27 27;
  --color-task-list-bg: 19 19 20;
  --color-task-list-border: 19 19 20;
  --color-task-item-bg: 30 31 32;
  --color-panel-bg: 59 59 59;
  --color-menu-bg: 40 42 44;
  --color-user-menu-hover: 51 53 55;
  --color-input-bg: 51 53 55;
  --color-action-primary-bg: 0 74 119;
  --color-action-primary-text: 194 231 255;
  --color-quick-create-bg: 55 57 59;
  --color-quick-create-text: 227 227 227;
  --color-priority-important: 217 250 90;
  --color-task-list-action: 168 199 250;
  --color-feedback-error-bg: 58 31 36;
  --color-feedback-error-border: 122 49 64;
  --color-feedback-error-text: 243 199 207;
  --color-feedback-success-bg: 28 55 45;
  --color-feedback-success-border: 54 94 78;
  --color-feedback-success-text: 193 242 221;
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-app: 248 250 253;
  --color-surface: 255 255 255;
  --color-surface-2: 232 244 248;
  --color-elevated: 255 255 255;
  --color-border-subtle: 46 80 92;
  --color-text-strong: 34 47 51;
  --color-text-muted: 78 106 116;
  --color-text-accent: 0 126 169;
  --color-bg-accent: 0 165 219;
  --color-bg-accent-soft: 0 165 219;
  --color-bg-highlight: 217 250 90;
  --color-text-highlight-strong: 43 53 16;
  --color-ring-accent: 0 165 219;
  --color-overlay: 34 47 51;
  --color-modal: 255 255 255;
  --color-modal-bg: 240 244 249;
  --color-modal-overlay: 126 139 163;
  --color-task-list-overlay: 218 225 243;
  --color-app-bg: 248 250 253;
  --color-task-list-bg: 255 255 255;
  --color-task-list-border: 221 227 234;
  --color-task-item-bg: 240 244 249;
  --color-panel-bg: 221 227 234;
  --color-menu-bg: 233 238 246;
  --color-user-menu-hover: 218 225 243;
  --color-input-bg: 221 227 234;
  --color-action-primary-bg: 194 231 255;
  --color-action-primary-text: 31 31 31;
  --color-quick-create-bg: 194 231 255;
  --color-quick-create-text: 31 31 31;
  --color-priority-important: 225 29 72;
  --color-task-list-action: 11 87 209;
  --color-feedback-error-bg: 255 241 242;
  --color-feedback-error-border: 254 205 211;
  --color-feedback-error-text: 190 24 93;
  --color-feedback-success-bg: 236 253 245;
  --color-feedback-success-border: 167 243 208;
  --color-feedback-success-text: 4 120 87;
  --color-stat-highlight: 0 126 169;
}

:root,
:root[data-theme="dark"] {
  --color-stat-highlight: 217 250 90;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

::selection {
  background: rgb(var(--color-bg-accent) / 0.28);
  color: rgb(var(--color-text-strong));
}

.site-shell {
  background:
    radial-gradient(circle at top, rgb(var(--color-bg-accent) / 0.2), transparent 28%),
    linear-gradient(180deg, rgb(var(--color-app)) 0%, rgb(var(--color-surface)) 100%);
}

.site-grid {
  background-image:
    linear-gradient(rgb(var(--color-border-subtle) / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--color-border-subtle) / 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.7), transparent 90%);
}

.glass-panel {
  backdrop-filter: blur(18px);
}

.stat-highlight {
  color: rgb(var(--color-stat-highlight));
}

@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}