/*
 * Design tokens of Smart_Income Invest.
 *
 * Цвета перенесены из docs/SPEC.md, раздел 14, блоком целиком и как есть.
 * Это единственный источник: подписи под образцами в docs/design-system.png
 * набраны шрифтом в семь пикселей и разрушены сжатием, а сами образцы залиты
 * градиентом, поэтому пипетка врёт. Из картинки берутся только раскладка,
 * состав компонентов, сетка отступов и радиусы.
 *
 * Шкала кеглей, сетка отступов и радиусы — из design-system.png,
 * они там нарисованы цифрами и читаются однозначно.
 *
 * Тема только тёмная. Светлой нет, переключателя нет,
 * prefers-color-scheme игнорируется (docs/SPEC.md, раздел 14).
 */

:root {
  /* ---- Фон и поверхности ----------------------------------------- */
  --si-bg: #080d12; /* фон приложения */
  --si-surface-1: #11151c; /* карточки первого уровня */
  --si-surface-2: #161d26; /* вложенные блоки, невыбранные тарифы */
  --si-surface-3: #1e2431; /* поля ввода, третий уровень */
  --si-border: #2a3140; /* границы и разделители */

  /* ---- Золото ---------------------------------------------------- */
  --si-gold: #f3b642; /* главный акцент: кнопки, проценты, активная вкладка */
  --si-gold-light: #f7d17a; /* светлая точка градиента, блики */
  --si-gold-dark: #cc8a00; /* тёмная точка градиента, рамки */

  /* ---- Статусы --------------------------------------------------- */
  --si-success: #22c55e; /* доход, приход */
  --si-danger: #ef4444; /* вывод, ошибки */
  --si-warning: #f59e0b; /* ожидание, предупреждения */
  --si-info: #3b82f6; /* информационные пометки */

  /* ---- Текст ----------------------------------------------------- */
  --si-text: #ffffff; /* основной */
  --si-text-2: #a6aab4; /* подписи, пояснения */
  --si-text-muted: #6b7280; /* даты, служебные пометки */

  /* ---- Градиенты и эффекты ----------------------------------------
     Обязательны, плоским цветом не заменять. */
  --si-gold-gradient: linear-gradient(135deg, #f7d17a 0%, #f3b642 45%, #cc8a00 100%);
  --si-card-gradient: linear-gradient(160deg, #11151c 0%, #080d12 100%);
  --si-gold-glow: 0 0 24px rgba(243, 182, 66, 0.28);
  --si-gold-glow-soft: 0 0 14px rgba(243, 182, 66, 0.16);
  --si-card-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  --si-gold-hairline: linear-gradient(90deg, transparent, #cc8a00, transparent);
  --si-gold-ink: #0b0b0b; /* текст на золотой кнопке */

  /* ---- Типографика ------------------------------------------------
     H1/32/Bold, H2/24/Semibold, H3/20/Semibold, Body/16/Regular,
     Caption/14/Regular, Small/12/Regular. */
  --si-h1-size: 2rem; /* 32 */
  --si-h1-weight: 700;
  --si-h2-size: 1.5rem; /* 24 */
  --si-h2-weight: 600;
  --si-h3-size: 1.25rem; /* 20 */
  --si-h3-weight: 600;
  --si-body-size: 1rem; /* 16 */
  --si-body-weight: 400;
  --si-caption-size: 0.875rem; /* 14 */
  --si-small-size: 0.75rem; /* 12 */

  /* SF Pro Display из дизайн-системы использовать нельзя: лицензия Apple
     разрешает только их платформы, а мини-приложение открывается и на
     Android. Inter — свободный аналог с близкими метриками. */
  --si-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --si-font-numeric: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Сетка отступов, 8px ---------------------------------------- */
  --si-space-1: 4px;
  --si-space-2: 8px;
  --si-space-3: 12px;
  --si-space-4: 16px;
  --si-space-5: 24px;
  --si-space-6: 32px;
  --si-space-7: 40px;
  --si-space-8: 48px;

  /* ---- Радиусы ----------------------------------------------------- */
  --si-radius-1: 4px;
  --si-radius-2: 8px;
  --si-radius-3: 12px;
  --si-radius-4: 16px;
  --si-radius-5: 24px;
  --si-radius-6: 32px;
}