/*!
 * Путь: /wp-content/themes/sml-theme/assets/css/core.css
 * Описание: Глобальные дизайн-токены SML (цвета, типографика, радиусы, тени), базовые элементы UI (кнопки/ссылки/типографика),
 *           системные анимации и доступность (focus, reduce-motion).
 * Версия: 1.1.0
 * Автор: NUVREN / Nuvren.com
 */

/* Manrope: как в предыдущих версиях темы */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
  /* ─────────────────────────────
     Colors (tokens)
     ───────────────────────────── */
  --sml-brand: #438239;                 /* Brand Green */
  --sml-ink: #121612;                   /* Ink */
  --sml-muted: rgba(18,22,18,0.62);     /* Muted */
  --sml-border: rgba(18,22,18,0.10);    /* Border */
  --sml-border-strong: rgba(18,22,18,0.16); /* Border strong (derived) */
  --sml-surface: rgba(var(--sml-surface-rgb), 0.82);/* Surface *//* Surface */
  --sml-surface-solid: #F7F3EA;         /* Surface solid (warm, not white) */         /* Surface solid */
  --sml-surface-muted: rgba(var(--sml-surface-2-rgb), 0.74); /* Muted surface */
  --sml-surface-2: rgba(var(--sml-surface-2-rgb), 0.72);     /* Surface 2 */

  --sml-dark-surface: #0b0e0b;          /* Dark surface */
  --sml-overlay: rgba(0,0,0,0.55);      /* Overlay */
  --sml-ring-color: rgba(67,130,57,0.35); /* Ring */

  /* Derived brand tones (hover/press) */
  --sml-brand-hover: #3e7935;
  --sml-brand-press: #3b7232;

  /* Background for site (light, but not “white screen”) */
  --sml-bg: #F3F0E8;

  /* ─────────────────────────────
     Typography (tokens)
     ───────────────────────────── */
  --sml-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ─────────────────────────────
     Layout (tokens)
     ───────────────────────────── */
  --sml-container: 1240px;
  --sml-gutter: 32px;     /* desktop */
  --sml-gap: 16px;        /* grid gap 14–18 */

  /* ─────────────────────────────
     Radius & shadow (tokens)
     ───────────────────────────── */
  --sml-radius-sm: 12px;
  --sml-radius-lg: 18px;
  --sml-radius: 18px; /* Base radius (alias) */

  --sml-shadow-sm: 0 14px 36px rgba(18,22,18,0.06);
  --sml-shadow-md: 0 18px 54px rgba(18,22,18,0.10);
  --sml-shadow-lg: 0 34px 110px rgba(18,22,18,0.18);

  /* ─────────────────────────────
     Motion (tokens)
     ───────────────────────────── */
  --sml-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sml-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* alias */
  --sml-dur-1: 140ms;
  --sml-dur-2: 220ms;
  --sml-dur-3: 360ms;

  /* Focus ring */
  --sml-ring: 0 0 0 3px var(--sml-ring-color), 0 0 0 1px rgba(67,130,57,0.55);
}

@media (max-width: 1023px) {
  :root { --sml-gutter: 28px; } /* tablet */
}
@media (max-width: 767px) {
  :root { --sml-gutter: 20px; } /* mobile */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sml-font);
  background: var(--sml-bg);
  color: var(--sml-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

/* Accessible skip link */
.sml-skip {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(var(--sml-surface-rgb), 0.92);
  color: var(--sml-ink);
  border: 1px solid rgba(18,22,18,0.14);
  box-shadow: var(--sml-shadow-sm);
  transform: translateY(-140%);
  transition: transform var(--sml-dur-1) var(--sml-ease);
  z-index: 120;
}
.sml-skip:focus { transform: translateY(0); }

/* Anchor targets should not hide behind sticky header */
:where([id]) { scroll-margin-top: 100px; }

/* Base links */
a { color: var(--sml-ink); text-decoration: none; }
a:hover { color: var(--sml-brand); }

/* Selection */
::selection { background: rgba(67,130,57,0.18); }

/* Helper for dark sections */
.sml-on-dark { color: #fff; }
.sml-on-dark a { color: rgba(255,255,255,0.88); }
.sml-on-dark a:hover { color: rgba(255,255,255,1); }

/* ─────────────────────────────────────────────────────────────
   Type scale
   ───────────────────────────────────────────────────────────── */

.sml-h1 {
  font-weight: 850;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.10;
  font-size: 34px; /* mobile (30–34) */
}

.sml-h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.20;
  font-size: 24px; /* mobile (22–24) */
}

.sml-h3 {
  font-weight: 780;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.25;
  font-size: 19px; /* 18–20 */
}

@media (min-width: 768px) {
  .sml-h1 { font-size: 40px; } /* tablet (34–40) */
  .sml-h2 { font-size: 28px; } /* tablet (24–28) */
}
@media (min-width: 1024px) {
  .sml-h1 { font-size: 56px; } /* desktop (44–56) */
  .sml-h2 { font-size: 34px; } /* desktop (28–34) */
}

/* Lead / Body */
.sml-lead {
  margin: 14px 0 0;
  font-weight: 470;
  font-size: 17px; /* mobile (16–18) */
  line-height: 1.65;
}
@media (min-width: 1024px) {
  .sml-lead { font-size: 19px; } /* desktop (18–20) */
}

.sml-sub {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sml-muted);
}

.sml-muted { color: var(--sml-muted); }

/* Meta (uppercase) */
.sml-meta {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 760;
  line-height: 1.2;
}

/* Eyebrow (hero) */
.sml-eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 760;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.88);
}

/* ─────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────── */

.sml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 750;
  letter-spacing: 0.01em;
  border: 1px solid rgba(67,130,57,0.38);
  background: var(--sml-brand);
  color: #fff;
  transition: background var(--sml-dur-2) var(--sml-ease), transform var(--sml-dur-2) var(--sml-ease), box-shadow var(--sml-dur-2) var(--sml-ease), border-color var(--sml-dur-2) var(--sml-ease);
  box-shadow: 0 14px 36px rgba(67,130,57,0.16);
  transform: translateY(0);
}

.sml-btn:hover {
  background: var(--sml-brand-hover);
  border-color: rgba(67,130,57,0.46);
  color: #fff;
}

.sml-btn:active {
  background: var(--sml-brand-press);
  transform: translateY(1px);
  color: #fff;
}

.sml-btn:focus-visible {
  outline: none;
  box-shadow: var(--sml-ring), 0 18px 54px rgba(67,130,57,0.16);
}

/* Ghost button */
.sml-btn--ghost {
  background: transparent;
  border: 1px solid var(--sml-border);
  color: var(--sml-ink);
  box-shadow: none;
}

.sml-btn--ghost:hover { background: rgba(18,22,18,0.06); color: var(--sml-ink); }
.sml-btn--ghost:active { background: rgba(18,22,18,0.09); transform: translateY(1px); color: var(--sml-ink); }
.sml-btn--ghost:focus-visible { outline: none; box-shadow: var(--sml-ring); }

/* Ghost на тёмном фоне (hero и т.п.) */
.sml-on-dark .sml-btn--ghost,
[data-sml-on-dark="true"] .sml-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  background: transparent;
}
.sml-on-dark .sml-btn--ghost:hover,
[data-sml-on-dark="true"] .sml-btn--ghost:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.sml-on-dark .sml-btn--ghost:active,
[data-sml-on-dark="true"] .sml-btn--ghost:active {
  background: rgba(255,255,255,0.14);
  transform: translateY(1px);
  color: #fff;
}

.sml-btn--wide { width: 100%; }

/* ─────────────────────────────────────────────────────────────
   Pills (meta pills)
   ───────────────────────────────────────────────────────────── */

.sml-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sml-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
}

.sml-on-dark .sml-pill { color: rgba(255,255,255,0.92); }

/* Light variant (if needed in light sections) */
.sml-pill--light {
  color: rgba(18,22,18,0.88);
  background: rgba(255,255,255,0.10);
  border-color: rgba(18,22,18,0.10);
  backdrop-filter: none;
}

/* ─────────────────────────────────────────────────────────────
   Generic focus for interactive elements
   ───────────────────────────────────────────────────────────── */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--sml-ring);
  border-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────
   Reveal system (translateY 12px → 0, opacity 0 → 1, 360ms)
   ───────────────────────────────────────────────────────────── */
[data-sml-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--sml-dur-3) var(--sml-ease), transform var(--sml-dur-3) var(--sml-ease);
  will-change: opacity, transform;
}
[data-sml-reveal].is-in { opacity: 1; transform: translateY(0); }

/* Scroll lock для overlay */
html.sml-lock, html.sml-lock body { overflow: hidden; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  [data-sml-reveal] { transition: none; transform: none; opacity: 1; }
  .sml-btn { transition: none; }
}