/* === STYLE.CSS ===
 * assets/css/style.css
 * НАЗНАЧЕНИЕ: CSS переменные, базовые стили, утилиты
 * СВЯЗИ: index.php, все компоненты
 * РАЗМЕР: ~280 строк
 */

/* ============================================
   CSS VARIABLES (Dark Theme по умолчанию)
   ============================================ */
:root {
    /* Background */
    --background: 222 47% 6%;
    --foreground: 210 40% 98%;

    /* Card */
    --card: 222 47% 8%;
    --card-foreground: 210 40% 98%;

    /* Primary (Cyan) */
    --primary: 187 94% 48%;
    --primary-foreground: 222 47% 6%;

    /* Secondary (Purple) */
    --secondary: 262 83% 58%;
    --secondary-foreground: 210 40% 98%;

    /* Muted */
    --muted: 222 30% 16%;
    --muted-foreground: 215 16% 55%;

    /* Accent */
    --accent: 222 30% 16%;
    --accent-foreground: 210 40% 98%;

    /* Destructive */
    --destructive: 0 72% 51%;
    --destructive-foreground: 210 40% 98%;

    /* Success */
    --success: 142 71% 45%;
    --success-foreground: 210 40% 98%;

    /* Warning */
    --warning: 38 92% 50%;
    --warning-foreground: 222 47% 6%;

    /* Border */
    --border: 222 30% 16%;
    --input: 222 30% 16%;
    --ring: 187 94% 48%;

    /* Radius */
    --radius: 0.75rem;

    /* Surfaces */
    --surface-0: 222 47% 6%;
    --surface-1: 222 47% 8%;
    --surface-2: 222 40% 11%;
    --surface-3: 222 35% 14%;
    --surface-4: 222 30% 18%;

    /* Glow */
    --glow-primary: 187 94% 48%;
    --glow-secondary: 262 83% 58%;

    /* === EDITOR VARIABLES (для editor.css) === */
    --bg-primary: hsl(222, 47%, 6%);
    --text-primary: hsl(210, 40%, 98%);
    --text-muted: hsl(215, 16%, 55%);
    --card-bg: hsl(222, 47%, 8%);
    --border-color: hsl(222, 30%, 16%);
    --ai-blue: #22d3ee;
    --ai-purple: #8b5cf6;
    --ai-dark: hsl(222, 47%, 6%);
    --ai-gray: hsl(222, 47%, 8%);
    --ai-green: #10b981;
    --color-primary: #22d3ee;
    --color-secondary: #8b5cf6;
    --color-danger: hsl(0, 72%, 51%);
    --gradient-primary: linear-gradient(to right, #22d3ee, #8b5cf6);
    --gradient-card: linear-gradient(135deg, hsl(222, 47%, 8%) 0%, rgba(34, 211, 238, 0.05) 100%);
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

code, pre, .font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.bg-background { background-color: hsl(var(--background)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }

.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-secondary { color: hsl(var(--secondary)); }

.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }

/* Surface layers */
.surface-0 { background-color: hsl(var(--surface-0)); }
.surface-1 { background-color: hsl(var(--surface-1)); }
.surface-2 { background-color: hsl(var(--surface-2)); }
.surface-3 { background-color: hsl(var(--surface-3)); }
.surface-4 { background-color: hsl(var(--surface-4)); }

/* ============================================
   GRADIENTS & EFFECTS
   ============================================ */
.text-gradient {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
}

.bg-gradient-subtle {
    background: linear-gradient(180deg, hsl(var(--surface-1)) 0%, hsl(var(--surface-0)) 100%);
}

.bg-gradient-radial {
    background: radial-gradient(circle at 50% 50%, hsl(var(--surface-2)) 0%, hsl(var(--surface-0)) 100%);
}

.glow-primary {
    box-shadow: 0 0 40px -10px hsl(var(--glow-primary) / 0.5);
}

.glow-secondary {
    box-shadow: 0 0 60px -15px hsl(var(--glow-secondary) / 0.4);
}

.glow-sm {
    box-shadow: 0 0 20px -5px hsl(var(--glow-primary) / 0.3);
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--surface-0));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--surface-3));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--surface-4));
}

/* ============================================
   SELECTION & FOCUS & LINKS
   ============================================ */
::selection {
    background-color: hsl(var(--primary) / 0.3);
    color: hsl(var(--foreground));
}

:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

a {
    color: hsl(var(--primary));
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: hsl(var(--primary) / 0.8);
}

/* ============================================
   CONTAINER
   ============================================ */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .container { padding: 0 1.5rem; }
}

@media (min-width: 1024px) {
    .container { padding: 0 2rem; }
}

/* ============================================
   DECORATIVE ELEMENTS
   ============================================ */
.bg-grid-pattern {
    background-image:
        linear-gradient(hsl(var(--border) / 0.3) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--border) / 0.3) 1px, transparent 1px);
    background-size: 50px 50px;
}

.blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    pointer-events: none;
}

.blur-circle-primary {
    background: hsl(var(--primary));
}

.blur-circle-secondary {
    background: hsl(var(--secondary));
}