/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  color-scheme: light;
  /* ---------- Brand ---------- */
  --color-brand-primary: #000b6b;
  --color-brand-primary-soft: #7d8eb2;
  --color-brand-mint: #9ebfef;
  --color-afisha-pink: #ee008b;

  /* ---------- Base: Light theme ---------- */
  --color-text-primary: #000000;
  --color-text-muted: #61786e;
  --color-text-inverse: #ffffff;
  --color-text-footer-muted: #bdc3c7;
  --color-page-bg: #fafbfc;
  --color-surface: #ffffff;
  --color-header-bar: #000b6b;
  --color-search-bg: #cfd8dc;
  --color-footer-bg: #000b6b;

  /* ---------- Sidebar palettes ---------- */
  --color-sidebar-bg-light: #ffffff;
  --color-sidebar-text-light: #61786e;
  --color-sidebar-accent-light: #000b6b;
  --color-sidebar-bg-dark: #000b6b;
  --color-sidebar-text-dark: #ffffff;
  --color-sidebar-muted-dark: #61786e;

  /* ---------- Applied sidebar tokens ---------- */
  --color-sidebar-bg: var(--color-sidebar-bg-light);
  --color-sidebar-text: var(--color-sidebar-text-light);
  --color-sidebar-accent: var(--color-sidebar-accent-light);
  --color-sidebar-muted: var(--color-text-muted);

  /* ---------- Component utility tokens ---------- */
  --color-header-contact: rgba(255, 255, 255, 0.92);
  --color-focus-ring-on-dark: rgba(255, 255, 255, 0.35);
  --color-sidebar-divider-dark-core: rgba(255, 255, 255, 0.9);
  --color-overlay-backdrop: rgba(0, 0, 0, 0.88);
  --color-promo-btn-text: #23272a;
  --color-visitor-title: #000000;

  /* ---------- Cards / highlights ---------- */
  --color-gosuslugi-bg: #e0edfe;
  --color-gosuslugi-accent: #d2e3fc;

  /* ---------- Shadows ---------- */
  --color-sidebar-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 20px rgba(238, 238, 238, 0.5);
  --shadow-gos-card: 0 6px 16px rgba(230, 235, 245, 0.8), 0 1px 4px rgba(227, 235, 252, 1);
  --shadow-btn-hover: 0 8px 20px rgba(0, 107, 60, 0.25);
  --shadow-service-hover: 0 12px 32px rgba(0, 107, 60, 0.12);
  --shadow-news-hover: 0 12px 28px rgba(0, 0, 0, 0.08);

  /* ---------- Sizes ---------- */
  --sidebar-width-expanded: 357px;
  --sidebar-width-collapsed: 130px;
  --sidebar-width: var(--sidebar-width-expanded);
  --header-height: 44px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 24px;

  /* ---------- Typography ---------- */
  --font-family: "Rubik", system-ui, sans-serif;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-medium: 18px;
  --font-size-nav: 20px;
  --font-size-h1: clamp(24px, 3vw, 32px);
  --font-size-section-title: 30px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-normal: 0.35s;
  --duration-submenu: 0.32s;

  /* ---------- Sidebar submenu ---------- */
  --font-size-sidebar-submenu: 16px;
  --font-size-sidebar-submenu-flyout: 14px;
  --radius-sidebar-submenu-trigger: 12px;
  --radius-sidebar-flyout: 16px;
  --color-sidebar-submenu-rail: var(--color-brand-primary);
  --color-sidebar-submenu-flyout-bg: #ffffff;
  --sidebar-submenu-max-height: 220px;
  --sidebar-submenu-flyout-min-width: 158px;

  /* ---------- News article (detail page) ---------- */
  --news-detail-content-max: min(720px, 100%);
  --news-detail-body-size: clamp(17px, 0.35vw + 16px, 19px);
  --news-detail-body-line-height: 1.65;
}

/* =========================================================
   GLOBAL DARK THEME
   ========================================================= */
[data-menu-theme="dark"] {
  color-scheme: dark;
  --color-brand-primary: #3071E7;
  --color-text-primary: #94a3b8;
  --color-text-inverse: #e6e6e6;
  --color-sidebar-bg-light: #020F43;
  --color-page-bg: #080B26;
  --color-overlay-backdrop: #080b26e0;
  --color-brand-primary-soft: var(--color-brand-primary);
  --color-afisha-pink: var(--color-brand-primary);
  --shadow-btn-hover: 0 8px 20px var(--color-brand-primary);
  --color-text-muted: var(--color-text-primary);
  --color-text-footer-muted: var(--color-text-primary);
  --color-sidebar-text: var(--color-text-primary);
  --color-sidebar-muted: var(--color-text-primary);
  --color-header-contact: var(--color-text-primary);
  --color-promo-btn-text: var(--color-text-inverse);
  --color-sidebar-accent: var(--color-text-inverse);
  --color-surface: var(--color-sidebar-bg-light);
  --color-header-bar: var(--color-sidebar-bg-light);
  --color-footer-bg: var(--color-sidebar-bg-light);
  --color-sidebar-bg: var(--color-sidebar-bg-light);
  --color-sidebar-submenu-flyout-bg: var(--color-sidebar-bg-light);
  --color-search-bg: var(--color-page-bg);
  --color-visitor-title: var(--color-page-bg);
  --color-focus-ring-on-dark: var(--color-text-primary, 0.45);
  --color-sidebar-shadow: 0 4px 24px var(--color-page-bg, 0.35);
  --shadow-card: 0 4px 20px var(--color-page-bg, 0.22);
  --shadow-service-hover: 0 12px 32px var(--color-page-bg, 0.28);
  --shadow-news-hover: 0 12px 28px var(--color-page-bg, 0.3);
}

/* =========================================================
   STATE TOKENS
   ========================================================= */
[data-menu-width="collapsed"] {
  --sidebar-width: var(--sidebar-width-collapsed);
}