:root {
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Типографика UI */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-md: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --letter-spacing-label: 0.04em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-brand: -0.03em;

  /* Заголовки */
  --font-size-page-title: clamp(1.25rem, 2vw, 1.5rem);
  --font-size-brand: 1.125rem;
  --font-size-subtitle: var(--font-size-base);

  /* Контролы форм (единая высота по приложению) */
  --control-height: 40px;
  --control-height-sm: 34px;
  --control-padding-x: 12px;
  --control-font-size: var(--font-size-base);

  /* Заголовки секций в панелях */
  --heading-section-size: var(--font-size-md);
  --heading-section-weight: var(--font-weight-semibold);

  /* Палитра Marelis.pro */
  --brand-cream: #f2efe9;
  --brand-teal: #1f7a6e;
  --brand-teal-hover: #19685e;
  --brand-teal-deep: #155a52;
  --brand-text: #1a1a1a;
  --brand-card: #ffffff;
  --brand-tag: #d4ede9;
  --brand-text-muted: #5c5c5c;

  /* Шкала отступов (8px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius — чуть компактнее, как в современных SaaS */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Тени: один слой elevation, без «цветного» свечения */
  --shadow-soft: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.05);
  --shadow-panel: 0 4px 20px rgba(26, 26, 26, 0.05);

  --focus-ring: 0 0 0 3px rgba(31, 122, 110, 0.28);

  --sidebar-width: 260px;
  --content-max-width: 100%;

  /* Аналитика / дашборды — узкая колонка контента (как в кабинете Avito) */
  --stats-layout-max-width: 57.5rem; /* 920px */
  --filter-width-date: 9.75rem; /* 156px */
  --filter-width-select: 11.25rem; /* 180px */
  --filter-width-profile: 32rem; /* 512px */
  --stats-chart-height: 13.75rem; /* 220px */
  --chart-font-family: var(--font-family-base);
  --chart-tick-font-size: var(--font-size-xs);
  --chart-tick-font-weight: var(--font-weight-normal);
  --chart-tooltip-font-size: var(--font-size-sm);
  --chart-tooltip-title-weight: var(--font-weight-medium);
  --chart-tooltip-body-weight: var(--font-weight-normal);
  --color-danger: #c62828;
  --color-danger-soft: rgba(198, 40, 40, 0.1);
  --color-warning: #b45309;
  --color-warning-soft: rgba(180, 83, 9, 0.12);
  --accent-border: rgba(31, 122, 110, 0.35);
  --accent-border-dashed: rgba(31, 122, 110, 0.35);

  /* Макет shell */
  --layout-main-padding-y: 32px;
  --layout-main-padding-x: 40px;
  --layout-sidebar-padding-y: 28px;
  --layout-sidebar-padding-x: 20px;
  --layout-section-gap: 28px;
  --font-size-metric: 1.5rem;
  --font-size-section: 1rem;
  --layout-page-intro-max: 42rem;

  /* Графики /stats/: холодный голубой + лавандовый акцент (не копия Avito) */
  --chart-bar-primary: rgba(91, 159, 232, 0.88);
  --chart-bar-secondary: rgba(155, 138, 232, 0.85);
  --chart-bar-shows: rgba(168, 207, 245, 0.6);
  --chart-bar-spend: rgba(107, 182, 240, 0.82);
  --chart-bar-tertiary: rgba(126, 196, 232, 0.8);
  --chart-bar-primary-muted: rgba(91, 159, 232, 0.16);
  --chart-bar-secondary-muted: rgba(155, 138, 232, 0.16);
  --chart-bar-shows-muted: rgba(168, 207, 245, 0.14);
  --chart-bar-spend-muted: rgba(107, 182, 240, 0.14);
  --chart-bar-tertiary-muted: rgba(126, 196, 232, 0.16);
  --chart-hover-band: rgba(91, 159, 232, 0.18);
  --chart-grid: rgba(26, 26, 26, 0.06);
  --chart-tooltip-bg: #1a1a1a;
  --chart-tooltip-text: #f2efe9;
}

:root,
[data-theme="light"] {
  --bg-base: var(--brand-cream);
  --bg-surface: #faf9f7;
  --bg-elevated: #ffffff;

  /* Плоский фон — меньше визуального шума, карточки задают глубину */
  --bg-gradient: none;

  --text-primary: var(--brand-text);
  --text-secondary: var(--brand-text-muted);
  --text-muted: var(--brand-text-muted);
  --text-inverse: #ffffff;

  --border-subtle: rgba(26, 26, 26, 0.08);
  --border-strong: rgba(26, 26, 26, 0.14);

  --accent-primary: var(--brand-teal);
  --accent-primary-hover: var(--brand-teal-hover);
  --accent-soft: rgba(31, 122, 110, 0.08);
  --brand-accent-line: var(--brand-teal);

  --sidebar-bg: var(--brand-cream);
  --sidebar-border: rgba(26, 26, 26, 0.08);
  --sidebar-text: var(--brand-text-muted);
  --sidebar-text-active: var(--brand-text);
  --sidebar-item-hover: rgba(31, 122, 110, 0.06);
  --sidebar-item-active-bg: var(--brand-tag);
  --sidebar-active-indicator: var(--brand-teal);

  --surface-raised: #f6f4f0;
  --surface-muted: rgba(31, 122, 110, 0.07);
  --surface-inset: #efede8;

  --card-bg: var(--surface-raised);
  --card-border: rgba(26, 26, 26, 0.07);
  --card-shadow: none;

  --filter-bg: #ffffff;
  --filter-border: rgba(26, 26, 26, 0.12);

  --table-bg: var(--surface-raised);
  --table-border: rgba(26, 26, 26, 0.06);
  --table-head-bg: var(--surface-inset);
  --table-head-text: var(--text-secondary);
  --table-row-hover: rgba(31, 122, 110, 0.06);
  --table-row-alt: rgba(26, 26, 26, 0.025);

  --button-primary-bg: var(--brand-teal);
  --button-primary-bg-hover: var(--brand-teal-hover);
  --button-primary-text: #ffffff;

  --button-secondary-bg: rgba(255, 255, 255, 0.55);
  --button-secondary-bg-hover: var(--brand-tag);
  --button-secondary-text: var(--brand-text);
  --button-secondary-border: rgba(31, 122, 110, 0.18);

  --badge-bg: var(--brand-tag);
  --badge-text: var(--brand-teal-deep);

  --color-border: var(--border-subtle);
  --color-surface: var(--brand-card);
  --color-text: var(--text-primary);
  --color-primary: var(--accent-primary);
  --color-surface-hover: var(--accent-soft);

  --text-accent: var(--brand-teal-deep);

  --alert-success-bg: var(--brand-tag);
  --alert-success-text: var(--brand-teal-deep);
  --alert-success-border: rgba(31, 122, 110, 0.2);

  --alert-error-bg: #fef2f2;
  --alert-error-text: #991b1b;
  --alert-error-border: rgba(185, 28, 28, 0.2);

  --alert-warn-bg: #fffbeb;
  --alert-warn-text: #78350f;
  --alert-warn-border: rgba(180, 83, 9, 0.28);
  --attention-warn-bg: var(--alert-warn-bg);
  --attention-warn-text: var(--alert-warn-text);
  --attention-warn-border: var(--alert-warn-border);

  --field-error-border: #b91c1c;
  --field-error-text: #b91c1c;

  --toggle-track-bg: rgba(31, 122, 110, 0.1);
  --toggle-track-border: rgba(31, 122, 110, 0.16);
  --toggle-active-bg: #ffffff;
  --toggle-active-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
  --toggle-icon: var(--text-secondary);
  --toggle-icon-active: var(--brand-teal);
}

[data-theme="dark"] {
  --bg-base: #121817;
  --bg-surface: #1a2221;
  --bg-elevated: #222c2b;

  --bg-gradient: none;

  --text-primary: #f2efe9;
  --text-secondary: #9caaa8;
  --text-muted: #7a8a88;
  --text-inverse: #121817;

  --border-subtle: rgba(242, 239, 233, 0.08);
  --border-strong: rgba(242, 239, 233, 0.14);

  --accent-primary: #4aab9f;
  --accent-primary-hover: #5fc0b4;
  --accent-soft: rgba(74, 171, 159, 0.12);
  --brand-accent-line: #4aab9f;

  --sidebar-bg: #161e1d;
  --sidebar-border: rgba(242, 239, 233, 0.06);
  --sidebar-text: #9caaa8;
  --sidebar-text-active: #f2efe9;
  --sidebar-item-hover: rgba(74, 171, 159, 0.1);
  --sidebar-item-active-bg: rgba(31, 122, 110, 0.22);
  --sidebar-active-indicator: #4aab9f;

  --surface-raised: #1c2524;
  --surface-muted: rgba(74, 171, 159, 0.1);
  --surface-inset: #161e1d;

  --card-bg: var(--surface-raised);
  --card-border: rgba(242, 239, 233, 0.08);
  --card-shadow: none;

  --filter-bg: var(--bg-elevated);
  --filter-border: rgba(242, 239, 233, 0.14);

  --table-bg: var(--surface-raised);
  --table-border: rgba(242, 239, 233, 0.06);
  --table-head-bg: rgba(255, 255, 255, 0.06);
  --table-head-text: var(--text-secondary);
  --table-row-hover: rgba(74, 171, 159, 0.1);
  --table-row-alt: rgba(242, 239, 233, 0.04);

  --button-primary-bg: #4aab9f;
  --button-primary-bg-hover: #5fc0b4;
  --button-primary-text: #0f1413;

  --button-secondary-bg: rgba(30, 40, 39, 0.85);
  --button-secondary-bg-hover: #263230;
  --button-secondary-text: #f2efe9;
  --button-secondary-border: rgba(74, 171, 159, 0.22);

  --badge-bg: rgba(31, 122, 110, 0.32);
  --badge-text: #d4ede9;

  --focus-ring: 0 0 0 3px rgba(74, 171, 159, 0.35);

  --color-border: var(--border-subtle);
  --color-surface: var(--card-bg);
  --color-text: var(--text-primary);
  --color-primary: var(--accent-primary);
  --color-surface-hover: var(--accent-soft);

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 12px 32px rgba(0, 0, 0, 0.32);

  --text-accent: #b8e8e0;

  --alert-success-bg: rgba(31, 122, 110, 0.22);
  --alert-success-text: #d4ede9;
  --alert-success-border: rgba(74, 171, 159, 0.28);

  --alert-error-bg: rgba(127, 29, 29, 0.28);
  --alert-error-text: #fecaca;
  --alert-error-border: rgba(248, 113, 113, 0.28);

  --alert-warn-bg: rgba(120, 53, 15, 0.35);
  --alert-warn-text: #fde68a;
  --alert-warn-border: rgba(251, 191, 36, 0.35);
  --attention-warn-bg: var(--alert-warn-bg);
  --attention-warn-text: var(--alert-warn-text);
  --attention-warn-border: var(--alert-warn-border);

  --field-error-border: #f87171;
  --field-error-text: #fca5a5;

  --color-danger-soft: rgba(248, 113, 113, 0.14);
  --color-warning: #fbbf24;
  --color-warning-soft: rgba(251, 191, 36, 0.14);
  --accent-border: rgba(74, 171, 159, 0.4);
  --accent-border-dashed: rgba(74, 171, 159, 0.35);

  --toggle-track-bg: rgba(0, 0, 0, 0.28);
  --toggle-track-border: rgba(242, 239, 233, 0.1);
  --toggle-active-bg: #2a3634;
  --toggle-active-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  --toggle-icon: #7a8a88;
  --toggle-icon-active: #5fc0b4;

  --chart-bar-primary: rgba(130, 185, 248, 0.92);
  --chart-bar-secondary: rgba(175, 162, 238, 0.88);
  --chart-bar-shows: rgba(185, 215, 252, 0.58);
  --chart-bar-spend: rgba(140, 200, 252, 0.85);
  --chart-bar-tertiary: rgba(150, 210, 245, 0.85);
  --chart-bar-primary-muted: rgba(130, 185, 248, 0.18);
  --chart-bar-secondary-muted: rgba(175, 162, 238, 0.18);
  --chart-bar-shows-muted: rgba(185, 215, 252, 0.14);
  --chart-bar-spend-muted: rgba(140, 200, 252, 0.16);
  --chart-bar-tertiary-muted: rgba(150, 210, 245, 0.16);
  --chart-hover-band: rgba(130, 185, 248, 0.22);
  --chart-grid: rgba(242, 239, 233, 0.08);
  --chart-tooltip-bg: #2a3634;
  --chart-tooltip-text: #f2efe9;
}