/* =============================================================================
 * R-LINK Design Tokens — единый источник truth для всего сайта.
 *
 * Подключается:
 *   - vanilla страницы (landing, admin, 404, pay/success) через <link>
 *   - React surfaces (webapp, site) через @import в их styles/index.css
 *
 * Парный файл для React/Tailwind: website/shared/tailwind-preset.cjs.
 * Если меняешь значения здесь — синхронизируй preset, иначе появятся
 * расхождения между surface'ами.
 *
 * Палитра вдохновлена GitHub Primer dark — тестировалась на читаемость
 * и контраст по WCAG AA для основных пар.
 * =========================================================================== */

:root {
  /* ---------- Surface palette ---------- */
  --color-bg:               #0d1117;  /* основной фон страницы */
  --color-bg-elevated:      #161b22;  /* карточки, модалки, попапы */
  --color-bg-hover:         #1c2128;  /* hover row/card */
  --color-border:           #30363d;  /* контуры по умолчанию */
  --color-border-strong:    #484f58;  /* focused / акцентный контур */

  /* legacy aliases — не использовать в новом коде */
  --bg:               var(--color-bg);
  --surface:          var(--color-bg-elevated);
  --surface-hover:    var(--color-bg-hover);
  --border:           var(--color-border);

  /* ---------- Text ---------- */
  --color-text:             #e6edf3;  /* основной текст */
  --color-text-muted:       #8b949e;  /* вторичный текст */
  --color-text-subtle:      #6e7681;  /* подсказки, плейсхолдеры */

  --text:             var(--color-text);
  --text-muted:       var(--color-text-muted);
  --muted:            var(--color-text-muted);

  /* ---------- Semantic ---------- */
  --color-primary:          #58a6ff;  /* CTA, акцент */
  --color-primary-hover:    #79b8ff;
  --color-success:          #3fb950;
  --color-warning:          #d29922;
  --color-danger:           #f85149;

  --accent:           var(--color-primary);
  --accent-hover:     var(--color-primary-hover);
  --green:            var(--color-success);
  --amber:            var(--color-warning);
  --red:              var(--color-danger);

  /* ---------- Radius ---------- */
  --radius-sm:        6px;    /* inputs, маленькие бэйджи */
  --radius-md:        10px;   /* кнопки, средние карточки */
  --radius-lg:        14px;   /* большие карточки, модалки */
  --radius-pill:      999px;

  --radius:           var(--radius-md);   /* legacy default */

  /* ---------- Shadows (тёмная тема — низкая интенсивность) ---------- */
  --shadow-sm:                0 1px 2px rgba(0,0,0,.4);
  --shadow-md:                0 4px 12px -2px rgba(0,0,0,.5);
  --shadow-lg:                0 12px 28px -6px rgba(0,0,0,.6);
  --shadow-glow-primary:      0 0 28px -10px rgba(88, 166, 255, .55);
  --shadow-glow-success:      0 0 28px -10px rgba(63, 185, 80, .55);
  --shadow-glow-warning:      0 0 28px -10px rgba(210, 153, 34, .55);
  --shadow-glow-danger:       0 0 28px -10px rgba(248, 81, 73, .55);

  /* ---------- Spacing (4px grid) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ---------- Type scale ---------- */
  --font-xs:   12px;   /* подписи, captions */
  --font-sm:   14px;   /* body small */
  --font-base: 16px;   /* body */
  --font-lg:   18px;
  --font-xl:   22px;
  --font-2xl:  28px;   /* h2 */
  --font-3xl:  36px;   /* h1 на карточке */
  --font-4xl:  48px;   /* hero h1 */

  --lh-tight:    1.2;
  --lh-base:     1.5;
  --lh-relaxed:  1.6;

  /* ---------- Transitions ---------- */
  --motion-fast:     120ms cubic-bezier(.4, 0, .2, 1);
  --motion-base:     180ms cubic-bezier(.4, 0, .2, 1);
  --motion-slow:     280ms cubic-bezier(.4, 0, .2, 1);

  /* ---------- z-index scale ---------- */
  --z-dropdown:   10;
  --z-sticky:     20;
  --z-overlay:    50;
  --z-modal:      60;
  --z-toast:      70;

  /* ---------- Fonts ---------- */
  --font-sans:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --font-mono:
    ui-monospace,
    SFMono-Regular,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;
}

/* Глобальный color-scheme для нативных контролов (scrollbar, input). */
html { color-scheme: dark; }