/* ThreadsTraffic Design Tokens
   Single source of truth for color, space, radius, typography, and motion.
   Complies with DESIGN_SYSTEM.md §2-4 and TASK_PLAN.md §3.12. */

/* Local Fonts: Inter Variable (Latin + Cyrillic) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Local Fonts: JetBrains Mono Variable (Latin + Cyrillic) */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* 1. Base Palette Constants */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-transparent: rgba(0, 0, 0, 0);

    /* 2. Surfaces (DESIGN_SYSTEM.md §2.1) */
    --canvas-bg: #09090B;                      /* Основной холст (Pitch Black) */
    --bento-bg: rgba(18, 18, 22, 0.85);        /* Базовые карточки и плитки Bento */
    --bento-bg-elevated: #16161A;               /* Приподнятые элементы, меню, активные зоны */
    --badge-surface: #09090B;                  /* Фон круглых бейджей категорий */

    /* Границы и поверхности компонентов */
    --bento-border: rgba(255, 255, 255, 0.07);      /* Базовая граница карточек */
    --bento-border-hover: rgba(165, 229, 70, 0.22); /* Граница при наведении (Lime Glow) */
    --surface-elevated-2: #121215;
    --surface-dark-line: #18181B;
    --surface-dark-border: #27272A;
    --surface-avatar: #1C1C20;
    --surface-dark-subtle: #0E0E11;
    --surface-dark-card: #121214;
    --header-bg-glass: rgba(9, 9, 11, 0.85);
    --surface-overlay-modal: rgba(0, 0, 0, 0.82);
    --surface-overlay-tooltip: #09090B;

    /* Полупрозрачные наложения (White Overlays) */
    --overlay-white-02: rgba(255, 255, 255, 0.02);
    --overlay-white-03: rgba(255, 255, 255, 0.03);
    --overlay-white-04: rgba(255, 255, 255, 0.04);
    --overlay-white-05: rgba(255, 255, 255, 0.05);
    --overlay-white-06: rgba(255, 255, 255, 0.06);
    --overlay-white-07: rgba(255, 255, 255, 0.07);
    --overlay-white-08: rgba(255, 255, 255, 0.08);
    --overlay-white-10: rgba(255, 255, 255, 0.1);
    --overlay-white-12: rgba(255, 255, 255, 0.12);
    --overlay-white-15: rgba(255, 255, 255, 0.15);
    --overlay-white-18: rgba(255, 255, 255, 0.18);

    /* Полупрозрачные наложения (Black Overlays) */
    --overlay-black-15: rgba(0, 0, 0, 0.15);
    --overlay-black-25: rgba(0, 0, 0, 0.25);
    --overlay-black-35: rgba(0, 0, 0, 0.35);
    --overlay-black-50: rgba(0, 0, 0, 0.50);
    --overlay-black-60: rgba(0, 0, 0, 0.60);
    --overlay-black-70: rgba(0, 0, 0, 0.70);
    --overlay-black-80: rgba(0, 0, 0, 0.80);
    --overlay-black-82: rgba(0, 0, 0, 0.82);
    --overlay-black-85: rgba(0, 0, 0, 0.85);

    /* Полупрозрачные наложения (Cyber Lime Overlays) */
    --overlay-lime-035: rgba(165, 229, 70, 0.035);
    --overlay-lime-04: rgba(165, 229, 70, 0.04);
    --overlay-lime-05: rgba(165, 229, 70, 0.05);
    --overlay-lime-10: rgba(165, 229, 70, 0.10);
    --overlay-lime-12: rgba(165, 229, 70, 0.12);
    --overlay-lime-20: rgba(165, 229, 70, 0.20);
    --overlay-lime-22: rgba(165, 229, 70, 0.22);
    --overlay-lime-30: rgba(165, 229, 70, 0.30);
    --overlay-lime-35: rgba(165, 229, 70, 0.35);
    --overlay-lime-38: rgba(165, 229, 70, 0.38);
    --overlay-lime-40: rgba(165, 229, 70, 0.40);
    --overlay-lime-45: rgba(165, 229, 70, 0.45);
    --overlay-lime-60: rgba(165, 229, 70, 0.60);

    /* Тени */
    --shadow-tooltip: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(165, 229, 70, 0.2);
    --shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.7);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-floating: 0 14px 40px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-badge: 0 2px 6px rgba(0, 0, 0, 0.4);

    /* 3. Brand Primary - Electric Cyber Lime (DESIGN_SYSTEM.md §2.2) */
    --brand-primary: #A5E546;                       /* Основной акцентный лайм */
    --brand-hover: #B7F05C;                         /* Светлый лайм при hover */
    --brand-gradient-end: #76BC1B;                  /* Градиентный темный лайм */
    --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-gradient-end) 100%);
    --brand-glow: drop-shadow(0 0 14px rgba(165, 229, 70, 0.4));
    --brand-box-glow: 0 0 24px rgba(165, 229, 70, 0.25);
    --brand-ring: rgba(165, 229, 70, 0.35);         /* Кольцо фокуса */

    /* 4. Semantic Statuses (DESIGN_SYSTEM.md §2.3) */
    --success: #10B981;
    --success-border-strong: #059669;
    --success-bg: rgba(16, 185, 129, 0.1);
    --success-text: #34D399;
    --success-border: rgba(16, 185, 129, 0.25);
    --success-gradient: linear-gradient(90deg, #10B981, #059669);
    --overlay-success-08: rgba(16, 185, 129, 0.08);
    --overlay-success-12: rgba(16, 185, 129, 0.12);
    --overlay-success-15: rgba(16, 185, 129, 0.15);
    --overlay-success-25: rgba(16, 185, 129, 0.25);
    --overlay-success-35: rgba(16, 185, 129, 0.35);
    --overlay-success-40: rgba(16, 185, 129, 0.40);
    --overlay-success-70: rgba(16, 185, 129, 0.70);
    --overlay-success-pulse-0: rgba(16, 185, 129, 0);

    --warning: #F59E0B;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --warning-text: #FBBF24;
    --warning-border: rgba(245, 158, 11, 0.25);
    --overlay-warning-12: rgba(245, 158, 11, 0.12);
    --overlay-warning-15: rgba(245, 158, 11, 0.15);
    --overlay-warning-25: rgba(245, 158, 11, 0.25);
    --overlay-warning-35: rgba(245, 158, 11, 0.35);

    --danger: #EF4444;
    --danger-bg: rgba(239, 68, 68, 0.1);
    --danger-text: #F87171;
    --danger-border: rgba(239, 68, 68, 0.25);
    --text-danger-light: #FCA5A5;
    --overlay-danger-05: rgba(239, 68, 68, 0.05);
    --overlay-danger-10: rgba(239, 68, 68, 0.10);
    --overlay-danger-12: rgba(239, 68, 68, 0.12);
    --overlay-danger-15: rgba(239, 68, 68, 0.15);
    --overlay-danger-20: rgba(239, 68, 68, 0.20);
    --overlay-danger-25: rgba(239, 68, 68, 0.25);
    --overlay-danger-35: rgba(239, 68, 68, 0.35);
    --overlay-danger-40: rgba(239, 68, 68, 0.40);

    --info: #38BDF8;
    --info-bg: rgba(56, 189, 248, 0.1);
    --info-text: #60A5FA;
    --info-border: rgba(56, 189, 248, 0.25);
    --overlay-sky-04: rgba(56, 189, 248, 0.04);
    --overlay-sky-12: rgba(56, 189, 248, 0.12);
    --overlay-sky-18: rgba(56, 189, 248, 0.18);
    --overlay-sky-25: rgba(56, 189, 248, 0.25);
    --overlay-sky-40: rgba(56, 189, 248, 0.40);
    --overlay-sky-60: rgba(56, 189, 248, 0.60);

    --purple: #A78BFA;
    --purple-bg: rgba(168, 85, 247, 0.12);
    --purple-text: #C084FC;
    --purple-border: rgba(168, 85, 247, 0.25);
    --text-purple-light: #DDD6FE;
    --overlay-purple-08: rgba(167, 139, 250, 0.08);
    --overlay-purple-12: rgba(168, 85, 247, 0.12);
    --overlay-purple-25: rgba(168, 85, 247, 0.25);
    --overlay-purple-30: rgba(168, 85, 247, 0.30);

    --text-slate-400: #94A3B8;
    --overlay-slate-12: rgba(148, 163, 184, 0.12);
    --overlay-slate-25: rgba(148, 163, 184, 0.25);

    --overlay-zinc-10: rgba(161, 161, 170, 0.10);
    --overlay-zinc-12: rgba(161, 161, 170, 0.12);
    --overlay-zinc-25: rgba(161, 161, 170, 0.25);

    --overlay-border-40: rgba(39, 39, 42, 0.40);
    --overlay-border-50: rgba(39, 39, 42, 0.50);

    /* 5. Neutral Zinc Scale (DESIGN_SYSTEM.md §2.4) */
    --text-white: #FFFFFF;      /* Основные заголовки, ключевые цифры */
    --text-zinc-200: #E4E4E7;  /* Основной читаемый текст постов */
    --text-zinc-300: #D4D4D8;  /* Вспомогательный текст */
    --text-zinc-400: #A1A1AA;  /* Вторичный текст, подписи, неактивные табы */
    --text-zinc-500: #71717A;  /* Метаданные, даты, плейсхолдеры */
    --text-zinc-600: #52525B;  /* Разделители, границы строк */

    /* 6. Border Radii (DESIGN_SYSTEM.md §3) */
    --radius-sm: 6px;
    --radius-bento: 1.75rem;   /* 28px — плитки Bento, модалки */
    --radius-card: 1.25rem;    /* 20px — карточки постов, мини-карточки */
    --radius-control: 0.75rem; /* 12px — кнопки, инпуты, дропдауны */
    --radius-pill: 9999px;     /* Табы, бейджи, свитчи */

    /* 7. Typography (DESIGN_SYSTEM.md §4) */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --fs-xs: 0.6875rem;  /* 11px */
    --fs-sm: 0.8125rem;  /* 13px */
    --fs-base: 0.925rem; /* 14.8px */
    --fs-md: 1.05rem;    /* 16.8px */
    --fs-lg: 1.15rem;    /* 18.4px */
    --fs-xl: 1.65rem;    /* 26.4px - KPI */
    --fs-2xl: 2.25rem;   /* 36px */
    --fs-3xl: 2.5rem;    /* 40px - Hero */

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.6;

    /* 8. Spacing Scale (TASK_PLAN.md §3.12) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* 9. Layout & Grid (TASK_PLAN.md §3.12) */
    --container-max: 1200px;
    --bento-gap: var(--space-5);
    --popover-width: 340px;

    /* 10. Z-Index Layers */
    --z-dropdown: 50;
    --z-header: 100;
    --z-tabbar: 120;
    --z-modal: 150;
    --z-toast: 200;

    /* PWA & Mobile iPhone Dimensions (PWA-IOS-01 & Apple HIG) */
    --tabbar-height: 50px;
    --tabbar-bg: #121316;
    --tabbar-border: rgba(255, 255, 255, 0.08);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --sheet-radius: 24px;
    --vv-height: 100dvh;
    --m-gutter: 18px;
    --m-section-gap: 26px;
    --m-radius-group: 18px;
    --m-radius-tile: 18px;
    --m-navbar-h: 46px;
    --hairline: 0.5px solid var(--tabbar-border);

    /* 11. Motion & Transitions */
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* 12. Skeleton Shimmer & Chart Silhouettes */
    --skeleton-shimmer-start: rgba(255, 255, 255, 0.04);
    --skeleton-shimmer-mid: rgba(255, 255, 255, 0.12);
    --skeleton-shimmer-end: rgba(255, 255, 255, 0.04);
    --skeleton-wave-fill: rgba(165, 229, 70, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
    }
}