/* ==========================================================================
   АртКомфорт58 — Design Tokens
   Stack: vanilla CSS → WordPress
   ========================================================================== */

:root {
  /* --- Color: Primary — свежий зелёный (как у Вереск) --------------------- */
  --color-primary-50:  #ECF7EC;
  --color-primary-100: #CDE9CD;
  --color-primary-200: #A5D7A5;
  --color-primary-300: #7BC57B;
  --color-primary-400: #5BB459;
  --color-primary-500: #4FA84D;
  --color-primary-600: #5FBA5C;   /* hover (чуть светлее для bright look) */
  --color-primary-700: #4FA84D;   /* base */
  --color-primary-800: #3F8B3D;
  --color-primary-900: #2D6A2C;

  --color-primary:        var(--color-primary-700);
  --color-primary-hover:  var(--color-primary-800);   /* при hover ТЕМНЕЕ, не светлее */
  --color-primary-active: var(--color-primary-900);

  /* --- Color: Accent Yellow (логотип) ------------------------------------- */
  --color-accent-300: #FFE389;
  --color-accent-400: #FFD46A;
  --color-accent-500: #FFC93C;   /* base */
  --color-accent-600: #E5B22E;
  --color-accent-700: #B8881F;

  --color-accent:        var(--color-accent-500);
  --color-accent-hover:  var(--color-accent-600);
  --color-accent-active: var(--color-accent-700);

  /* --- Color: Neutrals ---------------------------------------------------- */
  --color-bg:        #FFFFFF;    /* основной фон — белый (как у Вереск) */
  --color-bg-alt:    #FFFFFF;    /* белый (alias) */
  --color-bg-soft:   #F7F8F7;    /* лёгкая разделительная подложка */
  --color-surface:   #FFFFFF;    /* карточки */

  --color-text:        #1A1A1A;  /* НЕ чистый чёрный, по требованию клиента */
  --color-text-muted:  #6B6B6B;  /* подписи */
  --color-text-soft:   #8C8C8C;  /* placeholder */
  --color-text-on-primary: #FFFFFF;
  --color-text-on-accent:  #1A1A1A;

  --color-border:        #E5E2DA;
  --color-border-strong: #C9C5BB;
  --color-border-focus:  var(--color-primary-700);

  /* Серые полосы (header-top, footer-bottom) */
  --color-strip-bg:      #ECECEA;
  --color-strip-text:    #4A4A4A;
  --color-nav-bg:        #5A5A55;
  --color-nav-text:      #F7F7F4;
  --color-footer-main:   #5A5A55;
  --color-footer-bottom: #ECECEA;
  --color-footer-bottom-text: #4A4A4A;

  /* --- Color: Semantic ---------------------------------------------------- */
  --color-success: #2E7D32;
  --color-error:   #C0392B;
  --color-info:    #2962FF;
  --color-warning: #B8881F;

  /* --- Color: Overlay / Scrim --------------------------------------------- */
  --color-scrim:        rgba(15, 42, 25, 0.55);   /* модалки — на основе primary-900 */
  --color-overlay-soft: rgba(15, 42, 25, 0.35);

  /* --- Spacing scale: 8px base -------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Layout ------------------------------------------------------------- */
  --container-max:    1600px;       /* шире — меньше пустоты по бокам */
  --container-pad-xs: 16px;
  --container-pad-md: 20px;
  --container-pad-lg: 24px;

  --header-h-top:    40px;     /* верхняя планка */
  --header-h-main:   80px;     /* основной хедер */
  --header-h-total:  120px;    /* total для desktop */
  --header-h-mobile: 64px;     /* мобильный одноэтажный */

  /* --- Radius ------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --- Elevation (тёплые тени для бежевого фона) -------------------------- */
  --shadow-xs: 0 1px 2px rgba(31, 77, 46, 0.06);
  --shadow-sm: 0 2px 6px rgba(31, 77, 46, 0.08);
  --shadow-md: 0 6px 16px rgba(31, 77, 46, 0.10);
  --shadow-lg: 0 16px 32px rgba(31, 77, 46, 0.12);
  --shadow-xl: 0 24px 48px rgba(31, 77, 46, 0.16);
  --shadow-focus: 0 0 0 3px rgba(31, 77, 46, 0.25);

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* type scale (modular, base 16) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-72: 4.5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* --- Motion ------------------------------------------------------------- */
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* --- Z-index scale ------------------------------------------------------ */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-fab:     300;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;
}

/* Breakpoints (для @media): 480 / 768 / 1024 / 1280
   используются напрямую в responsive.css */

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}