/* ==========================================================================
   ShowGo.uz — дизайн-токены
   Единственное место, где живут цвета, размеры, радиусы, тени и ритм.
   Значения подобраны под визуальную систему информационного сайта:
   светлый фон, графитовые «плиты» секций, один янтарный акцент.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Бренд-акцент. В палитре ровно один цветной тон --- */
  --color-primary: #ffc32a;
  --color-primary-hover: #e5a800;
  --color-primary-light: #ffd75e;
  --color-primary-soft: #fff7e0;
  --color-primary-gradient: linear-gradient(
    135deg,
    var(--color-primary-hover) 0%,
    var(--color-primary) 52%,
    var(--color-primary-light) 100%
  );
  /* Текст поверх янтарной заливки — только тёмный: жёлтый фон светлый.
     Эти два токена одинаковы в обеих темах: жёлтый цвет не меняется */
  --color-on-primary: #14161c;
  --color-on-primary-muted: rgba(20, 22, 28, 0.72);

  /* Янтарный, пригодный для текста на светлой подложке: сам --color-primary
     на белом не проходит по контрасту */
  --color-primary-ink: #8a6400;

  /* Графит, который не переопределяется в тёмной теме: используется там,
     где элемент всегда лежит на жёлтой заливке */
  --color-ink-fixed: #14161c;

  /* --- Графит: тёмные секции, сплошные кнопки, футер --- */
  --color-accent: #14161c;
  --color-accent-gradient: linear-gradient(152deg, #2b313d 0%, #14161c 72%);

  /* --- Поверхности --- */
  --color-background: #ffffff;
  --color-background-alt: #f6f7f9;
  --color-surface: #ffffff;

  /* Иконка на бледно-янтарной подложке карточки */
  --color-icon-ink: #14161c;

  /* --- Текст на светлом --- */
  --color-text: #14161c;
  --color-text-body: #575b68;
  --color-text-muted: #6b6f7c;
  --color-text-label: #8a8e9b;

  /* --- Текст и линии на графитовой плите --- */
  --color-on-dark: #ffffff;
  --color-on-dark-body: rgba(255, 255, 255, 0.74);
  --color-on-dark-muted: rgba(255, 255, 255, 0.62);
  --color-on-dark-label: #b8bcc8;
  --line-on-dark: rgba(255, 255, 255, 0.22);
  --line-on-dark-soft: rgba(255, 255, 255, 0.12);
  --fill-on-dark: rgba(255, 255, 255, 0.06);
  --fill-on-dark-strong: rgba(255, 255, 255, 0.12);

  /* --- Границы --- */
  --color-border: #ececf1;
  --color-border-strong: #dcdce3;

  /* --- Состояния форм --- */
  --color-success: #15803d;
  --color-success-bg: rgba(34, 197, 94, 0.1);
  --color-success-border: rgba(34, 197, 94, 0.34);
  --color-danger: #b42318;
  --color-danger-bg: rgba(214, 40, 40, 0.08);
  --color-danger-border: rgba(214, 40, 40, 0.38);

  /* --- WhatsApp.
         Цвет фирменный, поэтому в тёмной теме он тот же: узнаваемость важнее
         подгонки под палитру. Меняется только тень под кнопкой. --- */
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #1eb556;
  --shadow-whatsapp: 0 10px 26px rgba(37, 211, 102, 0.36);

  /* --- Сетка и ритм.
         Все отступы сайта живут здесь и растут вместе с окном через clamp():
         отдельных значений «под телефон» и «под десктоп» в правилах нет.
         --container-padding — поля контейнера,
         --section-spacing   — вертикальный ритм между секциями,
         --content-gap       — зазор между смысловыми блоками внутри секции,
         --split-gap         — зазор между колонками «текст + иллюстрация»,
         --grid-gap          — зазор в сетках карточек. --- */
  --container-width: 1320px;
  --container-padding: clamp(16px, 4vw, 48px);
  --section-spacing: clamp(56px, 8vw, 120px);
  --content-gap: clamp(24px, 5vw, 64px);
  --split-gap: clamp(32px, 5vw, 72px);
  --grid-gap: clamp(16px, 2vw, 24px);
  --header-height: 72px;

  /* Ширина иллюстрации, когда парная секция схлопнулась в одну колонку:
     без неё картинка растягивается на всю ширину планшета */
  --figure-stacked-width: 560px;

  /* --- Скругления --- */
  --radius-small: 14px;
  --radius-medium: 18px;
  --radius-large: 26px;
  --radius-pill: 999px;

  /* --- Тени. Мягкие и редкие: глубину держит граница, а не размытие --- */
  --shadow-card: 0 4px 24px rgba(16, 18, 27, 0.06);
  --shadow-card-hover: 0 18px 44px rgba(16, 18, 27, 0.12);
  --shadow-header: 0 2px 16px rgba(16, 18, 27, 0.06);
  --shadow-primary: 0 8px 22px rgba(229, 168, 0, 0.32);
  --shadow-panel: 0 30px 70px rgba(16, 18, 27, 0.28);

  /* --- Типографика --- */
  --font-sans:
    "Inter", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", system-ui,
    sans-serif;
  --text-h1: clamp(38px, 5.6vw, 72px);
  --text-h2: clamp(30px, 4.4vw, 50px);
  --text-h3: clamp(19px, 1.6vw, 22px);
  --text-lead: clamp(16px, 1.5vw, 19px);
  --text-body: 16px;
  --text-label: 14px;

  /* --- Анимация --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.2s;
  --duration: 0.35s;
  --duration-slow: 0.6s;

  /* --- Затемнение под мобильным меню --- */
  --scrim: rgba(16, 18, 27, 0.55);

  --z-header: 100;
  /* Плавающая кнопка: выше содержимого, но ниже шапки и мобильного меню */
  --z-float: 90;
  --z-menu: 200;
}

/* ==========================================================================
   Тёмная тема. Переопределяются только токены — правила остаются прежними.
   Атрибут data-theme ставит js/theme.js (и небольшой скрипт в <head>,
   чтобы при загрузке не мелькал светлый экран).
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --color-background: #0f1115;
  --color-background-alt: #15181e;
  --color-surface: #171a21;

  /* Выделенные плиты в тёмной теме не тонут в фоне, а становятся светлее его:
     смысл «эта секция выделена» сохраняется, направление контраста меняется */
  --color-accent: #1c2028;
  --color-accent-gradient: linear-gradient(152deg, #262c37 0%, #1c2028 72%);

  /* Чистый белый на тёмном «звенит» на длинных абзацах */
  --color-text: #e7e9ee;
  --color-text-body: #b5bbc6;
  --color-text-muted: #a1a8b5;
  --color-text-label: #8b93a1;

  --color-border: #262b34;
  --color-border-strong: #333944;

  /* Бледно-жёлтая подложка на тёмном превращается в тёмно-янтарную,
     а иконка на ней — в светлую */
  --color-primary-soft: #2a2312;
  --color-icon-ink: var(--color-primary-light);
  --color-primary-ink: var(--color-primary-light);

  /* Тёмные #15803d и #b42318 на тёмном фоне нечитаемы */
  --color-success: #4ade80;
  --color-success-bg: rgba(74, 222, 128, 0.12);
  --color-success-border: rgba(74, 222, 128, 0.32);
  --color-danger: #ff6b6b;
  --color-danger-bg: rgba(255, 107, 107, 0.1);
  --color-danger-border: rgba(255, 107, 107, 0.4);

  /* Зелёное свечение на тёмном фоне выглядит грязно — берём обычную тень */
  --shadow-whatsapp: 0 10px 26px rgba(0, 0, 0, 0.5);

  /* Тень на тёмном фоне не видна — её роль берёт на себя кант */
  --shadow-card: 0 0 0 1px var(--color-border);
  --shadow-card-hover:
    0 0 0 1px var(--color-border-strong), 0 24px 48px rgba(0, 0, 0, 0.5);
  --shadow-header:
    0 1px 0 0 var(--color-border), 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-primary: 0 8px 22px rgba(0, 0, 0, 0.5);

  --scrim: rgba(0, 0, 0, 0.7);
}