/**
 * ASGUARD DESIGN TOKENS — единственный источник значений.
 * Правило: компоненты и блоки используют только var(--ag-*), не «магические» числа.
 * Значения совпадают с текущей темой (--breeze-*, --asguard-*), чтобы миграция была безопасной.
 */
:root {
  /* ---------- Color / surface ---------- */
  --ag-color-bg: #232629;
  --ag-color-panel: #31363b;
  --ag-color-text: #eff0f1;
  --ag-color-muted: #7f8c8d;
  --ag-color-border: #4d5052;
  --ag-color-primary: #3daee9;
  --ag-color-accent: #f7992b;
  --ag-color-success: #2dd36f;
  --ag-color-warning: #ffc409;
  --ag-color-danger: #ff4961;

  /* legacy-алиасы: старые имена ведут к токенам */
  --breeze-bg: var(--ag-color-bg);
  --breeze-paper: var(--ag-color-panel);
  --breeze-text: var(--ag-color-text);
  --breeze-dim: var(--ag-color-muted);
  --border-color: var(--ag-color-border);
  --asguard-blue: var(--ag-color-primary);
  --asguard-orange: var(--ag-color-accent);
  --status-ok: var(--ag-color-success);
  --status-warn: var(--ag-color-warning);
  --status-error: var(--ag-color-danger);

  /* ---------- Typography ---------- */
  --ag-font-sans: 'Roboto', 'Segoe UI', sans-serif;
  --ag-font-mono: 'Fira Code', 'Cascadia Code', monospace;
  --ag-font-size-base: 14px;
  --ag-line-height-base: 1.6;
  --ag-font-size-h1: clamp(28px, 4vw, 44px);
  --ag-font-size-h2: clamp(22px, 2.6vw, 32px);
  --ag-font-size-h3: clamp(18px, 1.8vw, 24px);
  --ag-font-size-small: 12px;
  --ag-font-weight-regular: 400;
  --ag-font-weight-medium: 500;
  --ag-font-weight-bold: 600;

  /* ---------- Spacing (шаг 4px) ---------- */
  --ag-space-1: 4px;
  --ag-space-2: 8px;
  --ag-space-3: 12px;
  --ag-space-4: 16px;
  --ag-space-5: 24px;
  --ag-space-6: 32px;
  --ag-space-7: 48px;
  --ag-space-8: 64px;

  /* ---------- Radius ---------- */
  --ag-radius-xs: 3px;
  --ag-radius-sm: 4px;
  --ag-radius-md: 8px;
  --ag-radius-lg: 16px;
  --ag-radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --ag-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --ag-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --ag-shadow-lg: 0 30px 100px rgba(0, 0, 0, 0.5);
  --ag-shadow-inset-accent: inset 0 -2px 0 var(--ag-color-accent);

  /* ---------- Layout ---------- */
  --ag-bar-h: 45px;
  --ag-sidebar-w: 45px;
  --ag-content-max: 1440px;

  /* ---------- Z-index (иерархия слоёв) ---------- */
  --ag-z-base: 1;
  --ag-z-dropdown: 100;
  --ag-z-sticky: 200;
  --ag-z-overlay: 300;
  --ag-z-modal: 400;
  --ag-z-popup: 500;
  --ag-z-adminbar: 1000;
  --ag-z-toast: 1100;

  /* ---------- Motion ---------- */
  --ag-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ag-dur-fast: 120ms;
  --ag-dur-base: 220ms;
  --ag-dur-slow: 420ms;
}

/* ---------- Device variants ---------- */
/* Laptop: 1024–1350px */
@media (max-width: 1350px) {
  :root {
    --ag-content-max: 1200px;
    --ag-space-7: 40px;
    --ag-space-8: 48px;
  }
}

/* Tablet: 768–1024px */
@media (max-width: 1024px) {
  :root {
    --ag-content-max: 100%;
    --ag-space-6: 24px;
    --ag-space-7: 32px;
    --ag-space-8: 40px;
    --ag-font-size-h1: clamp(26px, 5vw, 36px);
    --ag-font-size-h2: clamp(20px, 3.4vw, 28px);
  }
}

/* Phone: < 768px */
@media (max-width: 768px) {
  :root {
    --ag-bar-h: 52px;
    --ag-sidebar-w: 0px;          /* сайдбар скрыт, меню — бургер */
    --ag-font-size-base: 15px;    /* на телефоне крупнее для читаемости */
    --ag-font-size-h3: 20px;
    --ag-space-5: 20px;
  }
}

/* Small phone: < 480px */
@media (max-width: 480px) {
  :root {
    --ag-font-size-base: 15px;
    --ag-line-height-base: 1.55;
  }
}