/* =========================================================
   Nolvix design tokens — единственный источник визуальных правил
   ========================================================= */
:root {
    /* ---- Palette ---- */
    --color-black: #030303;
    --color-ink: #161616;
    --color-white: #ffffff;

    --color-gray-50: #f7f7f7;
    --color-gray-100: #f2f2f2;
    --color-gray-150: #eeeeee;
    --color-gray-200: #e6e6e6;
    --color-gray-300: #d9d9d9;
    --color-gray-400: #c4c4c4;
    --color-gray-500: #8a8a8a;
    --color-gray-600: #6b6b6b;
    --color-gray-800: #262626;
    --color-gray-900: #1c1c1c;

    --color-green-50: #ecfeef;
    --color-green-100: #e6fbe9;
    --color-green-200: #c6f8cf;
    --color-green-300: #a5fbb4;
    --color-green-400: #78fc90;
    --color-green-500: #6ae37d;
    --color-green-700: #2fa84a;

    --color-brand-50: #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-400: #3b82f6;
    --color-brand-600: #2563eb;
    --color-brand-700: #1d4ed8;

    --color-red-100: #fdeaea;
    --color-red-500: #e5484d;
    --color-orange-500: #ff4d1a;
    --color-amber-100: #fff4dc;
    --color-amber-600: #b7791f;
    --color-blue-100: #e8f0ff;
    --color-blue-600: #3366e6;

    /* ---- Semantic ---- */
    --color-primary: var(--color-ink);
    --color-primary-hover: #2d2d2d;
    --color-on-primary: var(--color-white);
    --color-accent: var(--color-brand-600);
    --color-accent-strong: var(--color-brand-700);
    --color-accent-soft: var(--color-brand-50);
    --color-accent-tint: var(--color-brand-200);
    --color-accent-rgb: 37, 99, 235;
    --color-on-accent: var(--color-white);

    --color-background: #f6f6f6;
    --color-surface: var(--color-white);
    --color-surface-muted: var(--color-gray-50);
    --color-surface-sunken: var(--color-gray-100);
    --color-surface-dark: var(--color-black);
    --color-surface-dark-raised: var(--color-gray-900);

    --color-text-primary: var(--color-ink);
    --color-text-secondary: var(--color-gray-500);
    --color-text-muted: var(--color-gray-400);
    --color-text-inverse: var(--color-white);
    --color-text-inverse-muted: #9a9a9a;

    /* Инверсные поверхности: тултипы, toasts, тёмные бейджи */
    --color-inverse-bg: var(--color-primary);
    --color-inverse-text: var(--color-on-primary);
    --color-inverse-text-muted: #9a9a9a;

    --color-border: var(--color-gray-150);
    --color-border-strong: var(--color-gray-300);
    --color-divider: var(--color-gray-150);

    --color-success: var(--color-green-700);
    --color-success-bg: var(--color-green-100);
    --color-warning: var(--color-amber-600);
    --color-warning-bg: var(--color-amber-100);
    --color-danger: var(--color-red-500);
    --color-danger-bg: var(--color-red-100);
    --color-info: var(--color-blue-600);
    --color-info-bg: var(--color-blue-100);
    --color-unread: var(--color-orange-500);
    --color-online: #1fbf4a;

    --color-overlay: rgba(22, 22, 22, .32);
    --color-focus-ring: rgba(22, 22, 22, .08);
    --color-focus-border: var(--color-text-primary);
    --color-focus-outline: var(--color-text-primary);

    /* ---- Typography ---- */
    --font-family-base: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-family-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    --font-size-2xs: .6875rem;  /* 11 */
    --font-size-xs: .75rem;     /* 12 */
    --font-size-sm: .8125rem;   /* 13 */
    --font-size-md: .875rem;    /* 14 */
    --font-size-base: 1rem;     /* 16 */
    --font-size-lg: 1.125rem;   /* 18 */
    --font-size-xl: 1.25rem;    /* 20 */
    --font-size-2xl: 1.5rem;    /* 24 */
    --font-size-3xl: 1.875rem;  /* 30 */
    --font-size-4xl: 2.25rem;   /* 36 */
    --font-size-5xl: 3rem;      /* 48 */
    --font-size-display: 4.5rem;/* 72 */

    --line-height-tight: 1.15;
    --line-height-snug: 1.3;
    --line-height-base: 1.5;
    --letter-spacing-tight: -.02em;

    /* ---- Spacing (4px base) ---- */
    --spacing-0: 0;
    --spacing-1: .25rem;  /* 4 */
    --spacing-2: .5rem;   /* 8 */
    --spacing-3: .75rem;  /* 12 */
    --spacing-4: 1rem;    /* 16 */
    --spacing-5: 1.25rem; /* 20 */
    --spacing-6: 1.5rem;  /* 24 */
    --spacing-7: 1.75rem; /* 28 */
    --spacing-8: 2rem;    /* 32 */
    --spacing-10: 2.5rem; /* 40 */
    --spacing-12: 3rem;   /* 48 */
    --spacing-16: 4rem;   /* 64 */

    /* ---- Radius ---- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(22, 22, 22, .04);
    --shadow-sm: 0 2px 8px rgba(22, 22, 22, .06);
    --shadow-md: 0 12px 32px rgba(22, 22, 22, .10);
    --shadow-lg: 0 24px 64px rgba(22, 22, 22, .16);
    --shadow-accent-glow: 0 18px 48px rgba(var(--color-accent-rgb), .35);

    /* ---- Controls ---- */
    --control-height-sm: 32px;
    --control-height-md: 40px;
    --control-height-lg: 48px;
    --control-padding-x-sm: .875rem;
    --control-padding-x-md: 1.125rem;
    --control-padding-x-lg: 1.5rem;

    /* ---- Icons ---- */
    --icon-size-xs: 12px;
    --icon-size-sm: 14px;
    --icon-size-md: 16px;
    --icon-size-lg: 20px;
    --icon-size-xl: 24px;

    /* ---- Avatars ---- */
    --avatar-size-sm: 28px;
    --avatar-size-md: 36px;
    --avatar-size-lg: 44px;

    /* ---- Layout grid (Layout Grid slide: 1440 / 1400, margin 20, gutter 16) ---- */
    --layout-max-width: 1440px;
    --layout-content-width: 1400px;
    --layout-margin: 20px;
    --layout-gutter: 16px;
    --layout-columns: 12;
    --layout-header-height: 72px;
    --layout-rail-width: 72px;

    /* ---- Interaction states ---- */
    --color-primary-active: #000000;
    --color-state-hover: rgba(22, 22, 22, .05);
    --color-state-active: rgba(22, 22, 22, .09);
    --color-state-selected: var(--color-accent-soft);
    --color-disabled-bg: var(--color-gray-100);
    --color-disabled-text: var(--color-gray-400);
    --color-success-text: var(--color-success);
    --color-link: var(--color-text-primary);
    --color-link-hover: var(--color-gray-600);
    --color-code-bg: var(--color-gray-100);
    --color-backdrop: rgba(22, 22, 22, .32);

    /* ---- Motion ---- */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --ease-standard: ease;
    --ease-emphasized: cubic-bezier(.2, .8, .2, 1);
    --transition-fast: var(--duration-fast) var(--ease-standard);
    --transition-base: var(--duration-base) var(--ease-standard);
    --transition-slow: var(--duration-slow) var(--ease-emphasized);

    /* ---- Z-index scale ---- */
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-header: 1020;
    --z-fab: 1030;
    --z-drawer: 1045;
    --z-modal: 1055;
    --z-overlay: 1060;
    --z-popover: 1070;
    --z-tooltip: 1080;
    --z-toast: 1090;

    /* ---- Breakpoints (справочно; в media queries используются те же значения) ---- */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1280px;
    --bp-xxl: 1440px;

    /* ---- Sidebar ---- */
    --sidebar-width: 248px;
    --sidebar-width-collapsed: var(--layout-rail-width);

    /* ---- Bootstrap mapping ---- */
    --bs-body-font-family: var(--font-family-base);
    --bs-body-font-size: var(--font-size-md);
    --bs-body-color: var(--color-text-primary);
    --bs-body-color-rgb: 22, 22, 22;
    --bs-body-bg: var(--color-background);
    --bs-secondary-color: var(--color-text-secondary);
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);
    --bs-border-radius-pill: var(--radius-pill);
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 22, 22, 22;
    --bs-success: var(--color-success);
    --bs-danger: var(--color-danger);
    --bs-link-color: var(--color-text-primary);
    --bs-link-color-rgb: 22, 22, 22;
    --bs-link-hover-color: var(--color-gray-600);
    --bs-gutter-x: var(--layout-gutter);
    --bs-focus-ring-color: var(--color-focus-ring);
    --bs-emphasis-color: var(--color-text-primary);
    --bs-tertiary-bg: var(--color-surface-muted);
}

/* ---------- Dark theme: переопределяются только токены ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-ink: #f2f2f2;

    --color-gray-50: #1b1b1b;
    --color-gray-100: #202020;
    --color-gray-150: #262626;
    --color-gray-200: #2e2e2e;
    --color-gray-300: #3a3a3a;
    --color-gray-400: #5e5e5e;
    --color-gray-500: #9a9a9a;
    --color-gray-600: #c4c4c4;

    --color-green-50: #142a19;
    --color-green-100: #15301c;
    --color-green-200: #1f4a2a;
    --color-green-700: #78fc90;
    --color-brand-50: #111c33;
    --color-brand-100: #15264a;
    --color-brand-200: #1e3a8a;
    --color-focus-ring: rgba(255, 255, 255, .12);
    --color-red-100: #3a1a1b;
    --color-red-500: #ff6b6f;
    --color-amber-100: #33280f;
    --color-amber-600: #f0b44c;
    --color-blue-100: #172238;
    --color-blue-600: #7ea2ff;

    --color-primary-hover: #d9d9d9;
    --color-primary-active: #ffffff;
    --color-on-primary: #111111;
    --color-background: #0b0b0b;
    --color-surface: #141414;
    --color-surface-dark: #000000;
    --color-surface-dark-raised: #1c1c1c;
    --color-text-inverse: #f2f2f2;
    --color-inverse-text-muted: #555555;
    --color-state-hover: rgba(255, 255, 255, .06);
    --color-state-active: rgba(255, 255, 255, .1);
    --color-backdrop: rgba(0, 0, 0, .6);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);

    --bs-primary-rgb: 242, 242, 242;
    --bs-link-color-rgb: 242, 242, 242;
    --bs-body-color-rgb: 242, 242, 242;
}

/* ---------- Touch: увеличенные зоны нажатия ---------- */
@media (pointer: coarse) {
    :root {
        --control-height-sm: 36px;
        --control-height-md: 44px;
        --control-height-lg: 52px;
    }
}