/* ==========================================================================
   BASE.CSS — Общие стили для сети эзотерических сайтов
   Mobile-first | Dark mode | CSS Grid + Flexbox
   Шрифты: Playfair Display (заголовки), Inter (текст)
   ========================================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ==========================================================================
   1. CSS RESET (Modern)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ==========================================================================
   2. CSS ПЕРЕМЕННЫЕ (темы)
   ========================================================================== */

:root {
  /* --- Базовые цвета (dark mode по умолчанию) --- */
  --color-bg:             #0a0a12;
  --color-bg-secondary:   #12121e;
  --color-bg-tertiary:    #1a1a2e;
  --color-bg-card:        #16162a;
  --color-bg-elevated:    #1e1e38;

  --color-text:           #e8e6f0;
  --color-text-secondary: #a8a4b8;
  --color-text-muted:     #6b6780;
  --color-text-heading:   #f0eef5;

  --color-border:         #2a2a44;
  --color-border-light:   #3a3a58;

  /* --- Акцентные цвета (переопределяются темой ниши) --- */
  --color-accent:         #9b72cf;
  --color-accent-light:   #b894e0;
  --color-accent-dark:    #7b52af;
  --color-accent-glow:    rgba(155, 114, 207, 0.25);

  --color-gold:           #ffd700;
  --color-gold-soft:      #e8d5b7;

  /* --- Семантические цвета --- */
  --color-success:        #34d399;
  --color-warning:        #fbbf24;
  --color-error:          #f87171;
  --color-info:           #60a5fa;

  /* --- Тема: Таро --- */
  --taro-bg:              #1a0a2e;
  --taro-accent:          #ffd700;

  /* --- Тема: Ангельские числа --- */
  --angel-bg:             #0a1628;
  --angel-accent:         #e8d5b7;

  /* --- Тема: Нумерология --- */
  --numer-bg:             #0d1117;
  --numer-accent:         #00d4ff;

  /* --- Тема: Сонник --- */
  --sonnik-bg:            #0f0a1a;
  --sonnik-accent:        #c084fc;

  /* --- Тема: Астрология --- */
  --astro-bg:             #030816;
  --astro-accent:         #f59e0b;

  /* --- Тема: Руны --- */
  --runes-bg:             #1a1410;
  --runes-accent:         #cd853f;

  /* --- Тема: Лунный календарь --- */
  --moon-bg:              #0a0e1a;
  --moon-accent:          #e2e8f0;

  /* --- Тема: Защита/ритуалы --- */
  --protection-bg:        #1a0000;
  --protection-accent:    #ff4444;

  /* --- Типографика --- */
  --font-heading:         'Playfair Display', 'Georgia', serif;
  --font-body:            'Inter', 'Segoe UI', system-ui, sans-serif;

  --text-xs:              0.75rem;    /* 12px */
  --text-sm:              0.875rem;   /* 14px */
  --text-base:            1rem;       /* 16px */
  --text-lg:              1.125rem;   /* 18px */
  --text-xl:              1.25rem;    /* 20px */
  --text-2xl:             1.5rem;     /* 24px */
  --text-3xl:             1.875rem;   /* 30px */
  --text-4xl:             2.25rem;    /* 36px */
  --text-5xl:             3rem;       /* 48px */

  --leading-tight:        1.2;
  --leading-normal:       1.6;
  --leading-relaxed:      1.8;

  --tracking-tight:       -0.02em;
  --tracking-normal:      0;
  --tracking-wide:        0.02em;
  --tracking-wider:       0.05em;
  --tracking-caps:        0.1em;

  /* --- Отступы --- */
  --space-xs:             0.25rem;    /* 4px */
  --space-sm:             0.5rem;     /* 8px */
  --space-md:             1rem;       /* 16px */
  --space-lg:             1.5rem;     /* 24px */
  --space-xl:             2rem;       /* 32px */
  --space-2xl:            3rem;       /* 48px */
  --space-3xl:            4rem;       /* 64px */
  --space-4xl:            6rem;       /* 96px */

  /* --- Контейнер --- */
  --container-sm:         640px;
  --container-md:         768px;
  --container-lg:         1024px;
  --container-xl:         1200px;
  --container-padding:    1rem;

  /* --- Скругления --- */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;
  --radius-full:          9999px;

  /* --- Тени --- */
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:            0 8px 30px rgba(0, 0, 0, 0.6);
  --shadow-glow:          0 0 20px var(--color-accent-glow);

  /* --- Анимации --- */
  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:        150ms;
  --duration-normal:      300ms;
  --duration-slow:        500ms;

  /* --- Z-index --- */
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-overlay:            300;
  --z-modal:              400;
  --z-toast:              500;
}

/* ==========================================================================
   3. БАЗА (Dark mode)
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* ==========================================================================
   4. ТИПОГРАФИКА
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-md);
}

h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

h4 {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 600;
  color: var(--color-text);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

blockquote {
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  border-left: 3px solid var(--color-accent);
  background-color: var(--color-bg-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}

/* --- Списки --- */

ul.list,
ol.list {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
}

ul.list {
  list-style: disc;
}

ol.list {
  list-style: decimal;
}

ul.list li,
ol.list li {
  margin-bottom: var(--space-xs);
  padding-left: var(--space-xs);
}

ul.list li::marker {
  color: var(--color-accent);
}

ol.list li::marker {
  color: var(--color-accent);
  font-weight: 600;
}

/* --- Ссылки --- */

a.link {
  color: var(--color-accent-light);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

a.link:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* --- Разделитель --- */

hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-light) 20%,
    var(--color-accent-glow) 50%,
    var(--color-border-light) 80%,
    transparent
  );
  margin: var(--space-2xl) 0;
}

/* ==========================================================================
   5. LAYOUT — Контейнер, секции, сетка
   ========================================================================== */

/* --- Контейнер --- */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--sm {
  max-width: var(--container-sm);
}

.container--md {
  max-width: var(--container-md);
}

.container--lg {
  max-width: var(--container-lg);
}

/* --- Секции --- */

.section {
  padding-block: var(--space-2xl);
}

.section--hero {
  padding-block: var(--space-3xl);
  text-align: center;
}

.section--alt {
  background-color: var(--color-bg-secondary);
}

/* --- CSS Grid --- */

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* --- Flexbox --- */

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ==========================================================================
   6. КОМПОНЕНТЫ — Карточки, кнопки, бейджи
   ========================================================================== */

/* --- Карточка --- */

.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.card:hover {
  border-color: var(--color-border-light);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: var(--space-sm);
}

.card__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* --- Кнопки --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-md);
  transition: all var(--duration-normal) var(--ease-out);
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff;
  box-shadow: 0 2px 10px var(--color-accent-glow);
}

.btn--primary:hover {
  box-shadow: 0 4px 20px var(--color-accent-glow);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--color-accent-light);
  border: 1px solid var(--color-accent);
}

.btn--secondary:hover {
  background-color: var(--color-accent-glow);
}

.btn--gold {
  background: linear-gradient(135deg, var(--color-gold), #e6b800);
  color: #1a0a2e;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.btn--gold:hover {
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
  transform: translateY(-1px);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-xs);
}

.btn--full {
  width: 100%;
}

/* --- Бейдж --- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-glow);
  color: var(--color-accent-light);
  border: 1px solid var(--color-accent);
}

/* ==========================================================================
   7. ТАБЛИЦЫ
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.table {
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.table th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
  background-color: var(--color-bg-tertiary);
}

.table td {
  color: var(--color-text-secondary);
}

.table tbody tr {
  transition: background-color var(--duration-fast);
}

.table tbody tr:hover {
  background-color: var(--color-bg-secondary);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   8. УТИЛИТЫ
   ========================================================================== */

/* --- Текст --- */
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }
.text-accent   { color: var(--color-accent); }
.text-gold     { color: var(--color-gold); }
.text-muted    { color: var(--color-text-muted); }
.text-sm       { font-size: var(--text-sm); }
.text-lg       { font-size: var(--text-lg); }
.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

/* --- Отступы --- */
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* --- Отображение --- */
.hidden    { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Эффекты --- */
.glow {
  box-shadow: var(--shadow-glow);
}

.gradient-text {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fade-in {
  animation: fadeIn var(--duration-slow) var(--ease-out);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px var(--color-accent-glow); }
  50%      { box-shadow: 0 0 25px var(--color-accent-glow); }
}

/* ==========================================================================
   9. МЕДИА-ЗАПРОСЫ (Mobile-first)
   ========================================================================== */

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
  :root {
    --container-padding: 1.5rem;
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }

  .section {
    padding-block: var(--space-3xl);
  }

  .section--hero {
    padding-block: var(--space-4xl);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
  :root {
    --container-padding: 2rem;
  }

  h1 { font-size: var(--text-5xl); }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Wide (1440px+) --- */
@media (min-width: 1440px) {
  :root {
    --text-base: 1.0625rem;
  }
}

/* --- Small mobile (320px-374px) --- */
@media (max-width: 374px) {
  :root {
    --text-base: 0.9375rem;
    --container-padding: 0.75rem;
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }

  .btn {
    padding: 0.625rem 1.25rem;
  }
}