/* public/css/style.css
   Base styles and CSS variables */

@import url('terminal.css');
@import url('animations.css');
@import url('layout.css');
@import url('loader.css');
@import url('topbar-logo.css');

:root {
    --void: #0a0b10;
    --surface: #0e1017;
    --surface-2: #13151e;
    --border: rgba(255,255,255,0.05);
    --text: #d4d4d8;
    --text-muted: #71717a;
    
    --logo-blue: #0095ff;
    --logo-green: #00d700;
    --cyan: #22d3ee;
    --magenta: #e879f9;
    --green: #4ade80;
    --red: #f87171;
    --yellow: #fbbf24;
    --blue: #60a5fa;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    background: var(--void);
    color: var(--text);
    min-height: 100vh;
    overflow: hidden;
}

.ambient {
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(0, 149, 255, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(0, 215, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Color classes */
.logo-blue { color: var(--logo-blue); }
.logo-green { color: var(--logo-green); }
.text-cyan { color: var(--cyan); }
.text-green { color: var(--green); }
.text-magenta { color: var(--magenta); }
.text-red { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-blue { color: var(--blue); }
.text-muted { color: var(--text-muted); }
.text-bold { font-weight: 700; }

.banner-os { color: var(--red); }
.banner-date { color: var(--green); }

/* Selection */
::selection {
    background: rgba(34, 211, 238, 0.3);
    color: var(--text);
}

/* Focus styles */
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* Scrollbar DISCRET pour toute la page */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Firefox scrollbar discret */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}