/* =========================================================
   UI TOKENS — Design System Foundation
   Единая система токенов для премиум-ощущения
   Совместима с существующими стилями
   ========================================================= */

:root {
    /* ===== Spacing Scale (8px base) ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-section: 72px;
    /* межсекционные отступы */

    /* ===== Typography Scale ===== */
    --text-xs: 0.75rem;
    /* 12px — meta, captions */
    --text-sm: 0.875rem;
    /* 14px — small text */
    --text-base: 1rem;
    /* 16px — body */
    --text-lg: 1.125rem;
    /* 18px — lead text */
    --text-xl: 1.25rem;
    /* 20px — h4 */
    --text-2xl: 1.5rem;
    /* 24px — h3 */
    --text-3xl: 2rem;
    /* 32px — h2 */
    --text-4xl: 2.5rem;
    /* 40px — h1 */

    /* Line heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* Letter spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;

    /* ===== Border Radius ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 999px;

    /* ===== Shadows ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.20);
    --shadow-glow: 0 0 20px rgba(245, 166, 35, 0.25);

    /* ===== Z-Index Scale ===== */
    --z-base: 1;
    --z-above: 10;
    --z-dropdown: 100;
    --z-sticky: 150;
    --z-header: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-tooltip: 2000;
    --z-max: 9999;

    /* ===== Accent Colors (max 2 for premium feel) ===== */
    --accent-primary: #f5a623;
    /* Gold/Orange — главный акцент */
    --accent-secondary: #7c3aed;
    /* Purple — вторичный акцент */

    /* ===== Transition Timing ===== */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
}

/* ===== FOCUS VISIBLE — Accessible & Beautiful ===== */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ===== UNIVERSAL INTERACTIVE STATES ===== */

/* Subtle lift on hover */
.btn:hover,
.card:hover,
.cyber-panel:hover,
.cyber-tile:hover,
.filter-chip:hover,
.persona-card:hover,
.blog-card:hover,
.premium-card:hover,
.project-card:hover {
    transform: translateY(-2px);
}

/* Micro-press on active */
.btn:active,
.card:active,
.cyber-panel:active,
.cyber-tile:active,
.filter-chip:active,
.persona-card:active,
.blog-card:active,
.premium-card:active,
.project-card:active {
    transform: scale(0.99);
}

/* Smooth transitions for all interactive elements */
.btn,
.card,
.cyber-panel,
.cyber-tile,
.filter-chip,
.persona-card,
.blog-card,
.premium-card,
.project-card,
.nav-menu a,
.nav-links a {
    transition:
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out),
        background var(--duration-normal) var(--ease-out);
}

/* ===== TYPOGRAPHY RHYTHM for Content Pages ===== */
.content-body {
    max-width: 72ch;
    /* optimal reading width */
    line-height: var(--leading-relaxed);
    margin-left: auto;
    margin-right: auto;
}

.content-body h1 {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-top: var(--space-8);
    margin-bottom: var(--space-5);
}

.content-body h2 {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-top: var(--space-7);
    margin-bottom: var(--space-4);
}

.content-body h3 {
    font-size: var(--text-2xl);
    line-height: var(--leading-normal);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.content-body p {
    margin-bottom: var(--space-4);
}

.content-body ul,
.content-body ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-5);
}

/* Section dividers with consistent rhythm */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            var(--border),
            transparent);
    margin: var(--space-section) 0;
    border: none;
}

/* ===== SKELETON LOADING ANIMATION ===== */
@keyframes skeleton-pulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.03) 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-lg);
}

/* Light theme skeleton */
:root[data-theme="light"] .skeleton {
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(0, 0, 0, 0.04) 100%);
    background-size: 200% 100%;
}