:root {
  /* Скругления: Apple-like continuous corner scale */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --radius-control-sm: var(--radius-xs);
  --radius-control: var(--radius-sm);
  --radius-control-lg: var(--radius-md);
  --radius-popover: var(--radius-md);
  --radius-tooltip: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-lg);
  --radius-modal: var(--radius-xl);

  /* Модалки */
  --modal-padding: 24px;
  --modal-shadow: 0 18px 36px rgba(8, 15, 32, 0.12);
  --modal-title-size: 24px;
  --modal-title-color: var(--color-text-secondary);
  /* Единое затемнение подложки (как у .modal_common / подтверждение удаления) */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.28);
  --modal-backdrop-filter: brightness(0.97);

  --color-bg-page: #eff0f5;
  --color-bg-panel: #ffffff;
  --color-bg-panel-alt: #f5f6fa;
  --color-bg-elevated: #e9ebf1;
  --color-bg-muted: #f0f1f5;
  --color-bg-subtle: #fafafc;

  --black: #1b1b1d;
  --black-light: #2f2f34;
  --gray-light: var(--color-border-soft);

  --color-border-soft: #d9dce4;
  --color-border-muted: #8f949e;
  --color-border: #bdc2cb;
  --color-border-strong: #aeb6c1;
  --color-border-input: #cdd1da;
  /* Подписи к полям, чекбоксы в модалках и т.п. (раньше var был не задан — border пропадал) */
  --color-border-light: var(--color-border-input);

  --color-overlay-strong: rgba(255, 255, 255, 0.66);

  --color-text-primary: #1b1b1d;
  --color-text-secondary: #292a30;
  --color-text-tertiary: #50545d;
  --color-text-muted: #68707b;
  --color-text-inverse: #ffffff;

  --color-primary-50: #e8f2ff;
  --color-primary-100: #e0efff;
  --color-primary-200: #63a6ff;
  --color-primary-300: #4a94ff;
  --color-primary-400: #3a84fe;
  --color-primary-500: #007aff;
  --color-primary-600: #005ecb;
  --color-primary-700: #004a99;
  --color-primary-800: #036ba6;
  --color-primary-900: #0056b3;
  --color-primary-contrast: #ffffff;

  --color-primary-disabled: #3c7fd7;
  --color-primary-transparent: rgba(74, 148, 255, 0.05);
  --color-primary-soft: rgba(74, 148, 255, 0.1);

  /* Mobile UI system */
  --mobile-ui-page-bg: var(--color-bg-page);
  --mobile-ui-surface: var(--color-bg-panel);
  --mobile-ui-surface-muted: var(--color-bg-panel-alt);
  --mobile-ui-text: var(--color-text-primary);
  --mobile-ui-text-secondary: var(--color-text-muted);
  --mobile-ui-border: var(--color-border-soft);
  --mobile-ui-active: var(--color-primary-400);
  --mobile-ui-active-bg: var(--color-primary-soft);
  --mobile-ui-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
  --mobile-radius-card: 12px;
  --mobile-radius-control: var(--radius-control);
  --mobile-space-8: 8px;
  --mobile-space-12: 12px;
  --mobile-space-16: 16px;
  --mobile-space-20: 20px;
  --mobile-space-24: 24px;
  --mobile-font-title: 18px;
  --mobile-font-subtitle: 15px;
  --mobile-font-body: 14px;
  --mobile-font-caption: 12px;
  --mobile-font-button: 13px;
  --mobile-form-font-size: 16px;
  --mobile-line-title: 1.25;
  --mobile-line-body: 1.35;
  --mobile-control-height: 40px;
  --mobile-action-bar-height: 62px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-content-bottom: calc(
    var(--mobile-action-bar-height) + var(--mobile-space-24) + var(--mobile-space-8) + var(--mobile-safe-bottom)
  );

  --color-input-disabled: #f4f4f6;

  --color-success: #12b886;
  --color-success-soft: rgba(18, 184, 134, 0.1);

  --color-error: #d90429;
  --color-error-hover: #ef1525;
  --color-error-soft: #ffe4e6;

  --color-warning: #ff7a5c;

  --color-info-bg-notification: #e6f4ff;
  --color-info-notification: #0b5ed7;

  --color-success-bg-notification: #d9fbe8;
  --color-success-notification: #146c43;

  --color-warning-bg-notification: #fff4e5;
  --color-warning-notification: #b45309;

  --color-error-bg-notification: #ffe4e6;
  --color-error-notification: #9f1239;

  --primary: var(--color-primary-300);
  --primary-disabled: var(--color-primary-disabled);
  --primary-transparent: var(--color-primary-transparent);
  --primary-bg-hover: var(--color-bg-muted);
  --primary-active: var(--color-primary-400);
  --primary-hover: var(--color-primary-100);
  --text-primary: var(--color-primary-400);
  --text-gray: var(--color-text-muted);
  --option-bg-hover: var(--color-bg-muted);
  --white: var(--color-bg-panel);
  --border: var(--color-border);
  --bg-table-wrapper: var(--color-bg-panel-alt);
  --table-title: var(--color-text-tertiary);
  --apple-gray-light: var(--color-bg-page);
  --apple-border: var(--color-border);
  --apple-text: var(--color-text-primary);
  --apple-blue: var(--color-primary-500);
  --apple-blue-light: var(--color-primary-100);
  --apple-blue-hover: var(--color-primary-600);
  --error: var(--color-error);
  --error-hover: var(--color-error-hover);
  --error-transparent: var(--color-error-soft);
  --selected-option: var(--color-primary-soft);
  --input-disabled: var(--color-input-disabled);
  --success: var(--color-success);
  --success-transparent: var(--color-success-soft);
}

:root[data-theme='classic'] {
  /* Значения совпадают с базовыми и оставлены для наглядности */
}

/* Dark theme: deep base, crimson / pink accent (contrast-tuned borders & text) */
:root[data-theme='midnight'] {
  --color-bg-page: #0a0910;
  --color-bg-panel: #15131d;
  --color-bg-panel-alt: #1b1926;
  --color-bg-elevated: #232030;
  --color-bg-muted: #2b2839;
  --color-bg-subtle: #14121c;

  --color-overlay-strong: rgba(11, 10, 16, 0.9);

  --color-text-primary: #f4f2f8;
  --color-text-secondary: #d6d2df;
  --color-text-tertiary: #c2bcd0;
  --color-text-muted: #aaa2ba;
  --color-text-inverse: #0b0a10;

  --black: var(--color-text-primary);
  --black-light: var(--color-text-secondary);

  --color-border-soft: rgba(255, 255, 255, 0.16);
  --color-border-muted: rgba(255, 255, 255, 0.2);
  --color-border: rgba(255, 255, 255, 0.17);
  --color-border-strong: rgba(255, 255, 255, 0.26);
  --color-border-input: rgba(255, 255, 255, 0.22);

  --color-primary-50: rgba(255, 77, 109, 0.14);
  --color-primary-100: rgba(255, 77, 109, 0.22);
  --color-primary-200: #e84862;
  --color-primary-300: #ff4d6d;
  --color-primary-400: #e63656;
  --color-primary-500: #c41e3a;
  --color-primary-600: #a01830;
  --color-primary-700: #8a1529;
  --color-primary-800: #741322;
  --color-primary-900: #5e101b;
  --color-primary-contrast: #ffffff;

  --color-primary-disabled: #6b1420;
  --color-primary-transparent: rgba(255, 77, 109, 0.12);
  --color-primary-soft: rgba(255, 77, 109, 0.18);
  --mobile-ui-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);

  --color-input-disabled: #12101a;

  --color-success: #2fa97f;
  --color-success-soft: rgba(47, 169, 127, 0.22);

  --color-error: #ff4d6d;
  --color-error-hover: #ff6b85;
  --color-error-soft: rgba(255, 77, 109, 0.22);

  --color-warning: #e0b35a;

  --modal-backdrop-bg: rgba(0, 0, 0, 0.82);
  --modal-backdrop-filter: brightness(0.65) blur(4px);
}

:root[data-theme='midnight'] .modal-content,
:root[data-theme='midnight'] #modalContent,
:root[data-theme='midnight'] .modal-container,
:root[data-theme='midnight'] .modal_settings .modal-container,
:root[data-theme='midnight'] .input-modal__box {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}

:root[data-theme='midnight'] .project-switcher-modal__box {
  background-color: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}

:root[data-theme='midnight'] .project-switcher-modal__box .auth-title {
  color: var(--color-text-primary);
}

:root[data-theme='midnight'] .project-switcher-modal__box .muted {
  color: var(--color-text-muted);
}

:root[data-theme='midnight'] .project-switcher-modal__box .project-option-row,
:root[data-theme='midnight'] .project-switcher-modal__box .project-option {
  background: transparent;
}

:root[data-theme='midnight'] .project-switcher-modal__box .project-option:hover,
:root[data-theme='midnight'] .project-switcher-modal__box .project-option:focus-visible {
  color: var(--color-primary-300);
  background: transparent;
}
:root[data-theme='midnight'] .project-switcher-modal__box .project-option:hover .project-id,
:root[data-theme='midnight'] .project-switcher-modal__box .project-option:focus-visible .project-id {
  color: inherit;
}

:root[data-theme='midnight'] .project-switcher-modal__box .project-id.mono {
  color: var(--color-text-muted);
}

:root[data-theme='midnight'] .project-switcher-modal__box .projects-actions__create {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

:root[data-theme='midnight'] .project-switcher-modal__box .projects-actions__create:hover:not(:disabled) {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
}