/* SEO Site Themes — Modern (default) + Editorial */
/* All theme differences live as CSS variables. Switch via html[data-theme]. */

:root,
:root[data-theme="modern"] {
  --bg: #FFFFFF;
  --bg-alt: #F4F4F8;
  --surface: #FFFFFF;
  --surface-alt: #FAFAFC;
  --text: #0A0A14;
  --muted: #5A5A6A;
  --accent: #5B3DF5;
  --accent-bg: #F1EFFD;
  --border: #E8E8ED;
  --border-strong: #0A0A14;
  --shadow-card: 0 1px 3px rgba(10, 10, 20, 0.05);
  --shadow-elevated: 0 4px 16px rgba(10, 10, 20, 0.08);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --font-h1-weight: 700;
  --font-body-weight: 400;
  --use-mono-meta: 0;
}

:root[data-theme="editorial"] {
  --bg: #FFFFFF;
  --bg-alt: #F8F7F2;
  --surface: #FFFFFF;
  --surface-alt: #FAFAFA;
  --text: #0A0A14;
  --muted: #5A5A6A;
  --accent: #5B3DF5;
  --accent-bg: #F4F2FF;
  --border: #E8E8ED;
  --border-strong: #0A0A14;
  --shadow-card: none;
  --shadow-elevated: none;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;
  --font-h1-weight: 800;
  --font-body-weight: 400;
  --use-mono-meta: 1;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  font-weight: var(--font-body-weight);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Anti-AI rules from claude/seo-design.md */
* { font-style: normal; }
a { text-decoration: underline; color: var(--accent); }
a:hover { opacity: 0.8; }
button, .btn { text-decoration: none; }
em, i { font-style: normal; font-weight: 600; }

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1440px) { .container { max-width: 1280px; } }

/* Typography */
h1, h2, h3, h4 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0; color: var(--text); }
h1 { font-weight: var(--font-h1-weight); font-size: clamp(40px, 6vw, 80px); }
h2 { font-size: clamp(28px, 3.5vw, 44px); margin-bottom: 16px; }
h3 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 8px; }
p { margin: 0 0 12px; }
.lede { color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; max-width: 60ch; }
.meta-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; opacity: 0.55; letter-spacing: 0.08em; text-transform: uppercase; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-family: inherit; font-size: 15px; font-weight: 600; border: 0; cursor: pointer; min-height: 44px; border-radius: var(--radius-pill); }
:root[data-theme="editorial"] .btn { border-radius: 0; }
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text); }
.btn:hover { opacity: 0.9; text-decoration: none; }

/* Cards */
.card { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 24px; }
:root[data-theme="editorial"] .card { box-shadow: none; border: 1px solid var(--border); border-radius: 0; }

/* Sections — щедрый вертикальный ритм, чтобы № XX-метки дышали.
   ВАЖНО: padding-top/bottom отдельно (не shorthand!), иначе .container shorthand
   `padding: 0 20px` перебивает vertical padding из-за более высокой specificity. */
section { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
section.container, section .container { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
section:first-of-type { padding-top: clamp(24px, 3vw, 40px); }
section .meta-mono:first-child { margin-top: 0; }

/* Чередующийся фон секций. Пары section.container + section.container получают tinted background. */
/* В Modern: основной #FFFFFF, alt #F4F4F8 (заметно темнее, реальное разделение). */
section[id="examples"],
section[id="how"],
section[id="vs"],
section[id="proof"],
section[id="artists"],
section[id="about"] {
  background: var(--bg-alt);
}
/* full-width tinted sections (без .container класса на самом section) */
section[id="examples"] { padding-left: 0; padding-right: 0; }

/* Editorial использует контурные разделители вместо фоновой заливки */
:root[data-theme="editorial"] section[id="examples"],
:root[data-theme="editorial"] section[id="how"],
:root[data-theme="editorial"] section[id="vs"],
:root[data-theme="editorial"] section[id="proof"],
:root[data-theme="editorial"] section[id="artists"],
:root[data-theme="editorial"] section[id="about"] {
  background: transparent;
}
:root[data-theme="editorial"] section + section { border-top: 1px solid var(--border); }

/* Navigation */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
:root[data-theme="editorial"] .nav { box-shadow: none; border-bottom: 1px solid var(--border-strong); border-radius: 0; padding: 12px 20px; background: transparent; }
.nav-logo { font-weight: 800; font-size: 18px; letter-spacing: -0.03em; color: var(--text); text-decoration: none; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-links a:hover { color: var(--text); }

/* Footer */
.footer { padding: 48px 0 32px; border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.footer-col a { display: block; color: var(--muted); text-decoration: none; font-size: 14px; padding: 4px 0; }
.footer-col a:hover { color: var(--text); }

/* Mobile */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .container { padding: 0 16px; }
}

/* Hover only on hover-capable devices */
@media (hover: none) {
  .btn:hover, a:hover { opacity: 1; }
}

/* Focus a11y */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }