/* ============================================================
   variables.css — Дизайн-токены ClickShot для all-positions.ru
   ------------------------------------------------------------
   Два слоя:
   1) Родные токены ClickShot (--ink-*, --lime-*, --accent,
      --font-*, --ease-*, --dur-*) — источник истины.
   2) Слой совместимости: старые имена токенов --color-* /
      --radius-* / --shadow-* / --transition переопределены
      на палитру ClickShot, чтобы инлайн-стили в index.php и
      генерируемая в JS разметка продолжали работать без правок.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700;800&family=Onest:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ---------- Родные токены ClickShot ---------- */

    /* Ink (нейтральная шкала) */
    --ink-950: #0A0A0A;
    --ink-900: #171717;
    --ink-800: #262626;
    --ink-700: #404040;
    --ink-600: #525252;
    --ink-500: #737373;
    --ink-400: #A3A3A3;
    --ink-300: #D4D4D4;
    --ink-200: #E5E5E5;
    --ink-150: #EDEDED;
    --ink-100: #F5F5F5;
    --ink-50:  #FAFAFA;
    --white:   #FFFFFF;

    /* Сигнальный лайм */
    --lime:      #C5FF1A;
    --lime-600:  #B7F500;
    --lime-400:  #b5ff51;
    --lime-200:  #E6FF99;
    --lime-100:  #F1FFCC;
    --lime-glow: rgba(197, 255, 26, 0.55);
    --fc-lime-ring: rgba(197, 255, 26, 0.28);

    /* Структурный тёмный акцент (navy) */
    --accent:     #181b25;
    --accent-600: #232735;
    --accent-on:  #ffffff;

    /* Шрифты */
    --font-display: 'Geologica', 'Onest', system-ui, sans-serif;
    --font-body:    'Onest', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Easing / длительности */
    --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-1: 120ms;
    --dur-2: 220ms;
    --dur-3: 360ms;
    --dur-4: 560ms;

    /* Тени ClickShot */
    --fc-shadow-flat:       0 1px 2px rgba(10, 10, 10, 0.04);
    --fc-shadow-card:       0 1px 2px rgba(10, 10, 10, 0.04), 0 12px 28px rgba(10, 10, 10, 0.05);
    --fc-shadow-card-hover: 0 2px 4px rgba(10, 10, 10, 0.05), 0 18px 36px rgba(10, 10, 10, 0.07);
    --shadow-modal:         0 32px 64px rgba(10, 10, 10, 0.14);

    /* Тёплые поверхности (лендинг) */
    --cream:   #f6f2e8;
    --cream-2: #ede7d6;

    /* Доп. радиусы ClickShot */
    --r-2: 6px;
    --r-3: 10px;
    --r-4: 14px;
    --r-5: 18px;
    --r-6: 22px;
    --r-7: 28px;
    --r-pill: 999px;

    /* «Edge»-карточки лендинга (обводка + смещённая тень) */
    --accent-tint-2:     #dfe2eb;
    --edge-border-w:     1.5px;
    --edge-border-color: var(--accent);
    --edge-shadow:       5px 5px 0 var(--accent-tint-2);
    --edge-shadow-hover: 7px 7px 0 var(--accent-tint-2);
    --edge-radius:       var(--r-5);

    /* Растяжение крупного дисплейного шрифта */
    --type-stretch-display: 85%;


    /* ---------- Слой совместимости (старые имена) ---------- */

    /* Фоны */
    --color-bg-primary:   var(--ink-50);
    --color-bg-secondary: var(--white);
    --color-bg-hover:     var(--ink-100);
    --color-bg-active:    var(--ink-200);

    /* Текст */
    --color-text-primary:   var(--ink-950);
    --color-text-secondary: var(--ink-600);
    --color-text-light:     var(--ink-400);

    /* Границы */
    --color-border:       var(--ink-200);
    --color-border-hover: var(--ink-300);
    --color-border-dark:  var(--ink-300);

    /* Акцент — остаётся ТЁМНЫМ (используется и как color: для текста ссылок,
       где лайм на белом был бы нечитаем). Лаймовость внедряется напрямую
       в классы кнопок/тогглов/статусов, а не через этот токен. */
    --color-accent:       var(--accent);
    --color-accent-hover: var(--ink-950);
    --color-accent-light: var(--lime-100);
    --color-accent-dark:  var(--ink-950);

    /* Белый текст на тёмном фоне */
    --color-white: var(--white);

    /* Статусы */
    --color-success:      #10b981;
    --color-success-bg:   #e7f8f1;
    --color-success-text: #0a7c5a;

    --color-warning:      #d99e0b;
    --color-warning-bg:   #fdf6e3;
    --color-warning-text: #946200;

    --color-error:      #d4351c;
    --color-error-bg:   #fff1f0;
    --color-error-text: #8a1c10;

    /* Оверлей */
    --color-overlay: rgba(10, 10, 10, 0.45);

    /* Тени (старые имена → тени ClickShot) */
    --shadow-sm:     var(--fc-shadow-flat);
    --shadow-md:     var(--fc-shadow-card);
    --shadow-lg:     var(--fc-shadow-card-hover);
    --shadow-accent: 0 1px 2px rgba(181, 255, 81, 0.25), 0 6px 16px rgba(181, 255, 81, 0.2);

    /* Радиусы (совпадают с --fc-r-1..4) */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Переходы */
    --transition: all var(--dur-2) var(--ease-out);
}