/*
* HIGHGATE DESIGN SYSTEM
* Shared visual standard for all Highgate modules.
* Import via:
*
* Usage:
* 1. Add tag to your HTML
* 2. Add before
* 3. Use var(--hoss-*) variables in your CSS
* 4. Theme toggle: document.dispatchEvent(new CustomEvent('hoss-theme-toggle'))
*/
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700;800&display=swap');
:root {
--hoss-font-display: 'Chakra Petch', sans-serif;
--hoss-font-mono: 'JetBrains Mono', monospace;
--hoss-font-body: 'JetBrains Mono', monospace;
--hoss-radius-sm: 2px;
--hoss-radius-md: 4px;
--hoss-radius-lg: 6px;
--hoss-shadow-glow: 0 0 10px rgba(0, 255, 255, 0.15);
--hoss-shadow-glow-strong: 0 0 20px rgba(0, 255, 255, 0.25), 0 0 40px rgba(0, 255, 255, 0.1);
--hoss-shadow-gold-glow: 0 0 10px rgba(255, 170, 0, 0.2);
--hoss-transition-fast: 150ms ease;
--hoss-transition-base: 250ms ease;
--hoss-transition-slow: 400ms ease;
}
[data-theme="dark"],
:root:not([data-theme="light"]) {
--hoss-bg-primary: #080e14;
--hoss-bg-secondary: #0c1520;
--hoss-bg-tertiary: #111d2b;
--hoss-bg-elevated: #142030;
--hoss-bg-overlay: rgba(8, 14, 20, 0.85);
--hoss-accent-primary: #00ffff;
--hoss-accent-primary-muted: rgba(0, 255, 255, 0.15);
--hoss-accent-primary-subtle: rgba(0, 255, 255, 0.06);
--hoss-accent-gold: #ffaa00;
--hoss-accent-gold-muted: rgba(255, 170, 0, 0.15);
--hoss-accent-gold-subtle: rgba(255, 170, 0, 0.06);
--hoss-text-primary: #e8f0ff;
--hoss-text-secondary: #8892a4;
--hoss-text-tertiary: #556070;
--hoss-text-accent: #00ffff;
--hoss-text-gold: #ffaa00;
--hoss-text-inverse: #080e14;
--hoss-border: #1a3040;
--hoss-border-subtle: #132230;
--hoss-border-accent: rgba(0, 255, 255, 0.3);
--hoss-border-gold: rgba(255, 170, 0, 0.3);
--hoss-input-bg: #0a1520;
--hoss-input-border: #1a3040;
--hoss-input-focus: #00ffff;
--hoss-success: #00e676;
--hoss-warning: #ffaa00;
--hoss-danger: #ff4444;
--hoss-info: #00b8d4;
--hoss-scrollbar-track: #0c1520;
--hoss-scrollbar-thumb: #1a3040;
--hoss-scrollbar-thumb-hover: #00ffff;
}
[data-theme="light"] {
--hoss-bg-primary: #f4f6f9;
--hoss-bg-secondary: #ffffff;
--hoss-bg-tertiary: #edf0f5;
--hoss-bg-elevated: #ffffff;
--hoss-bg-overlay: rgba(244, 246, 249, 0.9);
--hoss-accent-primary: #0099aa;
--hoss-accent-primary-muted: rgba(0, 153, 170, 0.12);
--hoss-accent-primary-subtle: rgba(0, 153, 170, 0.05);
--hoss-accent-gold: #cc8800;
--hoss-accent-gold-muted: rgba(204, 136, 0, 0.12);
--hoss-accent-gold-subtle: rgba(204, 136, 0, 0.05);
--hoss-text-primary: #0a0e1a;
--hoss-text-secondary: #4a5568;
--hoss-text-tertiary: #8892a4;
--hoss-text-accent: #007a88;
--hoss-text-gold: #996600;
--hoss-text-inverse: #f4f6f9;
--hoss-border: #e2e8f0;
--hoss-border-subtle: #edf0f5;
--hoss-border-accent: rgba(0, 153, 170, 0.3);
--hoss-border-gold: rgba(204, 136, 0, 0.3);
--hoss-input-bg: #ffffff;
--hoss-input-border: #cbd5e0;
--hoss-input-focus: #0099aa;
--hoss-success: #0ea55e;
--hoss-warning: #cc8800;
--hoss-danger: #dc2626;
--hoss-info: #0891b2;
--hoss-scrollbar-track: #edf0f5;
--hoss-scrollbar-thumb: #cbd5e0;
--hoss-scrollbar-thumb-hover: #0099aa;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.hoss-body {
margin: 0;
padding: 0;
font-family: var(--hoss-font-body);
background-color: var(--hoss-bg-primary);
color: var(--hoss-text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hoss-heading {
font-family: var(--hoss-font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--hoss-text-primary);
}
.hoss-label {
font-family: var(--hoss-font-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--hoss-text-secondary);
}
.hoss-card {
background-color: var(--hoss-bg-secondary);
border: 1px solid var(--hoss-border);
padding: 1.25rem;
}
.hoss-card-accent {
background-color: var(--hoss-bg-secondary);
border: 1px solid var(--hoss-border-accent);
padding: 1.25rem;
box-shadow: var(--hoss-shadow-glow);
}
.hoss-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-family: var(--hoss-font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid var(--hoss-border-accent);
background-color: var(--hoss-accent-primary-subtle);
color: var(--hoss-text-accent);
cursor: pointer;
transition: all var(--hoss-transition-fast);
}
.hoss-btn:hover {
background-color: var(--hoss-accent-primary-muted);
box-shadow: var(--hoss-shadow-glow);
}
.hoss-btn-gold {
border-color: var(--hoss-border-gold);
background-color: var(--hoss-accent-gold-subtle);
color: var(--hoss-text-gold);
}
.hoss-btn-gold:hover {
background-color: var(--hoss-accent-gold-muted);
box-shadow: var(--hoss-shadow-gold-glow);
}
.hoss-btn-solid {
background-color: var(--hoss-accent-primary);
color: var(--hoss-text-inverse);
border-color: var(--hoss-accent-primary);
}
.hoss-btn-solid:hover {
filter: brightness(1.15);
box-shadow: var(--hoss-shadow-glow-strong);
}
.hoss-input {
width: 100%;
padding: 0.5rem 0.75rem;
font-family: var(--hoss-font-mono);
font-size: 0.8125rem;
background-color: var(--hoss-input-bg);
border: 1px solid var(--hoss-input-border);
color: var(--hoss-text-primary);
outline: none;
transition: border-color var(--hoss-transition-fast), box-shadow var(--hoss-transition-fast);
}
.hoss-input:focus {
border-color: var(--hoss-input-focus);
box-shadow: 0 0 0 2px var(--hoss-accent-primary-muted);
}
.hoss-input::placeholder {
color: var(--hoss-text-tertiary);
}
.hoss-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
font-family: var(--hoss-font-mono);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.08em;
border: 1px solid var(--hoss-border-accent);
background-color: var(--hoss-accent-primary-subtle);
color: var(--hoss-text-accent);
}
.hoss-badge-success {
border-color: rgba(0, 230, 118, 0.3);
background-color: rgba(0, 230, 118, 0.08);
color: var(--hoss-success);
}
.hoss-badge-warning {
border-color: var(--hoss-border-gold);
background-color: var(--hoss-accent-gold-subtle);
color: var(--hoss-warning);
}
.hoss-badge-danger {
border-color: rgba(255, 68, 68, 0.3);
background-color: rgba(255, 68, 68, 0.08);
color: var(--hoss-danger);
}
.hoss-divider {
width: 100%;
height: 1px;
background: var(--hoss-border);
border: none;
margin: 1rem 0;
}
.hoss-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.hoss-scrollbar::-webkit-scrollbar-track {
background: var(--hoss-scrollbar-track);
}
.hoss-scrollbar::-webkit-scrollbar-thumb {
background: var(--hoss-scrollbar-thumb);
}
.hoss-scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--hoss-scrollbar-thumb-hover);
}
.hoss-scanlines {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100vh;
pointer-events: none;
z-index: 9999;
background: linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,0) 50%,
rgba(0,0,0,0.2) 50%,
rgba(0,0,0,0.2)
);
background-size: 100% 4px;
opacity: 0.12;
}
.hoss-tactical-border {
position: relative;
}
.hoss-tactical-border::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 8px; height: 8px;
border-top: 2px solid var(--hoss-accent-primary);
border-left: 2px solid var(--hoss-accent-primary);
pointer-events: none;
}
.hoss-tactical-border::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 8px; height: 8px;
border-bottom: 2px solid var(--hoss-accent-primary);
border-right: 2px solid var(--hoss-accent-primary);
pointer-events: none;
}
@keyframes hoss-pulse-glow {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.hoss-pulse-glow {
animation: hoss-pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes hoss-scanline-move {
0% { transform: translateY(-100%); }
100% { transform: translateY(100vh); }
}