/*
Theme Name: Выгодная сделка
Theme URI:
Author: ИТ СумникоФФ
Description: Кастомная тема WordPress для проекта «Выгодная сделка». Стартовый каркас по архитектуре проекта «Горки».
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: vygodnaya-sdelka
*/

/* ----------------------------------------------------------
   01. Локальные шрифты
   Файлы разместить в assets/fonts/
   ---------------------------------------------------------- */

@font-face {
  font-family: "Forum";
  src: url("assets/fonts/Forum.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* ----------------------------------------------------------
   02. Дизайн-токены
   ---------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Шрифты */
  --font-heading: "Forum", Georgia, serif;
  --font-main: "Open Sans", Arial, sans-serif;

  /* Background */
  --color-background-base: #191a1c;
  --color-background-dark: #0b0c0d;

  /* Surface / Neutral */
  --color-surface-card: #1f1f1f;
  --color-neutral-white: #ffffff;
  --color-neutral-black: #000000;
  --color-neutral-gray-200: #d9d9d9;

  /* Text */
  --color-text-primary: #f0ede5;
  --color-text-secondary: #8f8c85;
  --color-text-muted: #b8b2a8;
  --color-text-on-gold: #191917;

  /* Accent */
  --color-accent-gold: #c79a5b;

  /* Border */
  --color-border-gold-15: rgba(253, 236, 220, 0.15);
  --color-border-gold-31: rgba(253, 236, 220, 0.31);

  /* Overlay */
  --color-overlay-black-85: rgba(0, 0, 0, 0.85);
  --color-overlay-warm-24: rgba(43, 42, 39, 0.24);
  --color-overlay-process-80: rgba(4, 4, 5, 0.8);

  /* Алиасы для совместимости с существующими CSS */
  --color-background: var(--color-background-base);
  --color-surface: var(--color-surface-card);
  --color-text: var(--color-text-primary);
  --color-muted: var(--color-text-muted);
  --color-border: var(--color-border-gold-15);
  --color-accent: var(--color-accent-gold);

  /* Типографика: размеры / межстрочные интервалы */
  --font-size-h1: 56px;
  --line-height-h1: 64px;

  --font-size-h2: 48px;
  --line-height-h2: 56px;

  --font-size-h3: 24px;
  --line-height-h3: 32px;

  --font-size-p1: 20px;
  --line-height-p1: 28px;

  --font-size-p2: 16px;
  --line-height-p2: 24px;

  --font-size-p3: 14px;
  --line-height-p3: 20px;

  --font-size-descriptor: 16px;
  --line-height-descriptor: 20px;

  /* Сетка и геометрия */
  --container-width: 1240px;
  --page-gutter: clamp(20px, 4vw, 48px);
  --header-height: 80px;
}

/* ----------------------------------------------------------
   03. Базовые стили
   ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--font-size-p2);
  font-weight: 400;
  line-height: var(--line-height-p2);
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------
   04. Типографика
   ---------------------------------------------------------- */

h1,
.text-h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: 400;
  line-height: var(--line-height-h1);
}

h2,
.text-h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: 400;
  line-height: var(--line-height-h2);
}

h3,
.text-h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: 400;
  line-height: var(--line-height-h3);
}

.text-p1 {
  font-family: var(--font-main);
  font-size: var(--font-size-p1);
  font-weight: 400;
  line-height: var(--line-height-p1);
}

.text-p2 {
  font-family: var(--font-main);
  font-size: var(--font-size-p2);
  font-weight: 400;
  line-height: var(--line-height-p2);
}

.text-p3 {
  font-family: var(--font-main);
  font-size: var(--font-size-p3);
  font-weight: 400;
  line-height: var(--line-height-p3);
}

.text-descriptor {
  font-family: var(--font-main);
  font-size: var(--font-size-descriptor);
  font-weight: 600;
  line-height: var(--line-height-descriptor);
}

.text-gold {
  color: var(--color-accent-gold);
}

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

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

/* ----------------------------------------------------------
   05. Общие элементы
   ---------------------------------------------------------- */

img,
video,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

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

button {
  cursor: pointer;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.container {
  width: min(100% - 2 * var(--page-gutter), var(--container-width));
  margin-inline: auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed;
  z-index: 99999;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  margin: 0;
  overflow: visible;
  clip: auto;
  background: var(--color-neutral-white);
  color: var(--color-neutral-black);
}

.site-main {
  min-height: 45vh;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}