/* ============================================================
   FROMTECH — токены дизайн-системы для демо-стенда агентов.
   Собрано из design_system/tokens (colors / typography / spacing /
   effects). Стенд тёмный по умолчанию — как весь бренд.
   ============================================================ */

@font-face {
    font-family: "Geologica";
    src: url("/ds/fonts/Geologica-ExtraLight.ttf") format("truetype");
    font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Geologica";
    src: url("/ds/fonts/Geologica-Light.ttf") format("truetype");
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Geologica";
    src: url("/ds/fonts/Geologica-Regular.ttf") format("truetype");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Geologica";
    src: url("/ds/fonts/Geologica-Medium.ttf") format("truetype");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Geologica";
    src: url("/ds/fonts/Geologica-SemiBold.ttf") format("truetype");
    font-weight: 600; font-style: normal; font-display: swap;
}

:root {
    /* ---------- Бренд ---------- */
    --ft-dark:        #101018;
    --ft-green:       #7CF237;
    --ft-green-alt:   #86F131;
    --ft-violet:      #4B03EB;
    --ft-violet-lit:  #7B3BFF;  /* осветлённый фиолетовый — читается на тёмном */
    --ft-white:       #FFFFFF;
    --ft-grey:        #9D9D9D;

    /* ---------- Тёмные поверхности (лестница) ---------- */
    --ft-page:        #0E0E14;
    --ft-section:     #11111A;
    --ft-card:        #13131D;
    --ft-panel:       #1E1E2B;
    --ft-black:       #080808;
    --ft-purple-deep: #180D39;

    /* ---------- Линии ---------- */
    --ft-line:        #1F1F30;
    --ft-line-2:      #262639;

    /* ---------- Семантика ---------- */
    --ft-danger:      #E50101;
    --ft-warning:     #F9BD23;
    --ft-info:        #146EF5;
    --ft-success:     #07B53C;

    /* ---------- Текст ---------- */
    --text-primary:   var(--ft-white);
    --text-secondary: var(--ft-grey);
    --text-muted:     #6E6E80;
    --text-accent:    var(--ft-green);

    /* ---------- Заливки статусов ---------- */
    --green-fill:  rgba(124, 242, 55, .10);
    --green-edge:  rgba(124, 242, 55, .28);
    --green-text:  var(--ft-green);
    --violet-fill: rgba(123, 59, 255, .14);
    --violet-edge: rgba(123, 59, 255, .34);
    --violet-text: #B394FF;
    --grey-fill:   rgba(157, 157, 157, .10);
    --grey-edge:   rgba(157, 157, 157, .20);
    --grey-text:   var(--ft-grey);
    --error-fill:  rgba(229, 1, 1, .12);
    --error-edge:  rgba(229, 1, 1, .32);
    --error-text:  #FF7A7A;

    /* ---------- Типографика ---------- */
    --font-brand: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --fw-extralight: 200;
    --fw-light:      300;   /* рабочий вес: им набран почти весь текст */
    --fw-regular:    400;
    --fw-medium:     500;

    --fs-display: 52px;
    --fs-h1:      34px;
    --fs-h2:      24px;
    --fs-h3:      18px;
    --fs-body-l:  22px;
    --fs-body:    16px;
    --fs-sm:      14px;
    --fs-micro:   12px;
    --fs-nano:    10px;

    --ls-body:    0.010em;
    --ls-tight:   -0.02em;
    --ls-caps:    0.16em;   /* служебные подписи в верхнем регистре */
    --ls-caps-sm: 0.14em;

    /* ---------- Скругления ---------- */
    --r-xs:    6px;
    --r-sm:    10px;
    --r-md:    16px;
    --r-nav:   18px;
    --r-tile:  24px;
    --r-card:  32px;
    --r-full:  999px;

    /* ---------- Геометрия страницы ---------- */
    --container: 1320px;
    --gutter:    40px;

    /* ---------- Тени и блюр ---------- */
    --shadow-hairline: inset 0 0 0 1px rgba(255, 255, 255, .06);
    --shadow-float:    0 8px 40px rgba(0, 0, 0, .4);
    --blur-blob:       160px;

    /* ---------- Движение ---------- */
    --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:      140ms;
    --dur-base:      240ms;
    --dur-slow:      420ms;
}

/* ------------------------------------------------------------
   Брендовый мотив: два размытых эллипса — зелёный и фиолетовый,
   вынесенные далеко за край, поверх тёмной поверхности.
   Кладётся внутрь контейнера с position:relative.
   ------------------------------------------------------------ */
.ft-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(var(--blur-blob));
}
.ft-blob--green  { background: var(--ft-green-alt); }
.ft-blob--violet { background: var(--ft-violet); }

/* Мелкая шумовая сетка поверх ключевых визуалов */
.ft-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .4;
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        radial-gradient(rgba(0, 0, 0, .2) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
}

/* ------------------------------------------------------------
   Анимации стенда
   ------------------------------------------------------------ */
@keyframes ft-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes ft-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}
@keyframes ft-spin {
    to { transform: rotate(360deg); }
}
@keyframes ft-blob-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(4%, -3%, 0) scale(1.08); }
}

/* Полоса выделения — зелёная, как на сайте */
::selection { background: var(--ft-green); color: var(--ft-dark); }

/* Скроллбары внутри панелей консоли */
.ft-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.ft-scroll::-webkit-scrollbar-track { background: transparent; }
.ft-scroll::-webkit-scrollbar-thumb { background: var(--ft-line-2); border-radius: var(--r-full); }
.ft-scroll::-webkit-scrollbar-thumb:hover { background: #33334a; }