/* === DESIGN-SYSTEM.CSS ===
 * /serverflow/assets/css/design-system.css
 * НАЗНАЧЕНИЕ: Единая дизайн-система ServerFlow (OKLCH, dark+light, шрифты, токены)
 * СВЯЗИ: подключается ПЕРВЫМ во все страницы
 * РАЗМЕР: ~600 строк
 */

@layer reset, tokens, base, theme;

/* === LAYER: RESET === */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; tab-size: 4; }
    body { margin: 0; min-height: 100vh; }
    h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    button, input, select, textarea { font: inherit; color: inherit; }
    button { background: none; border: 0; cursor: pointer; padding: 0; }
    a { color: inherit; text-decoration: none; }
    ul, ol { padding: 0; margin: 0; list-style: none; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .no-transition, .no-transition * { transition: none !important; }
    [hidden] { display: none !important; }
}

/* === LAYER: TOKENS (DEFAULT = DARK) === */
@layer tokens {
    :root {
        /* Фон/слои */
        --bg-primary:   oklch(8% 0.005 240);
        --bg-secondary: oklch(12% 0.008 240);
        --bg-card:      oklch(15% 0.01 240);
        --bg-elevated:  oklch(18% 0.012 240);
        --bg-overlay:   oklch(0% 0 0 / 0.6);

        /* Бордеры */
        --border:       oklch(28% 0.01 240 / 0.5);
        --border-hover: oklch(40% 0.015 240 / 0.7);
        --border-strong: oklch(50% 0.015 240);

        /* Текст */
        --text-primary: oklch(96% 0.005 240);
        --text-muted:   oklch(70% 0.01 240);
        --text-subtle:  oklch(50% 0.01 240);

        /* Бренд = жёлтый/amber (как market.ai-platform.space) */
        --accent:        oklch(82% 0.16 90);
        --accent-hover:  oklch(88% 0.18 90);
        --accent-active: oklch(75% 0.15 90);
        --accent-soft:   oklch(82% 0.16 90 / 0.12);
        --accent-text:   oklch(15% 0.05 90);

        /* Status */
        --success:      oklch(70% 0.16 165);
        --success-soft: oklch(70% 0.16 165 / 0.12);
        --warning:      oklch(75% 0.18 70);
        --warning-soft: oklch(75% 0.18 70 / 0.12);
        --danger:       oklch(65% 0.22 25);
        --danger-soft:  oklch(65% 0.22 25 / 0.12);
        --info:         oklch(70% 0.13 230);
        --info-soft:    oklch(70% 0.13 230 / 0.12);

        /* Шрифты */
        --font-display: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
        --font-body:    'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --font-mono:    'JetBrains Mono', ui-monospace, monospace;

        /* Радиусы */
        --radius-sm: 6px;
        --radius-md: 10px;
        --radius-lg: 14px;
        --radius-xl: 20px;
        --radius-pill: 999px;

        /* Spacing scale (4pt grid) */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 20px;
        --space-6: 24px;
        --space-8: 32px;
        --space-10: 40px;
        --space-12: 48px;
        --space-16: 64px;
        --space-20: 80px;
        --space-24: 96px;

        /* Тени */
        --shadow-sm:  0 1px 2px oklch(0% 0 0 / 0.3);
        --shadow-md:  0 4px 12px oklch(0% 0 0 / 0.35);
        --shadow-lg:  0 12px 32px oklch(0% 0 0 / 0.45);
        --shadow-xl:  0 24px 64px oklch(0% 0 0 / 0.55);
        --shadow-glow: 0 0 32px var(--accent-soft);

        /* Transitions */
        --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
        --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
        --ease-spring:    linear(0, 0.36, 0.78, 1.02, 1.04, 1, 1);
        --duration-fast:    150ms;
        --duration-normal:  240ms;
        --duration-slow:    400ms;

        /* Размеры */
        --max-width: 1200px;
        --max-width-narrow: 720px;
        --header-height: 64px;
        --tap-target: 44px;

        /* Z-index */
        --z-header: 100;
        --z-dropdown: 200;
        --z-dialog: 300;
        --z-toast: 400;
    }

    html.light-theme {
        --bg-primary:   oklch(98% 0.003 240);
        --bg-secondary: oklch(95% 0.005 240);
        --bg-card:      oklch(100% 0 0);
        --bg-elevated:  oklch(99% 0.003 240);
        --bg-overlay:   oklch(0% 0 0 / 0.4);

        --border:       oklch(85% 0.005 240);
        --border-hover: oklch(70% 0.008 240);
        --border-strong: oklch(60% 0.01 240);

        --text-primary: oklch(15% 0.01 240);
        --text-muted:   oklch(40% 0.01 240);
        --text-subtle:  oklch(58% 0.01 240);

        --accent:        oklch(70% 0.18 75);
        --accent-hover:  oklch(75% 0.20 75);
        --accent-active: oklch(62% 0.16 75);
        --accent-soft:   oklch(70% 0.18 75 / 0.12);
        --accent-text:   oklch(98% 0.005 240);

        --shadow-sm:  0 1px 2px oklch(0% 0 0 / 0.06);
        --shadow-md:  0 4px 12px oklch(0% 0 0 / 0.08);
        --shadow-lg:  0 12px 32px oklch(0% 0 0 / 0.10);
        --shadow-xl:  0 24px 64px oklch(0% 0 0 / 0.12);
    }
}

/* === LAYER: BASE === */
@layer base {
    html {
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.5;
        background: var(--bg-primary);
        color: var(--text-primary);
        scroll-behavior: smooth;
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    body {
        background: transparent;
        color: var(--text-primary);
        font-family: var(--font-body);
        font-feature-settings: 'cv11', 'ss01', 'ss02';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: relative;
        min-height: 100vh;
    }

    html {
        transition: background var(--duration-normal) var(--ease-out-quart);
    }

    /* === СКВОЗНОЙ АТМОСФЕРНЫЙ ФОН (1:1 как market.ai-platform.space) === */
    /* Mesh-фон: бирюзовые углы + золотые центральные orbs */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            /* Бирюзовые углы (доминанта на market) */
            radial-gradient(ellipse 60% 50% at 0% 0%,    oklch(70% 0.16 175 / 0.18) 0%, transparent 55%),
            radial-gradient(ellipse 60% 50% at 100% 0%,  oklch(70% 0.16 175 / 0.16) 0%, transparent 55%),
            radial-gradient(ellipse 60% 50% at 0% 100%,  oklch(70% 0.16 175 / 0.14) 0%, transparent 55%),
            radial-gradient(ellipse 60% 50% at 100% 100%, oklch(70% 0.16 175 / 0.14) 0%, transparent 55%),
            /* Золотые точечные orbs (акцент market) */
            radial-gradient(ellipse 35% 30% at 25% 35%,  oklch(82% 0.16 90 / 0.14) 0%, transparent 60%),
            radial-gradient(ellipse 30% 25% at 75% 65%,  oklch(82% 0.16 90 / 0.10) 0%, transparent 60%),
            /* Базовая подложка темнее body — глубина */
            radial-gradient(ellipse 100% 100% at 50% 50%, oklch(8% 0.01 200) 0%, oklch(6% 0.005 240) 100%);
        animation: bg-drift 28s ease-in-out infinite alternate;
    }

    @keyframes bg-drift {
        0%   { transform: translate(0, 0) scale(1); }
        50%  { transform: translate(-1.5%, 1%) scale(1.03); }
        100% { transform: translate(1.5%, -1%) scale(1.01); }
    }

    /* Светлая тема — мягкие зелёно-золотые orbs */
    html.light-theme body::before {
        background:
            radial-gradient(ellipse 60% 50% at 0% 0%,    oklch(70% 0.16 175 / 0.08) 0%, transparent 55%),
            radial-gradient(ellipse 60% 50% at 100% 0%,  oklch(70% 0.16 175 / 0.07) 0%, transparent 55%),
            radial-gradient(ellipse 60% 50% at 0% 100%,  oklch(70% 0.16 175 / 0.06) 0%, transparent 55%),
            radial-gradient(ellipse 60% 50% at 100% 100%, oklch(70% 0.16 175 / 0.06) 0%, transparent 55%),
            radial-gradient(ellipse 35% 30% at 25% 35%,  oklch(70% 0.18 75 / 0.06) 0%, transparent 60%),
            radial-gradient(ellipse 30% 25% at 75% 65%,  oklch(70% 0.18 75 / 0.05) 0%, transparent 60%),
            radial-gradient(ellipse 100% 100% at 50% 50%, oklch(99% 0.003 240) 0%, oklch(96% 0.005 240) 100%);
    }

    /* Reduced motion — без анимации */
    @media (prefers-reduced-motion: reduce) {
        body::before { animation: none; }
    }

    /* Контент должен быть выше фона */
    body > * {
        position: relative;
        z-index: 0;
    }

    /* === КАСТОМНЫЙ КУРСОР СО СВЕЧЕНИЕМ (как market.ai-platform.space) === */
    /* Заменяет системный курсор на SVG со свечением вокруг */
    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
        html[data-cursor-active="true"], html[data-cursor-active="true"] * {
            cursor: none !important;
        }
    }

    #sf-cursor-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        pointer-events: none;
        z-index: 10000;
        transform: translate3d(-100px, -100px, 0);
        opacity: 0;
        transition: opacity 300ms var(--ease-out-quart);
        will-change: transform, opacity;
    }

    html[data-cursor-active="true"] #sf-cursor-wrap {
        opacity: 1;
    }

    /* Halo за курсором — 40×40, blur(40px) (как market.ai-platform.space) */
    .sf-cursor-blur {
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        filter: blur(40px);
        opacity: 0.8;
        transition: width 200ms var(--ease-out-quart),
                    height 200ms var(--ease-out-quart),
                    top 200ms var(--ease-out-quart),
                    left 200ms var(--ease-out-quart),
                    opacity 200ms var(--ease-out-quart);
    }

    html.light-theme .sf-cursor-blur {
        background: rgba(0, 0, 0, 0.5);
        opacity: 0.7;
    }

    /* Стрелка курсора — белая в dark, тёмная в light */
    .sf-cursor-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        color: #ffffff;
        filter: drop-shadow(0 0 8px #ffffff);
    }

    .sf-cursor-svg path {
        fill: currentColor;
        stroke: currentColor;
    }

    html.light-theme .sf-cursor-svg {
        color: #1a1a1a;
        filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
    }

    /* Hover на интерактиве — едва заметное усиление halo (без разрастания) */
    #sf-cursor-wrap.is-hover .sf-cursor-blur {
        width: 50px;
        height: 50px;
        top: -5px;
        left: -5px;
        opacity: 0.9;
    }

    /* Скрываем кастомный курсор на touch устройствах */
    @media (pointer: coarse), (prefers-reduced-motion: reduce) {
        #sf-cursor-wrap { display: none !important; }
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.15;
        color: var(--text-primary);
    }

    h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
    h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
    h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
    h4 { font-size: 1rem; }

    p { color: var(--text-muted); line-height: 1.6; }

    code, kbd, pre, samp {
        font-family: var(--font-mono);
        font-size: 0.95em;
    }

    code {
        background: var(--bg-secondary);
        padding: 2px 6px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
    }

    pre {
        background: var(--bg-secondary);
        padding: var(--space-4);
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        overflow-x: auto;
    }

    pre code { background: none; padding: 0; border: 0; }

    a {
        color: var(--accent);
        text-decoration: none;
        transition: color var(--duration-fast) var(--ease-out-quart);
    }

    a:hover { color: var(--accent-hover); }

    hr {
        border: 0;
        border-top: 1px solid var(--border);
        margin: var(--space-8) 0;
    }

    /* Скроллбар */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); }
    ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

    /* Selection */
    ::selection { background: var(--accent); color: var(--accent-text); }
}

/* === LAYER: THEME SWITCH UTILITIES === */
@layer theme {
    /* View Transitions API */
    @supports (view-transition-name: none) {
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation-duration: var(--duration-normal);
            animation-timing-function: var(--ease-out-quart);
        }
    }

    /* Утилиты */
    .container {
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
        padding-inline: var(--space-5);
    }

    .container-narrow {
        max-width: var(--max-width-narrow);
        margin-inline: auto;
        padding-inline: var(--space-5);
    }

    .text-muted   { color: var(--text-muted); }
    .text-subtle  { color: var(--text-subtle); }
    .text-accent  { color: var(--accent); }
    .text-success { color: var(--success); }
    .text-warning { color: var(--warning); }
    .text-danger  { color: var(--danger); }

    .text-mono    { font-family: var(--font-mono); }
    .text-display { font-family: var(--font-display); }

    .text-xs   { font-size: 0.75rem; }
    .text-sm   { font-size: 0.875rem; }
    .text-base { font-size: 1rem; }
    .text-lg   { font-size: 1.125rem; }
    .text-xl   { font-size: 1.25rem; }
    .text-2xl  { font-size: 1.5rem; }

    .font-medium  { font-weight: 500; }
    .font-semibold { font-weight: 600; }
    .font-bold    { font-weight: 700; }

    .text-center { text-align: center; }
    .text-left   { text-align: left; }
    .text-right  { text-align: right; }

    /* Anim utilities */
    .fade-in { animation: fadeIn var(--duration-slow) var(--ease-out-quart) both; }
    .fade-in-up { animation: fadeInUp var(--duration-slow) var(--ease-out-quart) both; }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
        50% { box-shadow: 0 0 0 8px transparent; }
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    @keyframes blink {
        50% { opacity: 0.3; }
    }

    /* Скрытые через @starting-style для модалок (плавное появление) */
    @supports (starting-style: 1) {
        @starting-style {
            dialog[open] {
                opacity: 0;
                transform: translateY(20px);
            }
        }
    }

    /* Skeleton */
    .skeleton {
        background: linear-gradient(
            90deg,
            var(--bg-secondary) 0%,
            var(--bg-elevated) 50%,
            var(--bg-secondary) 100%
        );
        background-size: 200% 100%;
        animation: skeleton 1.5s linear infinite;
        border-radius: var(--radius-md);
    }
    @keyframes skeleton {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* content-visibility for long lists */
    .cv-auto {
        content-visibility: auto;
        contain-intrinsic-size: 0 500px;
    }

    /* Скрыть визуально, оставить для screen readers */
    .sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Spinner */
    .spinner {
        display: inline-block;
        width: 1em; height: 1em;
        border: 2px solid var(--border);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
}