/**
 * Фирменный стиль ГК АУРА — единый источник для всех поверхностей:
 * лендинг solaura.ru, портал b2b.solaura.ru (цифровые лицензии и оборудование),
 * кабинет партнёра crm.solaura.ru.
 *
 * Источник правил — «Фирменный стиль ГК АУРА 2021» (aura_firmstyle.pdf):
 *   • цвета — раздел «Основные и дополнительные цвета» (стр. 15);
 *   • шрифты — 5.1 Comfortaa (заголовки), 5.2 Roboto (текст);
 *   • паттерн — «зашифрованное слово aura»: кружки = «a», палочки = «u+r» (стр. 17).
 *
 * Ничего не выдумано: все значения взяты из гайда. Менять их можно только вместе
 * с гайдом, иначе поверхности разъедутся между собой.
 */

/* ─────────────────────────── Шрифты ───────────────────────────
   Начертания из папки 5_fonts гайда, сабсет «кириллица+латиница» и woff2:
   873 КБ TTF → 107 КБ. Comfortaa — OFL, Roboto — Apache 2.0, самохостинг легален.
   Гайд (5.3) рекомендовал для сайта системную Verdana — это ограничение 2021 года,
   когда веб-шрифты были дороги. Ставим фирменные Comfortaa+Roboto: они и есть
   опознавательный знак бренда, а Verdana оставлена запасным вариантом в стеке. */

@font-face {
  font-family: 'Comfortaa';
  src: url('/fonts/Comfortaa-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('/fonts/Comfortaa-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('/fonts/Comfortaa-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Фирменные цвета (стр. 15 гайда) ───
     Синий доминирует: его отношение к белому и оранжевому — 5:1.
     Практически это значит: синий — фон и основные плоскости, оранжевый —
     только акцент (действие, статус, выделение), никогда не заливка полполосы. */
  --aura-blue: #03829e;   /* RGB 3 130 158   · CMYK 100 25 25 0 — доминирующий */
  --aura-orange: #ff840b; /* RGB 255 132 11  · CMYK 0 50 100 0  — акцент 1/5 */
  --aura-white: #ffffff;  /* CMYK 0 0 0 0 */
  --aura-black: #000000;  /* CMYK 0 0 0 100 — дополнительный */

  /* Градиенты из гайда: от оранжевого к белому, от синего к белому */
  --aura-gradient-blue: linear-gradient(180deg, var(--aura-blue), var(--aura-white));
  --aura-gradient-orange: linear-gradient(180deg, var(--aura-orange), var(--aura-white));

  /* Производные оттенки для интерфейса. В гайде их нет — он про печать,
     а экрану нужны состояния (наведение, подложка, граница). Все получены
     из фирменных цветов, чтобы не завести «пятый цвет» мимо стиля. */
  --aura-blue-hover: #026c84;
  --aura-blue-deep: #064e60;
  --aura-blue-tint: #e2f0f3;
  --aura-orange-hover: #e57209;
  --aura-orange-tint: #fff0e0;

  /* Нейтрали со сдвигом в синий — чтобы серый не выглядел «чужим» рядом с бирюзой */
  --aura-ground: #f1f5f6;
  --aura-surface: #ffffff;
  --aura-surface-2: #e9f1f2;
  --aura-ink: #0c242a;
  --aura-ink-soft: #3e555b;
  --aura-muted: #6e868c;
  --aura-line: #d8e4e6;
  --aura-line-strong: #bfd2d5;

  /* Семантика статусов (отдельно от акцента: оранжевый — это бренд, а не «внимание») */
  --aura-good: #10924b;
  --aura-good-tint: #e6f5ed;
  --aura-warn: #b6790a;
  --aura-warn-tint: #fbf1dc;
  --aura-danger: #c0392f;
  --aura-danger-tint: #fbeae8;

  /* ─── Типографика (5.1, 5.2 гайда) ───
     Comfortaa — заголовки, крупные надписи, слоганы. В одном макете
     разрешены любые ДВА начертания из трёх; берём Light + Bold.
     Roboto — объёмные тексты и подписи (Medium — для подписей).
     Моноширинный гайдом не предусмотрен, но кодам активации, ИНН и суммам
     нужны одноширинные цифры — берём системный. */
  --aura-font-display: 'Comfortaa', 'Verdana', system-ui, sans-serif;
  --aura-font-text: 'Roboto', 'Verdana', system-ui, sans-serif;
  --aura-font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;

  --aura-radius: 12px;
  --aura-radius-sm: 8px;
  --aura-radius-lg: 20px;
  --aura-shadow: 0 1px 2px rgba(6, 40, 48, 0.05), 0 10px 30px rgba(6, 40, 48, 0.06);
  --aura-shadow-lg: 0 20px 60px rgba(6, 40, 48, 0.14);
}

/* Тёмная тема. В гайде её нет (он про печать), поэтому правило выведено из его же
   логики: синий остаётся доминирующим, но на тёмном фоне исходный #03829e слепнет —
   берём осветлённый вариант того же тона, оранжевый чуть теплее. Соотношение 5:1
   сохраняется. Порядок блоков важен: сначала системная тема, затем явный выбор. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --aura-blue: #33adc8;
    --aura-blue-hover: #4cbbd4;
    --aura-blue-deep: #9ad9e5;
    --aura-blue-tint: #0f2e38;
    --aura-orange: #ff9a33;
    --aura-orange-hover: #ffab55;
    --aura-orange-tint: #2a2012;

    --aura-ground: #08191e;
    --aura-surface: #0e272e;
    --aura-surface-2: #123039;
    --aura-ink: #eaf4f5;
    --aura-ink-soft: #b6ccd0;
    --aura-muted: #809ba1;
    --aura-line: #1c3a42;
    --aura-line-strong: #295059;

    --aura-good: #45c987;
    --aura-good-tint: #10291d;
    --aura-warn: #e0a83c;
    --aura-warn-tint: #2b2211;
    --aura-danger: #ef6b60;
    --aura-danger-tint: #2e1614;

    --aura-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.28);
    --aura-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme='dark'] {
  --aura-blue: #33adc8;
  --aura-blue-hover: #4cbbd4;
  --aura-blue-deep: #9ad9e5;
  --aura-blue-tint: #0f2e38;
  --aura-orange: #ff9a33;
  --aura-orange-hover: #ffab55;
  --aura-orange-tint: #2a2012;

  --aura-ground: #08191e;
  --aura-surface: #0e272e;
  --aura-surface-2: #123039;
  --aura-ink: #eaf4f5;
  --aura-ink-soft: #b6ccd0;
  --aura-muted: #809ba1;
  --aura-line: #1c3a42;
  --aura-line-strong: #295059;

  --aura-good: #45c987;
  --aura-good-tint: #10291d;
  --aura-warn: #e0a83c;
  --aura-warn-tint: #2b2211;
  --aura-danger: #ef6b60;
  --aura-danger-tint: #2e1614;

  --aura-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.28);
  --aura-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* ─────────────────────── Базовая типографика ───────────────────────
   Подключается по желанию: поверхность может взять только токены выше. */
.aura-type h1,
.aura-type h2,
.aura-type h3,
.aura-type h4 {
  font-family: var(--aura-font-display);
  color: var(--aura-ink);
  text-wrap: balance;
  margin: 0;
}
.aura-type h1 { font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.06; letter-spacing: -0.02em; }
.aura-type h2 { font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.12; letter-spacing: -0.015em; }
.aura-type h3 { font-weight: 400; font-size: 1.2rem; line-height: 1.25; }
.aura-type p { font-family: var(--aura-font-text); color: var(--aura-ink-soft); margin: 0; }

/* Дескриптор компании — по гайду (6.1) пишется под названием, шрифтом Comfortaa */
.aura-descriptor {
  font-family: var(--aura-font-display);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--aura-muted);
}

/* ───────────────────────── Фоновый паттерн ─────────────────────────
   Воспроизведение паттерна из гайда (стр. 17): кружки — две буквы «a»,
   палочки — «u+r». Бесшовный, повторяется по обеим осям. Цвета — фирменные,
   поэтому паттерн наследует тему. Держать фоном КРУПНЫХ плоскостей не стоит:
   в гайде он — акцентная поверхность (обложки, упаковка), а не подложка текста. */
.aura-pattern {
  background-color: var(--aura-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2303829e' stroke-width='3'%3E%3Ccircle cx='18' cy='20' r='9'/%3E%3Ccircle cx='72' cy='64' r='12'/%3E%3Ccircle cx='88' cy='16' r='5'/%3E%3Ccircle cx='40' cy='86' r='6'/%3E%3C/g%3E%3Cg stroke='%23ff840b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M44 12v16M52 12v16M60 12v16'/%3E%3Cpath d='M10 52h16M10 60h16M10 68h16'/%3E%3Cpath d='M64 88h14M64 95h14'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Разреженный вариант (pattern2_chaos в гайде) — для больших поверхностей */
.aura-pattern--sparse {
  background-size: 190px 190px;
  opacity: 1;
}

/* ─────────────────────────── Кнопки ───────────────────────────
   Синий — основное действие (доминирующий цвет), оранжевый — только там,
   где нужно единственное акцентное действие на экране (правило 5:1). */
.aura-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--aura-font-text);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--aura-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.aura-btn--primary { background: var(--aura-blue); color: var(--aura-white); }
.aura-btn--primary:hover { background: var(--aura-blue-hover); }
.aura-btn--accent { background: var(--aura-orange); color: var(--aura-white); }
.aura-btn--accent:hover { background: var(--aura-orange-hover); }
.aura-btn--ghost { background: transparent; color: var(--aura-ink); border-color: var(--aura-line-strong); }
.aura-btn--ghost:hover { background: var(--aura-surface-2); border-color: var(--aura-blue); }

:where(.aura-btn):focus-visible {
  outline: 2px solid var(--aura-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .aura-btn { transition: none; }
}