/* theme.css */
/* readability-tokens.css */
/* Shared nERP / nRSV readability contract. Keep both copies in sync.
   APCA is an additional design check; WCAG 2.2 AA remains mandatory.
   See docs/ui-readability.md for roles, thresholds and extension rules. */
:root {
  --ui-bg-page: #f3f5f9;
  --ui-bg-panel: #ffffff;
  --ui-bg-panel-alt: #eef2f7;
  --ui-bg-elevated: #e7edf5;
  --ui-text-primary: #18212f;
  --ui-text-secondary: #283649;
  --ui-text-muted: #384657;
  --ui-border-soft: #cbd5e1;
  --ui-border-control: #67788f;
  --ui-accent: #1646a0;
  --ui-accent-hover: #103779;
  --ui-link: #1646a0;
  --ui-on-accent: #ffffff;
  --ui-focus: #1646a0;
  --ui-selection: #e0ebff;
  --ui-disabled-bg: #e7edf5;
  --ui-disabled-text: #46566b;
  --ui-success-bg: #e3f5eb;
  --ui-success-text: #16432b;
  --ui-warning-bg: #fff1d5;
  --ui-warning-text: #56340b;
  --ui-danger-bg: #fde9ed;
  --ui-danger-text: #6a1731;
  --ui-info-bg: #e7f0ff;
  --ui-info-text: #163d79;
  /* Pastel booking/custom colour cards keep a dark, stable ink in either theme. */
  --ui-card-text: #18212f;
  --ui-card-muted: #283649;
  --ui-font-body: 1rem;
  --ui-font-control: 0.9375rem;
  --ui-font-caption: 0.9375rem;
  --ui-font-title: 1.5rem;
  --ui-line-body: 1.5;
  --ui-line-control: 1.4;
  --ui-weight-body: 400;
  --ui-weight-control: 600;
  --ui-control-height: 2.75rem;
  --ui-control-height-sm: 2.25rem;
  --ui-focus-width: 3px;
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-radius-control: 0.625rem;
  --ui-radius-card: 1.25rem;
}
:root[data-theme='midnight'],
:root[data-theme='dark'] {
  --ui-bg-page: #15191f;
  --ui-bg-panel: #1d232c;
  --ui-bg-panel-alt: #252d38;
  --ui-bg-elevated: #2b3441;
  --ui-text-primary: #f5f7fc;
  --ui-text-secondary: #e8eef8;
  --ui-text-muted: #d6dde8;
  --ui-border-soft: #4a586b;
  --ui-border-control: #9aaec7;
  --ui-accent: #1646a0;
  --ui-accent-hover: #103779;
  --ui-link: #c6ddff;
  --ui-focus: #b8d8ff;
  --ui-selection: #1d2c42;
  --ui-disabled-bg: #2b3441;
  --ui-disabled-text: #c6cfdd;
  --ui-success-bg: #183426;
  --ui-success-text: #ddf8e9;
  --ui-warning-bg: #3d301a;
  --ui-warning-text: #fff0d0;
  --ui-danger-bg: #42232d;
  --ui-danger-text: #ffe9ef;
  --ui-info-bg: #20334e;
  --ui-info-text: #e1eeff;
}
:root[data-readability='comfortable'] {
  font-size: 112.5%;
  --ui-control-height: 3rem;
  --ui-control-height-sm: 2.75rem;
  --ui-border-soft: var(--ui-border-control);
}
@media (forced-colors: active) {
  :focus-visible { outline: var(--ui-focus-width) solid Highlight !important; }
  :where(button, input, select, textarea) { forced-color-adjust: auto; }
}


: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(--ui-radius-control);
  --radius-control-lg: var(--radius-md);
  --radius-popover: var(--radius-md);
  --radius-tooltip: var(--radius-sm);
  --radius-card: var(--ui-radius-card);
  --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: var(--ui-bg-page);
  --color-bg-panel: var(--ui-bg-panel);
  --color-bg-panel-alt: var(--ui-bg-panel-alt);
  --color-bg-elevated: var(--ui-bg-elevated);
  --color-bg-muted: var(--ui-bg-panel-alt);
  --color-bg-subtle: var(--ui-bg-panel);

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

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

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

  --color-text-primary: var(--ui-text-primary);
  --color-text-secondary: var(--ui-text-secondary);
  --color-text-tertiary: var(--ui-text-muted);
  --color-text-muted: var(--ui-text-muted);
  --color-text-inverse: #ffffff;

  --color-primary-50: #e8f2ff;
  --color-primary-100: #e0efff;
  --color-primary-200: var(--ui-accent);
  --color-primary-300: var(--ui-accent);
  --color-primary-400: var(--ui-accent);
  --color-primary-500: var(--ui-accent);
  --color-primary-600: var(--ui-accent-hover);
  --color-primary-700: var(--ui-accent-hover);
  --color-primary-800: var(--ui-accent-hover);
  --color-primary-900: var(--ui-accent-hover);
  --color-primary-contrast: var(--ui-on-accent);

  --color-primary-disabled: var(--ui-disabled-bg);
  --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(--ui-link);
  --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: var(--ui-font-body);
  --mobile-font-caption: var(--ui-font-caption);
  --mobile-font-button: var(--ui-font-control);
  --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: var(--ui-disabled-bg);

  --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: var(--ui-info-bg);
  --color-info-notification: var(--ui-info-text);

  --color-success-bg-notification: var(--ui-success-bg);
  --color-success-notification: var(--ui-success-text);

  --color-warning-bg-notification: var(--ui-warning-bg);
  --color-warning-notification: var(--ui-warning-text);

  --color-error-bg-notification: var(--ui-danger-bg);
  --color-error-notification: var(--ui-danger-text);

  --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(--ui-link);
  --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'] {
  /* Значения совпадают с базовыми и оставлены для наглядности */
}

/* Graphite theme; the theme id stays compatible with saved preferences. */
:root[data-theme='midnight'] {
  --color-bg-page: var(--ui-bg-page);
  --color-bg-panel: var(--ui-bg-panel);
  --color-bg-panel-alt: var(--ui-bg-panel-alt);
  --color-bg-elevated: var(--ui-bg-elevated);
  --color-bg-muted: var(--ui-bg-panel-alt);
  --color-bg-subtle: var(--ui-bg-panel);

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

  --color-text-primary: var(--ui-text-primary);
  --color-text-secondary: var(--ui-text-secondary);
  --color-text-tertiary: var(--ui-text-muted);
  --color-text-muted: var(--ui-text-muted);
  --color-text-inverse: #0b0a10;

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

  --color-border-soft: var(--ui-border-soft);
  --color-border-muted: var(--ui-border-control);
  --color-border: var(--ui-border-control);
  --color-border-strong: var(--ui-border-control);
  --color-border-input: var(--ui-border-control);

  --color-primary-50: var(--ui-selection);
  --color-primary-100: var(--ui-selection);
  --color-primary-200: var(--ui-accent);
  --color-primary-300: var(--ui-accent);
  --color-primary-400: var(--ui-accent);
  --color-primary-500: var(--ui-accent);
  --color-primary-600: var(--ui-accent-hover);
  --color-primary-700: var(--ui-accent-hover);
  --color-primary-800: var(--ui-accent-hover);
  --color-primary-900: var(--ui-accent-hover);
  --color-primary-contrast: var(--ui-on-accent);

  --color-primary-disabled: var(--ui-disabled-bg);
  --color-primary-transparent: var(--ui-selection);
  --color-primary-soft: var(--ui-selection);
  --mobile-ui-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);

  --color-input-disabled: var(--ui-disabled-bg);

  --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);
}