/* === ByteDeck v2 — Base CSS === */

:root {
    /* Colors */
    --color-bg: #06171E;
    --color-surface: #0a2030;
    --color-surface-2: #0d2a3f;
    --color-border: #015351;
    --color-border-dim: rgba(1, 83, 81, 0.3);
    --color-accent: #FD7D00;
    --color-accent-dim: rgba(253, 125, 0, 0.15);
    --color-text: #FFFFFF;
    --color-text-dim: #8899aa;
    --color-green: #22c55e;
    --color-red: #ef4444;
    --color-yellow: #eab308;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-xxl: 32px;
    --space-3xl: 48px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Fonts */
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Ambient Grid Background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(1, 83, 81, 0.03) 59px, rgba(1, 83, 81, 0.03) 60px),
        repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(1, 83, 81, 0.03) 59px, rgba(1, 83, 81, 0.03) 60px);
    pointer-events: none;
    z-index: 0;
}

/* Animated Gradient Background */
body.gradient-bg-active::after {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(
        -45deg,
        rgba(253, 125, 0, 0.06),
        rgba(1, 83, 81, 0.08),
        rgba(6, 23, 30, 0.02),
        rgba(0, 180, 170, 0.06),
        rgba(253, 125, 0, 0.04)
    );
    background-size: 400% 400%;
    animation: gradientShift 45s ease infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 100% 0%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    body.gradient-bg-active::after {
        animation: none;
    }
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a {
    color: var(--color-accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-surface-2);
}

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

/* Alpine.js cloak (hide until init) */
[x-cloak] { display: none !important; }

/* Utility Classes */
.text-dim { color: var(--color-text-dim); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-green); }
.text-error { color: var(--color-red); }
.text-mono, .font-mono { font-family: var(--font-mono); }