/**
 * Токены темы: :root дублирует тёмную палитру (база каскада); в приложении по умолчанию data-theme="light" в index.html и theme.js.
 */
:root,
[data-theme="dark"] {
  --color-background: #0c0e10;
  --color-surface: #0c0e10;
  --color-surface-dim: #0c0e10;
  --color-surface-container: #171a1c;
  --color-surface-container-low: #111416;
  --color-surface-container-high: #1d2022;
  --color-surface-container-highest: #232629;
  --color-surface-variant: #232629;
  --color-surface-bright: #292c2f;

  --color-primary: #ff923e;
  --color-primary-container: #f97f06;
  --color-primary-dim: #f67c01;
  --color-on-primary-fixed: #000000;
  --color-on-primary-container: #000000;
  --color-secondary: #f79728;
  --color-tertiary: #ffd262;

  --color-on-background: #eeeef0;
  --color-on-surface: #eeeef0;
  --color-on-surface-variant: #aaabad;
  --color-outline: #747578;
  --color-outline-variant: #46484a;

  --color-error: #ff7351;
  --color-error-container: #b92902;
  --color-on-error-container: #ffd2c8;

  /* Календарь: силовая / растяжка */
  --cal-dot-strength: #ff7a3d;
  --cal-dot-stretch: #2dd4bf;

  --color-border: rgba(70, 72, 74, 0.2);
  --color-bg: var(--color-background);
  --color-surface-elevated: var(--color-surface-container-highest);
  --color-text: var(--color-on-surface);
  --color-text-muted: var(--color-on-surface-variant);
  --color-accent: var(--color-primary);
  --color-accent-soft: rgba(255, 146, 62, 0.12);
  --color-success: #4ade80;
  --color-danger: var(--color-error);

  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-primary-glow: 0 8px 24px rgba(255, 146, 62, 0.2);
  --shadow-tabbar: 0 -1px 0 0 rgba(70, 72, 74, 0.15);
  /* Плавающий tabbar: объём + лёгкий верхний блик */
  --tabbar-float-shadow: 0 14px 48px rgba(0, 0, 0, 0.42), 0 4px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --tabbar-float-outline: rgba(255, 255, 255, 0.12);

  /* Шапка: «liquid glass» (как капсулы в iOS / Telegram) */
  --header-glass-backdrop: blur(36px) saturate(190%);
  --header-glass-fill: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.07) 42%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --header-glass-edge: rgba(255, 255, 255, 0.26);
  --header-glass-ambient: 0 10px 40px rgba(0, 0, 0, 0.28);
  --header-glass-specular: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -0.5px 0 rgba(0, 0, 0, 0.22);

  --kinetic-grad-1: rgba(255, 146, 62, 0.08);
  --kinetic-grad-2: rgba(249, 127, 6, 0.05);
  --tabbar-muted: #9ea0a2;
  --tabbar-active-color: var(--color-primary-container);
  /* Светлый приглушённый текст: на тёмном стекле тёмные rgba(38,…,0.48) не читаются */
  --tabbar-item-muted: rgba(255, 255, 255, 0.58);
  --tabbar-glide-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 100%);
  --tabbar-glide-shadow: 0 5px 18px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --modal-overlay-bg: rgba(4, 8, 12, 0.62);
  --hint-footer-color: rgba(154, 165, 176, 0.65);
  --input-border: var(--color-outline-variant);
  --input-bg: var(--color-surface-container-highest);
  --input-focus-ring: rgba(255, 146, 62, 0.45);
  --btn-secondary-inset: rgba(70, 72, 74, 0.2);
  --day-today-ring: rgba(255, 146, 62, 0.35);
  --modal-handle: rgba(70, 72, 74, 0.35);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --font-headline: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-sans: var(--font-body);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 32px;

  /* Таббар-капсула: иконка сверху, подпись снизу + внутренние отступы */
  --tabbar-h: 70px;
  --tabbar-inner-pad: 8px;
  /* Колонка вкладки: не сжимать до «котлеты», на узком экране уступает vw */
  --tabbar-btn-min-width: clamp(4.5rem, 28vw, 6.75rem);
  /* Отступ «пузыря» активной вкладки от краёв капсулы (сверху/снизу и внутри горизонтального слота) */
  --tabbar-glide-edge-gap: 4px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-float-lift: 12px;
  --tabbar-float-inset: 12px;
  /* Боковой отступ плавающей пилюли таббара от краёв экрана (шапка по-прежнему — --tabbar-float-inset) */
  --tabbar-pill-screen-inset: 22px;
  --tabbar-float-content-gap: 10px;
  --tabbar-stack-pad: calc(
    var(--tabbar-float-lift) + var(--safe-bottom) + var(--tabbar-h) + var(--tabbar-float-content-gap)
  );
  --header-h: 56px;
  /* Плашка шапки: ряд высотой с кнопкой темы (44px) + 1px рамка сверху и снизу */
  --header-dock-inner-h: 44px;
  --header-dock-outer-h: calc(var(--header-dock-inner-h) + 2px);
  --header-stack-pad: calc(
    var(--tabbar-float-lift) + env(safe-area-inset-top, 0px) + var(--header-dock-outer-h) +
      var(--tabbar-float-content-gap)
  );
}

[data-theme="light"] {
  --color-background: #f4f5f7;
  --color-surface: #f4f5f7;
  --color-surface-dim: #eef0f3;
  --color-surface-container: #ffffff;
  --color-surface-container-low: #e8eaee;
  --color-surface-container-high: #dfe2e8;
  --color-surface-container-highest: #ffffff;
  --color-surface-variant: #e2e5ea;
  --color-surface-bright: #ffffff;

  --color-primary: #e85d04;
  --color-primary-container: #f48c06;
  --color-primary-dim: #dc580a;
  --color-on-primary-fixed: #ffffff;
  --color-on-primary-container: #ffffff;
  --color-secondary: #ca6702;
  --color-tertiary: #ee9b00;

  --color-on-background: #1a1d21;
  --color-on-surface: #1a1d21;
  --color-on-surface-variant: #5c6169;
  --color-outline: #8b9099;
  --color-outline-variant: #c5cad3;

  --color-error: #d94828;
  --color-error-container: #fce8e4;
  --color-on-error-container: #5c1c0f;

  --cal-dot-strength: #ea580c;
  --cal-dot-stretch: #0d9488;

  --color-border: rgba(26, 29, 33, 0.08);
  --color-accent-soft: rgba(232, 93, 4, 0.12);
  --color-success: #16a34a;

  --shadow-soft: 0 8px 28px rgba(26, 29, 33, 0.08);
  --shadow-primary-glow: 0 6px 20px rgba(232, 93, 4, 0.18);
  --shadow-tabbar: 0 -1px 0 0 rgba(26, 29, 33, 0.06);
  --tabbar-float-shadow: 0 14px 44px rgba(26, 29, 33, 0.14), 0 4px 14px rgba(26, 29, 33, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --tabbar-float-outline: rgba(255, 255, 255, 0.18);

  --header-glass-backdrop: blur(40px) saturate(200%);
  --header-glass-fill: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.58) 45%,
    rgba(255, 255, 255, 0.42) 100%
  );
  --header-glass-edge: rgba(255, 255, 255, 0.92);
  --header-glass-ambient: 0 10px 36px rgba(26, 29, 33, 0.1);
  --header-glass-specular: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -0.5px 0 rgba(26, 29, 33, 0.06);

  --kinetic-grad-1: rgba(232, 93, 4, 0.06);
  --kinetic-grad-2: rgba(244, 140, 6, 0.04);
  --tabbar-muted: #6b7280;
  --tabbar-active-color: var(--color-primary-container);
  --tabbar-item-muted: rgba(92, 97, 105, 0.62);
  --tabbar-glide-fill: linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
  --tabbar-glide-shadow: 0 4px 16px rgba(26, 29, 33, 0.1), 0 2px 6px rgba(26, 29, 33, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  --modal-overlay-bg: rgba(26, 29, 33, 0.45);
  --hint-footer-color: rgba(92, 97, 105, 0.75);
  --input-border: var(--color-outline-variant);
  --input-bg: var(--color-surface-container-highest);
  --input-focus-ring: rgba(232, 93, 4, 0.35);
  --btn-secondary-inset: rgba(26, 29, 33, 0.1);
  --day-today-ring: rgba(232, 93, 4, 0.4);
  --modal-handle: rgba(26, 29, 33, 0.2);
}