/**
 * ///▙▖▙▖▞▞▙▂▂▂▂▂▂▂▂▂▂▂▂▂▂ ::[0xDS]::
 * ▛//▞▞ ⟦⎊⟧ :: ⧗-25.177 // 3OX.DESIGN.SYSTEM ▞▞
 * ▛▞// 3ox.css :: ρ{define}.φ{apply}.τ{render} ▹
 * //▞⋮⋮ ⟦🎨⟧ :: [design] [css] [theme] [⊢ ⇨ ⟿ ▷]
 * ⫸ 〔design.system.context〕
 *
 * /// Status: [ACTIVE] | Version: 1.0.0 | Authority: ZENS3N | Created: ⧗-25.177
 * /// Universal design system for all 3OX.Ai interfaces
 */

/* ═══════════════════════════════════════════════════════════════
   FONTS
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════════
   COLOR PALETTE
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Backgrounds */
    --bg-void: #050508;
    --bg-deep: #0a0a0f;
    --bg-panel: #12121a;
    --bg-elevated: #1a1a24;
    --bg-surface: #22222e;
    
    /* Borders */
    --border-dim: #1a1a2a;
    --border-default: #2a2a3a;
    --border-bright: #3a3a4a;
    
    /* Text */
    --text-primary: #e8e8f0;
    --text-secondary: #a8a8b8;
    --text-dim: #6a6a7a;
    --text-muted: #4a4a5a;
    
    /* Core Accent Colors (vec3 axes) */
    --accent-tape: #ff6b35;       /* Orange - history/memory */
    --accent-pulse: #00d4aa;      /* Cyan - activity/events */
    --accent-gate: #7b5cff;       /* Purple - authority/gate */
    
    /* Glow variants */
    --glow-tape: rgba(255, 107, 53, 0.4);
    --glow-pulse: rgba(0, 212, 170, 0.4);
    --glow-gate: rgba(123, 92, 255, 0.4);
    
    /* Subtle glow variants */
    --glow-tape-subtle: rgba(255, 107, 53, 0.15);
    --glow-pulse-subtle: rgba(0, 212, 170, 0.15);
    --glow-gate-subtle: rgba(123, 92, 255, 0.15);
    
    /* Extended Palette (Archetypes) */
    --accent-void: #444455;
    --accent-sage: #ff6b35;       /* Same as TAPE */
    --accent-storm: #00d4aa;      /* Same as PULSE */
    --accent-oracle: #7b5cff;     /* Same as GATE */
    --accent-flame: #ff9500;      /* Orange-yellow blend */
    --accent-weaver: #c77dff;     /* Light purple */
    --accent-tide: #00b4d8;       /* Ocean blue */
    --accent-crown: #ffd700;      /* Gold */
    --accent-mirror: #888899;     /* Neutral silver */
    
    /* Status Colors */
    --status-success: #00d4aa;
    --status-warning: #ffaa00;
    --status-error: #ff4757;
    --status-info: #00b4d8;
    
    /* Gradients */
    --gradient-vec3: linear-gradient(135deg, var(--accent-tape), var(--accent-pulse), var(--accent-gate));
    --gradient-fire: linear-gradient(135deg, #ff6b35, #ff9500);
    --gradient-ice: linear-gradient(135deg, #00b4d8, #00d4aa);
    --gradient-void: linear-gradient(135deg, #1a1a24, #0a0a0f);
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow-tape: 0 0 20px var(--glow-tape);
    --shadow-glow-pulse: 0 0 20px var(--glow-pulse);
    --shadow-glow-gate: 0 0 20px var(--glow-gate);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-default: 0.25s ease;
    --transition-slow: 0.4s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ═══════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════ */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    background: var(--bg-deep);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

/* Display - For titles and headers */
.font-display {
    font-family: 'Orbitron', sans-serif;
}

/* Mono - For code and data */
.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Headings */
h1, .h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    line-height: 1.2;
}

h2, .h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.3;
}

h3, .h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

h4, .h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* Text sizes */
.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; }
.text-3xl { font-size: 2rem; }

/* Text colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.text-tape { color: var(--accent-tape); }
.text-pulse { color: var(--accent-pulse); }
.text-gate { color: var(--accent-gate); }

/* Gradient text */
.text-gradient {
    background: var(--gradient-vec3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Panel */
.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.panel-elevated {
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
}

.panel-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.panel-title::before {
    content: '▛▞';
    opacity: 0.5;
}

/* Cards */
.card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: var(--transition-default);
}

.card:hover {
    border-color: var(--border-bright);
    background: rgba(0, 0, 0, 0.4);
}

.card-tape { border-left: 3px solid var(--accent-tape); }
.card-pulse { border-left: 3px solid var(--accent-pulse); }
.card-gate { border-left: 3px solid var(--accent-gate); }

/* Buttons */
.btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 500;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-panel);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-default);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.btn:hover {
    border-color: var(--border-bright);
    background: var(--bg-elevated);
}

.btn-tape {
    border-color: var(--accent-tape);
    color: var(--accent-tape);
}
.btn-tape:hover {
    background: var(--glow-tape-subtle);
    box-shadow: var(--shadow-glow-tape);
}

.btn-pulse {
    border-color: var(--accent-pulse);
    color: var(--accent-pulse);
}
.btn-pulse:hover {
    background: var(--glow-pulse-subtle);
    box-shadow: var(--shadow-glow-pulse);
}

.btn-gate {
    border-color: var(--accent-gate);
    color: var(--accent-gate);
}
.btn-gate:hover {
    background: var(--glow-gate-subtle);
    box-shadow: var(--shadow-glow-gate);
}

.btn-solid {
    background: var(--gradient-vec3);
    border: none;
    color: white;
    font-weight: 600;
}

/* Input / Slider */
input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: var(--radius-sm);
    background: var(--border-default);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

input[type="range"].tape::-webkit-slider-thumb {
    background: var(--accent-tape);
    box-shadow: var(--shadow-glow-tape);
}

input[type="range"].pulse::-webkit-slider-thumb {
    background: var(--accent-pulse);
    box-shadow: var(--shadow-glow-pulse);
}

input[type="range"].gate::-webkit-slider-thumb {
    background: var(--accent-gate);
    box-shadow: var(--shadow-glow-gate);
}

/* Text input */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-void);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    width: 100%;
    transition: var(--transition-default);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-pulse);
    box-shadow: 0 0 0 2px var(--glow-pulse-subtle);
}

/* ═══════════════════════════════════════════════════════════════
   GLYPHS & DECORATIONS
   ═══════════════════════════════════════════════════════════════ */

/* SXSL Header Glyph */
.glyph-header {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    opacity: 0.6;
}

/* Border decoration */
.border-glyph {
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.4;
}

/* Saga marker */
.saga-marker::before {
    content: '▛//▞▞ ⟦⎊⟧';
    color: var(--text-dim);
    opacity: 0.5;
    margin-right: var(--space-sm);
}

/* Section divider */
.divider {
    height: 1px;
    background: var(--border-default);
    margin: var(--space-xl) 0;
}

.divider-glyph {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.divider-glyph::before,
.divider-glyph::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-default);
}

/* Loading bar (3ox style) */
.loading-bar {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: var(--text-dim);
}

.loading-bar::before {
    content: '...loading ▛▞//';
}

.loading-bar::after {
    content: '▹';
}

/* Status indicators */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.online { background: var(--status-success); box-shadow: 0 0 8px var(--status-success); }
.status-dot.warning { background: var(--status-warning); box-shadow: 0 0 8px var(--status-warning); }
.status-dot.offline { background: var(--status-error); box-shadow: 0 0 8px var(--status-error); }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

@keyframes pulse-glow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-pulse { animation: pulse-glow 2s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 0.4s ease-out; }
.animate-slide-in { animation: slide-in-left 0.3s ease-out; }

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.m-auto { margin: auto; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 1200px; }
.max-w-2xl { max-width: 1400px; }

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

.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.25rem; }
    .panel { padding: var(--space-md); }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER SIGNATURE
   ═══════════════════════════════════════════════════════════════ */

.footer-3ox {
    text-align: center;
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--border-default);
    color: var(--text-dim);
    font-size: 0.8rem;
}

.footer-3ox .glyph {
    opacity: 0.4;
    margin-bottom: var(--space-sm);
}

.footer-3ox .signature::after {
    content: ':: 𝜵';
    display: block;
    margin-top: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════════════
   :: ∎
   ═══════════════════════════════════════════════════════════════ */