/*
 * Токени вітрини BaseFox.
 *
 * ## Навіщо окремий файл
 *
 * Тут лише значення: кольори, розміри, відступи. Розмітка їх споживає й
 * ніколи не пише сирих кольорів. Це те місце, у якому дизайнер міняє вигляд
 * усієї вітрини, не заходячи в HTML.
 *
 * ## Ті самі кольори, що в кабінеті
 *
 * Значення взяті з `packages/dashboard/src/app/globals.css`. Це не
 * дублювання заради дублювання: кабінет на Next зі своєю збіркою, вітрина —
 * статичний HTML без збірки взагалі, і спільний файл між ними означав би
 * складання там, де його зараз немає.
 *
 * Ціна відома: при зміні палітри правити треба обидва місця. Тому обидва
 * файли починаються цим абзацом.
 *
 * Кремове тло тут було й пішло: теплий відтінок на всю площу екрана
 * втомлює, а білі картки на ньому здаються жовтуватими.
 */

:root {
  /* Тло, картка, заглиблення. Картка БІЛА — світліша за поле під нею. */
  --bg: #f4f5f8;
  --bg-elevated: #ffffff;
  --bg-sunk: #edeff3;

  --text: #16181d;
  --text-muted: #5b6472;
  --text-hint: #8b94a2;

  --border: #e2e5ea;
  --border-strong: #cbd1d9;

  /* Хвоя. Відрізняється і від бурштину, і від синього, і від червоного. */
  --accent: #14534a;
  --accent-soft: #e0eeea;
  --accent-contrast: #ffffff;

  /* Марка. Єдиний колір, який не міняється з темою. */
  --brand: #e8511f;

  --amber: #be6c20;
  --danger: #cd3e2c;
  --success: #226947;

  --font-sans:
    'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Заголовки — та сама пара, що в кабінеті: у Onest коротший наголос, тож
     заголовок читається заголовком, а не просто більшим текстом. */
  --font-display: 'Onest', var(--font-sans);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-3xl: 40px;
  --fs-display: 58px;

  --leading-tight: 1.08;
  --leading-normal: 1.45;
  --leading-relaxed: 1.65;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(22, 24, 29, 0.05), 0 1px 3px rgba(22, 24, 29, 0.04);
  --shadow-2: 0 10px 28px rgba(22, 24, 29, 0.09);

  --container-max: 1060px;
}

/*
 * Темна тема — не «інвертована світла». Тло не чорне, а глибоке
 * синювато-сіре: чорний в темній кімнаті світиться ореолом навколо тексту.
 * Акцент світлішає, бо хвоя на темному перестає читатись як колір.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --bg-elevated: #181b21;
    --bg-sunk: #14171c;

    --text: #e8eaee;
    --text-muted: #9ea6b2;
    --text-hint: #747c89;

    --border: #292e37;
    --border-strong: #39404b;

    --accent: #4aa696;
    --accent-soft: #182c29;
    --accent-contrast: #0a1211;

    --amber: #e2984c;
    --danger: #f06e5c;
    --success: #5cac80;
  }
}