/* 
   Echelon Enterprise - Base System 
   Variables, Reset, Typography 
*/

:root {
    /* Color Palette - "Dark Tech" */
    --c-bg: #030304;
    --c-surface: #0a0a0c;
    --c-surface-hover: #121216;
    --c-border: rgba(255, 255, 255, 0.08);
    /* ------------------------------ */
    /* 🎨 BRAND COLORS (EDIT HERE)    */
    /* ------------------------------ */
    --c-accent: #ff4d00;
    /* Main Brand Color (Orange) */
    --c-bg: #050505;
    /* Background Dark */
    --c-surface: #0a0a0a;
    /* Cards / Sections */
    --c-border: #222;
    /* Borders */

    /* Text Colors */
    --c-text-main: #ffffff;
    --c-text-muted: #888888;

    /* ------------------------------ */
    /* 📐 LAYOUT & SHAPES             */
    /* ------------------------------ */
    --r-sm: 0px;
    /* Small Radius (Buttons) */
    --r-md: 0px;
    /* Medium Radius (Cards) */
    --r-lg: 0px;
    /* Large Radius (Hero) */
    --r-full: 0px;
    /* Circle Radius (0 = Square) */

    /* Spacing System */
    --sp-xs: 8px;
    --sp-sm: 16px;
    --sp-md: 24px;
    --sp-lg: 48px;
    --sp-xl: 64px;
    --sp-xxl: 128px;

    /* Typography */
    --f-display: 'Outfit', sans-serif;
    --f-body: 'Inter', sans-serif;
    --f-mono: 'JetBrains Mono', monospace;

    /* Animation */
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    background-color: var(--c-bg);
    color: var(--c-text-main);
}

body {
    font-family: var(--f-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

ul {
    list-style: none;
}

img,
video {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--sp-md);
}

.section-padding {
    padding-top: var(--sp-xxl);
    padding-bottom: var(--sp-xxl);
}

.text-accent {
    color: var(--c-accent);
}

.text-muted {
    color: var(--c-text-muted);
}

.font-mono {
    font-family: var(--f-mono);
    font-size: 0.9em;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--c-bg);
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}