/* Токены мобильного CA Tasker.

   Акцент выделяет действия, семь цветов состояний соответствуют серверному tone.
   Явная тема задаётся data-theme на <html>, системная — prefers-color-scheme.
   Значения есть в обоих вариантах, чтобы ручной выбор работал для любой темы.
*/

:root {
  color-scheme: light;

  /* Фоны страницы, карточки и приподнятого блока внутри неё. */
  --ground: #f1f3f7;
  /* Два слабых пятна света на фоне отделяют карточки от страницы.
  */
  --ground-glow-1: rgba(44, 95, 246, 0.07);
  --ground-glow-2: rgba(18, 145, 92, 0.05);
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --surface-3: #edf0f5;
  --surface-sunken: #e9ecf2;
  --overlay: rgba(14, 17, 24, 0.46);
  /* Тонкая светлая кромка сверху карточки; в тёмной теме — слабая белая линия.
  */
  --sheen: rgba(255, 255, 255, 0.9);

  /* Цвета основного текста, пояснений и служебных подписей. */
  --ink: #14171d;
  --ink-2: #59616f;
  --ink-3: #858d9c;
  --ink-on-accent: #ffffff;

  --line: #e4e7ec;
  --line-strong: #cdd3dc;

  --accent: #2b5cf0;
  --accent-2: #4c7cff;
  --accent-press: #1f47c4;
  --accent-soft: #e9effe;
  --accent-ring: rgba(43, 92, 240, 0.18);

/* Палитра проверена scripts/validate_palette.js из набора dataviz
   и расчётом WCAG. Текст на подложке имеет контраст 4.5:1,
   цвет точки или полосы на поверхности — 3:1 в обеих темах.

   При дейтеранопии «Срок завтра» и «На закрытии» близки по цвету,
   поэтому рядом с цветом всегда показываем название состояния.
*/

  /* Для каждого состояния задаём фон, текст на нём и цвет точки, полосы или графика.
  */
  --tone-overdue: #c9291d;
  --tone-overdue-bg: #fdeceb;
  --tone-overdue-pure: #cf2f22;

  --tone-today: #8a4204;
  --tone-today-bg: #fdf0da;
  --tone-today-pure: #b86206;

  --tone-tomorrow: #1451b8;
  --tone-tomorrow-bg: #e6eefb;
  --tone-tomorrow-pure: #2b74e0;

  --tone-pending: #5b3bb0;
  --tone-pending-bg: #eee9fb;
  --tone-pending-pure: #9333d6;

  --tone-waiting: #0b6a7d;
  --tone-waiting-bg: #e0f2f5;
  --tone-waiting-pure: #0e8aa3;

  --tone-done: #05683f;
  --tone-done-bg: #e3f5ec;
  --tone-done-pure: #12915c;

  --tone-neutral: #59616f;
  --tone-neutral-bg: #eef0f3;
  --tone-neutral-pure: #8a92a1;

  /* Снимок передаёт имена цветов ярлыков, а не сами цветовые значения. */
  --tag-blue: #1451b8;    --tag-blue-bg: #e6eefb;
  --tag-cyan: #0b6a7d;    --tag-cyan-bg: #e0f2f5;
  --tag-green: #05683f;   --tag-green-bg: #e3f5ec;
  --tag-emerald: #05683f; --tag-emerald-bg: #e3f5ec;
  --tag-orange: #9a4a06;  --tag-orange-bg: #fdf0da;
  --tag-amber: #8a4b04;   --tag-amber-bg: #fdf3d6;
  --tag-red: #c9291d;     --tag-red-bg: #fdeceb;
  --tag-rose: #b32456;    --tag-rose-bg: #fdeaf0;
  --tag-violet: #5b3bb0;  --tag-violet-bg: #eee9fb;
  --tag-purple: #5b3bb0;  --tag-purple-bg: #eee9fb;
  --tag-indigo: #35399b;  --tag-indigo-bg: #e8e9fa;
  --tag-gray: #4d5563;    --tag-gray-bg: #eef0f3;

  /* Используем системный шрифт, чтобы не загружать файлы из сети.
  */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 27px;
  --text-3xl: 36px;
  /* Главный показатель делаем заметно крупнее второстепенных чисел.
  */
  --text-display: clamp(44px, 13vw, 60px);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;

  /* Минимальный размер области касания — 44px. */
  --tap: 44px;
  --header-h: 52px;
  --tabbar-h: 58px;
  --rail-w: 248px;
  --content-max: 720px;
  --content-max-wide: 1180px;

  /* Короткая тень выделяет кромку, длинная отделяет карточку от фона.
  */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px -12px rgba(16, 24, 40, 0.14);
  --shadow-raised: 0 2px 4px rgba(16, 24, 40, 0.06), 0 16px 40px -16px rgba(16, 24, 40, 0.22);
  --shadow-sheet: 0 -8px 48px rgba(12, 16, 24, 0.2);
  --shadow-pop: 0 10px 34px -8px rgba(12, 16, 24, 0.28);
  --shadow-row: var(--shadow-card);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  /* При появлении добавляем небольшой выход за конечную позицию.
  */
  --ease-spring: cubic-bezier(0.18, 0.9, 0.26, 1.08);
  --fast: 130ms;
  --slow: 260ms;

  /* Отступы под вырез экрана и нижний индикатор жестов. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Тёмная тема переопределяет те же переменные, что и светлая.
   Новые роли цвета только здесь не добавляем.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ground: #0c0e12;
    --ground-glow-1: rgba(88, 128, 255, 0.10);
    --ground-glow-2: rgba(35, 167, 109, 0.07);
    --surface: #16191f;
    --surface-2: #1c2028;
    --surface-3: #232833;
    --surface-sunken: #101319;
    --overlay: rgba(0, 0, 0, 0.66);
    --sheen: rgba(255, 255, 255, 0.06);

    --ink: #e8eaf0;
    --ink-2: #a2aab8;
    --ink-3: #737c8b;
    --ink-on-accent: #0d0f13;

    --line: #262b34;
    --line-strong: #363d48;

    --accent: #7aa2ff;
    --accent-2: #9dbaff;
    --accent-press: #9dbaff;
    --accent-soft: #18233d;
    --accent-ring: rgba(122, 162, 255, 0.22);

    --tone-overdue: #ff8178;
    --tone-overdue-bg: #33191a;
    --tone-overdue-pure: #f2564a;

    --tone-today: #f2b45c;
    --tone-today-bg: #33260f;
    --tone-today-pure: #e69412;

    --tone-tomorrow: #8ab4ff;
    --tone-tomorrow-bg: #17233d;
    --tone-tomorrow-pure: #4a86ef;

    --tone-pending: #bda6ff;
    --tone-pending-bg: #241d3d;
    --tone-pending-pure: #a97ef7;

    --tone-waiting: #57cde3;
    --tone-waiting-bg: #102b31;
    --tone-waiting-pure: #21b0cc;

    --tone-done: #63d69c;
    --tone-done-bg: #102a20;
    --tone-done-pure: #23a76d;

    --tone-neutral: #a2aab8;
    --tone-neutral-bg: #21262e;
    --tone-neutral-pure: #79818f;

    --tag-blue: #8ab4ff;    --tag-blue-bg: #17233d;
    --tag-cyan: #57cde3;    --tag-cyan-bg: #102b31;
    --tag-green: #63d69c;   --tag-green-bg: #102a20;
    --tag-emerald: #63d69c; --tag-emerald-bg: #102a20;
    --tag-orange: #f2b45c;  --tag-orange-bg: #33260f;
    --tag-amber: #efc063;   --tag-amber-bg: #322a10;
    --tag-red: #ff8178;     --tag-red-bg: #33191a;
    --tag-rose: #ff8fb0;    --tag-rose-bg: #331a24;
    --tag-violet: #bda6ff;  --tag-violet-bg: #241d3d;
    --tag-purple: #bda6ff;  --tag-purple-bg: #241d3d;
    --tag-indigo: #a3a8ff;  --tag-indigo-bg: #1d1f3d;
    --tag-gray: #a2aab8;    --tag-gray-bg: #21262e;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -14px rgba(0, 0, 0, 0.8);
    --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.55), 0 18px 44px -18px rgba(0, 0, 0, 0.9);
    --shadow-sheet: 0 -8px 48px rgba(0, 0, 0, 0.66);
    --shadow-pop: 0 10px 34px -8px rgba(0, 0, 0, 0.7);
    --shadow-row: var(--shadow-card);
  }
}

/* Явно выбранная тема имеет приоритет над системной. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ground: #0c0e12;
  --ground-glow-1: rgba(88, 128, 255, 0.10);
  --ground-glow-2: rgba(35, 167, 109, 0.07);
  --surface: #16191f;
  --surface-2: #1c2028;
  --surface-3: #232833;
  --surface-sunken: #101319;
  --overlay: rgba(0, 0, 0, 0.66);
  --sheen: rgba(255, 255, 255, 0.06);

  --ink: #e8eaf0;
  --ink-2: #a2aab8;
  --ink-3: #737c8b;
  --ink-on-accent: #0d0f13;

  --line: #262b34;
  --line-strong: #363d48;

  --accent: #7aa2ff;
  --accent-2: #9dbaff;
  --accent-press: #9dbaff;
  --accent-soft: #18233d;
  --accent-ring: rgba(122, 162, 255, 0.22);

  --tone-overdue: #ff8178;
  --tone-overdue-bg: #33191a;
  --tone-overdue-pure: #f2564a;

  --tone-today: #f2b45c;
  --tone-today-bg: #33260f;
  --tone-today-pure: #e69412;

  --tone-tomorrow: #8ab4ff;
  --tone-tomorrow-bg: #17233d;
  --tone-tomorrow-pure: #4a86ef;

  --tone-pending: #bda6ff;
  --tone-pending-bg: #241d3d;
  --tone-pending-pure: #a97ef7;

  --tone-waiting: #57cde3;
  --tone-waiting-bg: #102b31;
  --tone-waiting-pure: #21b0cc;

  --tone-done: #63d69c;
  --tone-done-bg: #102a20;
  --tone-done-pure: #23a76d;

  --tone-neutral: #a2aab8;
  --tone-neutral-bg: #21262e;
  --tone-neutral-pure: #79818f;

  --tag-blue: #8ab4ff;    --tag-blue-bg: #17233d;
  --tag-cyan: #57cde3;    --tag-cyan-bg: #102b31;
  --tag-green: #63d69c;   --tag-green-bg: #102a20;
  --tag-emerald: #63d69c; --tag-emerald-bg: #102a20;
  --tag-orange: #f2b45c;  --tag-orange-bg: #33260f;
  --tag-amber: #efc063;   --tag-amber-bg: #322a10;
  --tag-red: #ff8178;     --tag-red-bg: #33191a;
  --tag-rose: #ff8fb0;    --tag-rose-bg: #331a24;
  --tag-violet: #bda6ff;  --tag-violet-bg: #241d3d;
  --tag-purple: #bda6ff;  --tag-purple-bg: #241d3d;
  --tag-indigo: #a3a8ff;  --tag-indigo-bg: #1d1f3d;
  --tag-gray: #a2aab8;    --tag-gray-bg: #21262e;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -14px rgba(0, 0, 0, 0.8);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.55), 0 18px 44px -18px rgba(0, 0, 0, 0.9);
  --shadow-sheet: 0 -8px 48px rgba(0, 0, 0, 0.66);
  --shadow-pop: 0 10px 34px -8px rgba(0, 0, 0, 0.7);
  --shadow-row: var(--shadow-card);
}