/* ============================================================ QUERYBOX DESIGN SYSTEM — TOKEN LAYER networktoolkit.io Terminal / Developer Tooling Aesthetic ============================================================ Load order: tokens.css → base.css → [page].css Never hardcode hex values in component files. Set --accent-current on any container to scope colour. ============================================================ */ :root { /* ---------------------------------------------------------- BACKGROUNDS Layer system: base → surface → elevated → overlay → recessed ---------------------------------------------------------- */ --bg-base: #0a0a0f; /* Page canvas */ --bg-surface: #111118; /* Cards, inputs, panels */ --bg-elevated: #17171f; /* Dropdowns, tooltips */ --bg-overlay: #1e1e28; /* Hover states, selected rows */ --bg-recessed: #080810; /* Terminal, code blocks */ /* ---------------------------------------------------------- TEXT ---------------------------------------------------------- */ --text-primary: #e0e0e0; --text-secondary: #999999; --text-tertiary: #555560; --text-ghost: #333340; --text-inverse: #0a0a0f; /* Text on bright accent surfaces */ /* ---------------------------------------------------------- BORDERS ---------------------------------------------------------- */ --border-strong: rgba(255, 255, 255, 0.12); --border-default: rgba(255, 255, 255, 0.07); --border-subtle: rgba(255, 255, 255, 0.04); --border-focus: var(--accent-current); /* ---------------------------------------------------------- ACCENT PALETTE Each has full, dim (55% alpha), and tint (12% alpha) ---------------------------------------------------------- */ /* Green — success, active, ping OK, tool badge */ --accent-green: #00FF94; --accent-green-dim: rgba(0, 255, 148, 0.55); --accent-green-tint: rgba(0, 255, 148, 0.07); /* Amber — warning, pending, region badge */ --accent-amber: #FFB800; --accent-amber-dim: rgba(255, 184, 0, 0.55); --accent-amber-tint: rgba(255, 184, 0, 0.07); /* Red — error, critical, offline */ --accent-red: #FF6B6B; --accent-red-dim: rgba(255, 107, 107, 0.55); --accent-red-tint: rgba(255, 107, 107, 0.07); /* Cyan — info, focus ring, host badge, brand */ --accent-cyan: #00D4FF; --accent-cyan-dim: rgba(0, 212, 255, 0.55); --accent-cyan-tint: rgba(0, 212, 255, 0.07); /* Violet — secondary actions, param badge */ --accent-violet: #B47FFF; --accent-violet-dim: rgba(180, 127, 255, 0.55); --accent-violet-tint: rgba(180, 127, 255, 0.07); /* Neutral — chrome, decorative */ --accent-neutral: #6a6a7a; --accent-neutral-dim: rgba(106, 106, 122, 0.55); --accent-neutral-tint:rgba(106, 106, 122, 0.07); /* Current accent — override per container scope */ --accent-current: var(--accent-cyan); /* ---------------------------------------------------------- SEMANTIC ROLE TOKENS ---------------------------------------------------------- */ --color-success: var(--accent-green); --color-warning: var(--accent-amber); --color-danger: var(--accent-red); --color-info: var(--accent-cyan); --color-brand: var(--accent-cyan); /* ---------------------------------------------------------- BADGE BORDER ALPHA VALUES bg = color at 7% alpha, border = color at 27% alpha ---------------------------------------------------------- */ --badge-tool-bg: rgba(0, 212, 255, 0.07); --badge-tool-border: rgba(0, 212, 255, 0.27); --badge-host-bg: rgba(0, 255, 148, 0.07); --badge-host-border: rgba(0, 255, 148, 0.27); --badge-param-bg: rgba(180, 127, 255, 0.07); --badge-param-border: rgba(180, 127, 255, 0.27); --badge-region-bg: rgba(255, 184, 0, 0.07); --badge-region-border:rgba(255, 184, 0, 0.27); /* ---------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------- */ --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; --font-sans: 'DM Sans', 'Outfit', 'Helvetica Neue', sans-serif; --font-display: 'DM Mono', var(--font-mono); --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --leading-tight: 1.2; --leading-base: 1.5; --leading-loose: 1.8; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.08em; --tracking-widest: 0.2em; /* ---------------------------------------------------------- SPACING SCALE (base unit: 4px) ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-sm: 4px; /* badges, kbd hints */ --radius-md: 8px; /* buttons, cells */ --radius-lg: 10px; /* cards, input container, autocomplete */ --radius-xl: 14px; /* modals */ --radius-pill: 999px; /* status pills, filter buttons */ /* ---------------------------------------------------------- SHADOWS ---------------------------------------------------------- */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --glow-focus: 0 0 0 1px var(--accent-current), 0 0 0 3px color-mix(in srgb, var(--accent-current) 15%, transparent); --glow-active: 0 0 0 1px color-mix(in srgb, var(--accent-current) 35%, transparent), 0 4px 32px color-mix(in srgb, var(--accent-current) 8%, transparent); /* Input focus glow — cyan specific */ --glow-input-focus: 0 0 0 1px rgba(0, 212, 255, 0.12), 0 4px 20px rgba(0, 212, 255, 0.05); /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --ease-default: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --duration-fast: 100ms; --duration-base: 200ms; --duration-slow: 350ms; --duration-reveal: 500ms; /* ---------------------------------------------------------- Z-INDEX SCALE ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --topbar-height: 52px; --ad-rail-width: 120px; --ad-rail-height: 320px; --content-padding: var(--space-8); --max-width-sm: 480px; --max-width-md: 720px; --max-width-lg: 960px; --max-width-xl: 1200px; /* ---------------------------------------------------------- MAP (workers page) ---------------------------------------------------------- */ --map-bg: #050810; --map-land: #0e1626; --map-border: rgba(0, 212, 255, 0.14); --map-border-mesh: rgba(0, 212, 255, 0.07); --map-height: 320px; }