/*
 * Единственный источник цветов и размеров — как и в мобильном приложении.
 * Захардкоженный цвет в компоненте означает сломанную тёмную тему, поэтому
 * все значения живут здесь и берутся через var().
 *
 * Отличие от оригинала одно: акцент больше не розовый. В светлой теме он
 * чёрный, в тёмной — белый, и совпадает с цветом текста. Из этого следует,
 * что «сегодня» в календаре цветом уже не выделить: там, где раньше был
 * розовый, теперь тонкая обводка (см. .is-today).
 */

:root {
  /* Фон всего экрана */
  --bg: #d9dbde;
  /* Основная карточка поверх фона */
  --card: #f7f7f8;
  /* Вложенная карточка, чуть светлее основной */
  --card-alt: #fcfcfd;
  /* Фон полей ввода и невыделенных сегментов */
  --field: #ededef;

  --text: #101010;
  --text-muted: #7a7a7e;
  --text-faint: #a9a9af;
  --divider: #eaeaec;

  --accent: #101010;

  /* Активная пилюля: чёрная в светлой теме, белая в тёмной */
  --pill-bg: #111111;
  --pill-fg: #ffffff;
  /* Выбранный, но не активный элемент */
  --selected-bg: #ffffff;

  --danger: #d93036;
  --success: #1e9e62;
  --overlay: rgba(20, 20, 22, 0.35);
  /* Полупрозрачная подложка на акцентной поверхности (файлы в пузыре) */
  --on-pill: rgba(255, 255, 255, 0.14);

  /* Полупрозрачная заливка блоков задач в таймлайне */
  --block-bg: #ededef;
  --block-border: #dfdfe2;

  /* Палитра задач: в JS только имена (rose, sky…), значения — здесь */
  --task-rose: #c45b6a;
  --task-rose-wash: #f3dce0;
  --task-rose-ink: #7a3140;
  --task-amber: #c48a2a;
  --task-amber-wash: #f3e6c8;
  --task-amber-ink: #6d4a12;
  --task-lime: #6a9a32;
  --task-lime-wash: #e0edc8;
  --task-lime-ink: #3a5418;
  --task-teal: #2a8a7a;
  --task-teal-wash: #cfe8e3;
  --task-teal-ink: #1a4f46;
  --task-sky: #3a7ab8;
  --task-sky-wash: #d4e4f4;
  --task-sky-ink: #1e4568;
  --task-violet: #7a5aa8;
  --task-violet-wash: #e4daf2;
  --task-violet-ink: #44305e;
  --task-coral: #c46a48;
  --task-coral-wash: #f3ddd4;
  --task-coral-ink: #6e3a26;
  --task-stone: #6e6e74;
  --task-stone-wash: #e4e4e6;
  --task-stone-ink: #3a3a3e;

  /* Мягкая, почти незаметная тень — как на референсе */
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.1);

  --radius-card: 32px;
  --radius-panel: 24px;
  --radius-control: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 28px;

  --font-display: 26px;
  --font-title: 20px;
  --font-body: 16px;
  --font-label: 14px;
  --font-caption: 12px;
  --font-micro: 11px;

  /* Панель вкладок: высота дорожки + отступ снизу + зазор над ней.
     Иначе поле ввода в чате уезжает под кнопки «сегодня / чат / настройки». */
  --tab-bar-icon: 21px;
  --tab-bar-pad: 6px;
  --tab-bar-item-pad: 13px;
  --tab-bar-height: calc(var(--tab-bar-pad) * 2 + var(--tab-bar-item-pad) * 2 + var(--tab-bar-icon));
  --tab-bar-offset: max(env(safe-area-inset-bottom), var(--space-md));
  --tab-bar-space: calc(var(--tab-bar-height) + var(--tab-bar-offset) + var(--space-xl));
  --sidebar-width: 76px;
  --sidebar-width-wide: 196px;
  --content-max: 720px;
  --page-max: 840px;
  --hour-height: 64px;

  --duration-fast: 150ms;
  --duration-base: 240ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

/* Явная светлая тема: нужна, чтобы превью в настройках
   не наследовало цвета страницы, когда открыта ночь. */
[data-theme='light'] {
  --bg: #d9dbde;
  --card: #f7f7f8;
  --card-alt: #fcfcfd;
  --field: #ededef;
  --text: #101010;
  --text-muted: #7a7a7e;
  --text-faint: #a9a9af;
  --divider: #eaeaec;
  --accent: #101010;
  --pill-bg: #111111;
  --pill-fg: #ffffff;
  --selected-bg: #ffffff;
  --danger: #d93036;
  --success: #1e9e62;
  --overlay: rgba(20, 20, 22, 0.35);
  --on-pill: rgba(255, 255, 255, 0.14);
  --block-bg: #ededef;
  --block-border: #dfdfe2;
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.1);
  --task-rose: #c45b6a;
  --task-rose-wash: #f3dce0;
  --task-rose-ink: #7a3140;
  --task-amber: #c48a2a;
  --task-amber-wash: #f3e6c8;
  --task-amber-ink: #6d4a12;
  --task-lime: #6a9a32;
  --task-lime-wash: #e0edc8;
  --task-lime-ink: #3a5418;
  --task-teal: #2a8a7a;
  --task-teal-wash: #cfe8e3;
  --task-teal-ink: #1a4f46;
  --task-sky: #3a7ab8;
  --task-sky-wash: #d4e4f4;
  --task-sky-ink: #1e4568;
  --task-violet: #7a5aa8;
  --task-violet-wash: #e4daf2;
  --task-violet-ink: #44305e;
  --task-coral: #c46a48;
  --task-coral-wash: #f3ddd4;
  --task-coral-ink: #6e3a26;
  --task-stone: #6e6e74;
  --task-stone-wash: #e4e4e6;
  --task-stone-ink: #3a3a3e;
  color-scheme: light;
}

[data-theme='paper'] {
  --bg: #e4d8c8;
  --card: #f6efe4;
  --card-alt: #fbf6ee;
  --field: #ece3d4;
  --text: #2a2218;
  --text-muted: #8a7d6e;
  --text-faint: #b4a594;
  --divider: #ddd0be;
  --accent: #2a2218;
  --pill-bg: #2a2218;
  --pill-fg: #f6efe4;
  --selected-bg: #fff8ee;
  --danger: #c04538;
  --success: #3d8f5a;
  --overlay: rgba(42, 34, 24, 0.35);
  --on-pill: rgba(246, 239, 228, 0.16);
  --block-bg: #ece3d4;
  --block-border: #ddd0be;
  --shadow-1: 0 4px 12px rgba(60, 40, 20, 0.08);
  --shadow-2: 0 8px 24px rgba(60, 40, 20, 0.12);
  --task-rose: #c45b6a;
  --task-rose-wash: #f3dce0;
  --task-rose-ink: #7a3140;
  --task-amber: #c48a2a;
  --task-amber-wash: #f3e6c8;
  --task-amber-ink: #6d4a12;
  --task-lime: #6a9a32;
  --task-lime-wash: #e0edc8;
  --task-lime-ink: #3a5418;
  --task-teal: #2a8a7a;
  --task-teal-wash: #cfe8e3;
  --task-teal-ink: #1a4f46;
  --task-sky: #3a7ab8;
  --task-sky-wash: #d4e4f4;
  --task-sky-ink: #1e4568;
  --task-violet: #7a5aa8;
  --task-violet-wash: #e4daf2;
  --task-violet-ink: #44305e;
  --task-coral: #c46a48;
  --task-coral-wash: #f3ddd4;
  --task-coral-ink: #6e3a26;
  --task-stone: #6e6e74;
  --task-stone-wash: #e4e4e6;
  --task-stone-ink: #3a3a3e;
  color-scheme: light;
}

[data-theme='dark'] {
  --bg: #0d0d0f;
  --card: #17171a;
  --card-alt: #1e1e22;
  --field: #212126;

  --text: #f5f5f6;
  --text-muted: #8a8a90;
  --text-faint: #5c5c63;
  --divider: #232327;

  --accent: #f5f5f6;

  --pill-bg: #ffffff;
  --pill-fg: #0d0d0f;
  --selected-bg: #26262b;

  --danger: #ff6369;
  --success: #3dd68c;
  --overlay: rgba(0, 0, 0, 0.6);
  --on-pill: rgba(13, 13, 15, 0.1);

  --block-bg: #212126;
  --block-border: #2c2c32;

  --task-rose: #e08a96;
  --task-rose-wash: #3a2428;
  --task-rose-ink: #f3d0d4;
  --task-amber: #e0b25a;
  --task-amber-wash: #3a3020;
  --task-amber-ink: #f3e4c0;
  --task-lime: #9ec85a;
  --task-lime-wash: #2a3220;
  --task-lime-ink: #d8ecb0;
  --task-teal: #5cbcac;
  --task-teal-wash: #1e302c;
  --task-teal-ink: #c0e8e0;
  --task-sky: #7ab0d8;
  --task-sky-wash: #1e2a36;
  --task-sky-ink: #c8e0f0;
  --task-violet: #b090d0;
  --task-violet-wash: #2c2438;
  --task-violet-ink: #e4d4f4;
  --task-coral: #e09070;
  --task-coral-wash: #3a2820;
  --task-coral-ink: #f4d4c8;
  --task-stone: #a0a0a6;
  --task-stone-wash: #2a2a2e;
  --task-stone-ink: #d8d8dc;

  /* В тёмной теме тень не читается, глубину даёт цвет поверхности */
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

[data-theme='ink'] {
  --bg: #12161e;
  --card: #1a202b;
  --card-alt: #212836;
  --field: #262e3d;
  --text: #e8edf5;
  --text-muted: #8b96a8;
  --text-faint: #5c6778;
  --divider: #2a3342;
  --accent: #e8edf5;
  --pill-bg: #e8edf5;
  --pill-fg: #12161e;
  --selected-bg: #2a3342;
  --danger: #ff6b72;
  --success: #3dd68c;
  --overlay: rgba(0, 0, 0, 0.55);
  --on-pill: rgba(18, 22, 30, 0.12);
  --block-bg: #262e3d;
  --block-border: #323c4e;
  --task-rose: #e08a96;
  --task-rose-wash: #3a2428;
  --task-rose-ink: #f3d0d4;
  --task-amber: #e0b25a;
  --task-amber-wash: #3a3020;
  --task-amber-ink: #f3e4c0;
  --task-lime: #9ec85a;
  --task-lime-wash: #2a3220;
  --task-lime-ink: #d8ecb0;
  --task-teal: #5cbcac;
  --task-teal-wash: #1e302c;
  --task-teal-ink: #c0e8e0;
  --task-sky: #7ab0d8;
  --task-sky-wash: #1e2a36;
  --task-sky-ink: #c8e0f0;
  --task-violet: #b090d0;
  --task-violet-wash: #2c2438;
  --task-violet-ink: #e4d4f4;
  --task-coral: #e09070;
  --task-coral-wash: #3a2820;
  --task-coral-ink: #f4d4c8;
  --task-stone: #a0a0a6;
  --task-stone-wash: #2a2a2e;
  --task-stone-ink: #d8d8dc;
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Привязка имени к переменным — один класс на все поверхности */
.task-color--rose {
  --task-tint: var(--task-rose);
  --task-wash: var(--task-rose-wash);
  --task-ink: var(--task-rose-ink);
}

.task-color--amber {
  --task-tint: var(--task-amber);
  --task-wash: var(--task-amber-wash);
  --task-ink: var(--task-amber-ink);
}

.task-color--lime {
  --task-tint: var(--task-lime);
  --task-wash: var(--task-lime-wash);
  --task-ink: var(--task-lime-ink);
}

.task-color--teal {
  --task-tint: var(--task-teal);
  --task-wash: var(--task-teal-wash);
  --task-ink: var(--task-teal-ink);
}

.task-color--sky {
  --task-tint: var(--task-sky);
  --task-wash: var(--task-sky-wash);
  --task-ink: var(--task-sky-ink);
}

.task-color--violet {
  --task-tint: var(--task-violet);
  --task-wash: var(--task-violet-wash);
  --task-ink: var(--task-violet-ink);
}

.task-color--coral {
  --task-tint: var(--task-coral);
  --task-wash: var(--task-coral-wash);
  --task-ink: var(--task-coral-ink);
}

.task-color--stone {
  --task-tint: var(--task-stone);
  --task-wash: var(--task-stone-wash);
  --task-ink: var(--task-stone-ink);
}

/* Свой цвет: сам оттенок приходит из --task-custom, а подложка и текст
   смешиваются с поверхностью темы — так палитра не ломает ночь. */
.task-color--custom {
  --task-tint: var(--task-custom, var(--task-stone));
  --task-wash: color-mix(in srgb, var(--task-custom, var(--task-stone)) 26%, var(--card));
  --task-ink: color-mix(in srgb, var(--task-custom, var(--task-stone)) 58%, var(--text));
}

/* Context App semantic tokens from the approved Figma Light collection. */
:root,
[data-theme='light'] {
  --bg: #ffffff;
  --card: #ffffff;
  --card-alt: #e1e6d9;
  --field: #f0f2eb;
  --text: #171717;
  --text-muted: #62665b;
  --text-faint: #92978a;
  --divider: #e1e6d9;
  --accent: #c8f43f;
  --pill-bg: #171717;
  --pill-fg: #ffffff;
  --selected-bg: #f1f9d8;
  --brand-lime: #c8f43f;
  --brand-coral: #ff7868;
  --brand-lime-soft: #f1f9d8;
  --brand-coral-soft: #ffe5df;
  --brand-ink: #171717;
  --shadow-1: 0 4px 16px rgba(36, 35, 31, 0.04);
  --shadow-2: 0 12px 40px rgba(36, 35, 31, 0.05);
  --shadow-3: 0 20px 60px rgba(36, 35, 31, 0.09);
}

:root {
  --font-display: 32px;
  --font-title: 22px;
  --font-body: 17px;
  --font-label: 17px;
  --font-caption: 14px;
  --font-micro: 12px;
  --content-max: 100%;
  --page-max: 1568px;
  --tab-bar-space: calc(104px + env(safe-area-inset-bottom));
  --page-gutter: 16px;
  --app-header-height: 72px;
  --brand-lime: #c8f43f;
  --brand-coral: #ff7868;
  --brand-ink: #171717;
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
}

[data-theme='dark'],
[data-theme='ink'] {
  --brand-lime-soft: #29331b;
  --brand-coral-soft: #3c2927;
  --shadow-3: 0 20px 60px rgba(0, 0, 0, 0.4);
}

[data-theme='paper'] {
  --brand-lime-soft: #e8edcc;
  --brand-coral-soft: #f1d6c9;
  --shadow-3: 0 20px 60px rgba(60, 40, 20, 0.12);
}

@media (min-width: 900px) {
  :root {
    --font-display: 44px;
    --font-title: 28px;
    --font-body: 20px;
    --font-label: 18px;
    --font-caption: 16px;
    --font-micro: 14px;
    --page-gutter: clamp(24px, 3.333333vw, 64px);
    --app-header-height: 88px;
    --tab-bar-space: 0px;
  }
}