/* =============================================================================
   Nodra Design Tokens
   Вдохновлено IBM Carbon Design System. Тема по умолчанию — кастомная тёмная
   (на основе токенов Gray 90, но темнее: фон #080808, карточки #1A1A1A, primary #0064FF).
   Все значения — CSS-переменные с префиксом --n-*. Светлая тема: [data-nodra-theme="white"].
   ============================================================================= */

:root {
    /* ---- Фоны и слои (кастомная тёмная) ---- */
    --n-background: #080808;
    --n-background-hover: #141414;
    --n-background-active: #292929;
    --n-background-selected: #1f1f1f;

    --n-layer-01: #1a1a1a;        /* фон карточек */
    --n-layer-hover-01: #242424;
    --n-layer-active-01: #333333;
    --n-layer-selected-01: #2c2c2c;
    --n-layer-02: #262626;        /* Gray 90 */
    --n-layer-hover-02: #333333;
    --n-layer-03: #393939;        /* Gray 80 */

    --n-field-01: #1a1a1a;
    --n-field-02: #262626;

    /* ---- Границы ---- */
    --n-border-subtle: #2a2a2a;
    --n-border-subtle-02: #393939;
    --n-border-strong: #8d8d8d;   /* Gray 50 (Carbon g90 $border-strong) */
    --n-border-inverse: #f4f4f4;
    --n-border-interactive: #4589ff; /* Blue 50 */

    /* ---- Текст ---- */
    --n-text-primary: #f4f4f4;    /* Gray 10 */
    --n-text-secondary: #c6c6c6;  /* Gray 30 */
    --n-text-placeholder: #6f6f6f;/* Gray 60 */
    --n-text-helper: #8d8d8d;     /* Gray 50 */
    --n-text-on-color: #ffffff;
    --n-text-inverse: #161616;    /* Gray 100 (Carbon g90) */
    --n-text-disabled: #525252;   /* Gray 70 */
    --n-text-error: #ffb3b8;      /* Red 30 (Carbon g90 $text-error) */

    /* ---- Ссылки ---- */
    --n-link-primary: #78a9ff;    /* Blue 40 */
    --n-link-primary-hover: #a6c8ff; /* Blue 30 */
    --n-link-visited: #be95ff;    /* Purple 40 */

    /* ---- Иконки ---- */
    --n-icon-primary: #f4f4f4;
    --n-icon-secondary: #c6c6c6;
    --n-icon-on-color: #ffffff;

    /* ---- Интерактив / кнопки ---- */
    --n-interactive: #4589ff;
    --n-button-primary: #0064ff;        /* кастомный primary */
    --n-button-primary-hover: #0052e0;
    --n-button-primary-active: #0039a6;
    --n-button-secondary: #393939;      /* Gray 80 (Carbon g90) */
    --n-button-secondary-hover: #4c4c4c;
    --n-button-secondary-active: #6f6f6f;
    --n-button-tertiary: #ffffff;
    --n-button-tertiary-hover: #f4f4f4;
    --n-button-tertiary-active: #c6c6c6;
    --n-button-danger: #da1e28;         /* Red 60 */
    --n-button-danger-hover: #ba1b23;
    --n-button-danger-active: #750e13;
    --n-button-disabled: #2c2c2c;

    /* ---- Статусы / поддержка ---- */
    --n-support-error: #ff8389;   /* Red 40 (Carbon g90 $support-error) */
    --n-support-success: #42be65; /* Green 40 */
    --n-support-warning: #f1c21b; /* Yellow 30 */
    --n-support-info: #4589ff;    /* Blue 50 */

    /* ---- Фокус ---- */
    --n-focus: #ffffff;
    --n-focus-inset: #080808;

    /* ---- Теги (статусные) ---- */
    --n-tag-blue-bg: #0043ce;
    --n-tag-blue-text: #d0e2ff;
    --n-tag-green-bg: #0e6027;
    --n-tag-green-text: #a7f0ba;
    --n-tag-red-bg: #a2191f;
    --n-tag-red-text: #ffd7d9;
    --n-tag-purple-bg: #6929c4;
    --n-tag-purple-text: #e8daff;
    --n-tag-gray-bg: #393939;
    --n-tag-gray-text: #f4f4f4;
    --n-tag-warning-bg: #8e6a00;
    --n-tag-warning-text: #ffe6b3;

    /* ---- Spacing (шкала Carbon) ---- */
    --n-spacing-01: 0.125rem; /* 2px  */
    --n-spacing-02: 0.25rem;  /* 4px  */
    --n-spacing-03: 0.5rem;   /* 8px  */
    --n-spacing-04: 0.75rem;  /* 12px */
    --n-spacing-05: 1rem;     /* 16px */
    --n-spacing-06: 1.5rem;   /* 24px */
    --n-spacing-07: 2rem;     /* 32px */
    --n-spacing-08: 2.5rem;   /* 40px */
    --n-spacing-09: 3rem;     /* 48px */
    --n-spacing-10: 4rem;     /* 64px */
    --n-spacing-11: 5rem;     /* 80px */
    --n-spacing-12: 6rem;     /* 96px */
    --n-spacing-13: 10rem;    /* 160px */

    /* ---- Шрифты ---- */
    --n-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    --n-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* ---- Сетка (2x Grid) ---- */
    --n-grid-gutter: 2rem;       /* 32px между колонками */
    --n-grid-gutter-narrow: 1rem;/* 16px */
    --n-grid-margin: 1rem;       /* отступ контейнера */
    --n-grid-max-width: 99rem;   /* 1584px */

    /* ---- Движение ---- */
    --n-duration-fast: 110ms;
    --n-duration-moderate: 240ms;
    --n-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
    --n-easing-entrance: cubic-bezier(0, 0, 0.38, 0.9);
    --n-easing-exit: cubic-bezier(0.2, 0, 1, 0.9);
}

/* =============================================================================
   Светлая тема (Carbon, тема Gray 10). Включается атрибутом
   data-nodra-theme="white" на <html> (ставит JS window.nodraTheme).
   Значения — из официальной палитры Carbon (Gray 10 theme).
   ============================================================================= */
[data-nodra-theme="white"] {
    /* ---- Фоны и слои (Gray 10) ---- */
    --n-background: #f4f4f4;            /* Gray 10 — фон страницы / UI Shell */
    --n-background-hover: #e5e5e5;
    --n-background-active: #c6c6c6;
    --n-background-selected: #e0e0e0;

    --n-layer-01: #ffffff;             /* карточки на фоне */
    --n-layer-hover-01: #e8e8e8;
    --n-layer-active-01: #c6c6c6;
    --n-layer-selected-01: #e0e0e0;
    --n-layer-02: #f4f4f4;
    --n-layer-hover-02: #e8e8e8;
    --n-layer-03: #ffffff;

    --n-field-01: #ffffff;
    --n-field-02: #f4f4f4;

    /* ---- Границы ---- */
    --n-border-subtle: #e0e0e0;
    --n-border-subtle-02: #c6c6c6;
    --n-border-strong: #8d8d8d;        /* Gray 50 */
    --n-border-inverse: #161616;
    --n-border-interactive: #0f62fe;   /* Blue 60 */

    /* ---- Текст ---- */
    --n-text-primary: #161616;         /* Gray 100 */
    --n-text-secondary: #525252;       /* Gray 70 */
    --n-text-placeholder: #a8a8a8;     /* Gray 40 */
    --n-text-helper: #6f6f6f;          /* Gray 60 */
    --n-text-on-color: #ffffff;
    --n-text-inverse: #ffffff;
    --n-text-disabled: #c6c6c6;
    --n-text-error: #da1e28;           /* Red 60 */

    /* ---- Ссылки ---- */
    --n-link-primary: #0f62fe;         /* Blue 60 */
    --n-link-primary-hover: #0043ce;   /* Blue 70 */
    --n-link-visited: #8a3ffc;         /* Purple 60 */

    /* ---- Иконки ---- */
    --n-icon-primary: #161616;
    --n-icon-secondary: #525252;
    --n-icon-on-color: #ffffff;

    /* ---- Интерактив / кнопки ---- */
    --n-interactive: #0f62fe;
    --n-button-primary: #0f62fe;
    --n-button-primary-hover: #0353e9;
    --n-button-primary-active: #002d9c;
    --n-button-secondary: #393939;     /* Gray 80 */
    --n-button-secondary-hover: #4c4c4c;
    --n-button-secondary-active: #6f6f6f;
    --n-button-tertiary: #0f62fe;
    --n-button-tertiary-hover: #0353e9;
    --n-button-tertiary-active: #002d9c;
    --n-button-danger: #da1e28;
    --n-button-danger-hover: #ba1b23;
    --n-button-danger-active: #750e13;
    --n-button-disabled: #c6c6c6;

    /* ---- Статусы / поддержка ---- */
    --n-support-error: #da1e28;        /* Red 60 */
    --n-support-success: #24a148;      /* Green 50 */
    --n-support-warning: #f1c21b;      /* Yellow 30 */
    --n-support-info: #0043ce;         /* Blue 70 */

    /* ---- Фокус ---- */
    --n-focus: #0f62fe;
    --n-focus-inset: #ffffff;

    /* ---- Теги (светлые тинты, тёмный текст) ---- */
    --n-tag-blue-bg: #d0e2ff;
    --n-tag-blue-text: #0043ce;
    --n-tag-green-bg: #a7f0ba;
    --n-tag-green-text: #0e6027;
    --n-tag-red-bg: #ffd7d9;
    --n-tag-red-text: #a2191f;
    --n-tag-purple-bg: #e8daff;
    --n-tag-purple-text: #6929c4;
    --n-tag-gray-bg: #e0e0e0;
    --n-tag-gray-text: #161616;
    --n-tag-warning-bg: #fddc69;
    --n-tag-warning-text: #684e00;
}