/* ==========================================================================
   SML - Design Tokens
   Файл: /wp-content/themes/sml/src/css/base/variables.css
   Версия: 1.0.0
   Author: NUVREN (https://nuvren.com)

   Назначение:
   - Единый источник токенов дизайна: цвета, типографика, отступы, радиусы, тени, z-index;
   - Используется во всех остальных CSS-файлах.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Цвета (нейтральные + бренд)
     ------------------------------------------------------------------------ */
  --color-bg: #fbfcfd;
  --color-surface: #ffffff;
  --color-surface-2: #f4f6f8;
  --color-surface-3: #eef2f6;

  --color-text: #0b0f14;
  --color-text-2: #2b3440;
  --color-muted: #667085;

  --color-border: rgba(11, 15, 20, 0.10);
  --color-border-strong: rgba(11, 15, 20, 0.16);
  --color-border-soft: rgba(11, 15, 20, 0.08);

  /* Бренд (зелёный) */
  --color-primary: #1f7a3a;           /* основной акцент */
  --color-primary-2: #14542a;         /* hover/active */
  --color-primary-3: #2ea05a;         /* светлее, для бейджей/подсветок */
  --color-primary-contrast: #ffffff;  /* текст на зелёном */

  /* Семантика ссылок и выделений */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-2);

  /* Доп. акценты */
  --color-accent: #0ea5e9;            /* опциональный, для вторичных ссылок/бейджей */
  --color-danger: #b42318;
  --color-warning: #b54708;
  --color-success: #067647;

  /* Подложки статусов (для бейджей и alert) */
  --color-success-bg: rgba(6, 118, 71, 0.10);
  --color-warning-bg: rgba(181, 71, 8, 0.10);
  --color-danger-bg: rgba(180, 35, 24, 0.10);

  /* ------------------------------------------------------------------------
     Типографика
     ------------------------------------------------------------------------ */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", Times, serif;

  /* База 16px: чтобы перестало ощущаться "мелко" */
  --font-size-xxs: 0.75rem;     /* 12px */
  --font-size-xs: 0.875rem;     /* 14px */
  --font-size-sm: 0.9375rem;    /* 15px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-md: 1.0625rem;    /* 17px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.375rem;     /* 22px */
  --font-size-2xl: 1.875rem;    /* 30px */
  --font-size-3xl: 2.375rem;    /* 38px */
  --font-size-4xl: 3.125rem;    /* 50px */

  --line-height-tight: 1.12;
  --line-height-snug: 1.24;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.72;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Небольшие буквенные интервалы для "премиум" заголовков */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;

  /* ------------------------------------------------------------------------
     Сетка и контейнеры
     ------------------------------------------------------------------------ */
  --container-max: 1240px;
  --container-padding: 24px;

  /* Базовый ритм секций (используем в sections.css) */
  --section-pad-y: var(--space-16);
  --section-pad-y-sm: var(--space-12);

  /* ------------------------------------------------------------------------
     Отступы (шкала, ровная и предсказуемая)
     ------------------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Семантические отступы компонентов */
  --card-pad: var(--space-6);
  --card-gap: var(--space-4);

  /* ------------------------------------------------------------------------
     Радиусы
     ------------------------------------------------------------------------ */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ------------------------------------------------------------------------
     Тени (мягкие, современно, без "грязи")
     ------------------------------------------------------------------------ */
  --shadow-xs: 0 1px 1px rgba(11, 15, 20, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 15, 20, 0.07);
  --shadow-md: 0 10px 28px rgba(11, 15, 20, 0.11);
  --shadow-lg: 0 18px 44px rgba(11, 15, 20, 0.14);

  /* ------------------------------------------------------------------------
     Бордеры
     ------------------------------------------------------------------------ */
  --border-1: 1px solid var(--color-border);
  --border-1-strong: 1px solid var(--color-border-strong);

  /* ------------------------------------------------------------------------
     Фокус (доступность)
     ------------------------------------------------------------------------ */
  --focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.35);

  /* ------------------------------------------------------------------------
     Анимации
     ------------------------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;

  /* ------------------------------------------------------------------------
     Z-index
     ------------------------------------------------------------------------ */
  --z-base: 1;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 100;

  /* ------------------------------------------------------------------------
     Breakpoints (для справки; в CSS используем напрямую значения)
     ------------------------------------------------------------------------ */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* Тёмная схема (опционально, пока выключено)
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b0d10;
    --color-surface: #0f1216;
    --color-surface-2: #12161b;
    --color-surface-3: #151a20;
    --color-text: #f2f4f7;
    --color-text-2: #d0d5dd;
    --color-muted: #98a2b3;
    --color-border: rgba(242, 244, 247, 0.10);
    --color-border-strong: rgba(242, 244, 247, 0.16);
    --color-border-soft: rgba(242, 244, 247, 0.08);
  }
}
*/