/* Hyperhat Studio — design tokens. Single dark theme inspired by Cursor’s Agents Window chrome: deep charcoal surfaces, cool gray text, muted periwinkle accent. Light mode is removed — is hardcoded so every [data-theme="dark"] override in component stylesheets always applies. */ :root, [data-theme="dark"] { color-scheme: dark; /* HSL tokens (shadcn-style) */ --background: 228 10% 9%; --foreground: 0 0% 80%; /* #cccccc */ --muted-hsl: 0 0% 15%; /* #252526 */ --muted-foreground: 0 0% 52%; /* #858585 */ --card: 0 0% 15%; /* #252526 */ --border-hsl: 0 0% 24%; /* #3c3c3c */ --primary-hsl: 204 100% 40%; /* #007acc */ --primary-foreground: 0 0% 100%; /* #ffffff */ --secondary-hsl: 0 0% 24%; /* #3c3c3c */ --destructive: 0 100% 60%; --success: 120 100% 25%; --warning: 39 100% 50%; --info: 204 100% 40%; /* Accent — VS Code Blue */ --blue: #007acc; --blue-hover: #1177bb; --blue-container: rgba(0, 122, 204, 0.2); --accent: #007acc; --accent-text: #4fc1ff; --accent-hover: #1177bb; --accent-foreground: #ffffff; --green: #89d185; --yellow: #cca700; --red: #f14c4c; /* Surfaces — standard VS Code dark+ */ --surface: #252526; --surface-1: #333333; --surface-2: #2d2d2d; --surface-3: #3c3c3c; --sidebar-bg: #252526; --activity-bar-bg: #333333; --sidebar-hover: #2a2d2e; --sidebar-active: #ffffff; --sidebar-active-bg: #37373d; --editor-bg: #1e1e1e; --terminal-bg: #1e1e1e; --panel-bg: #1e1e1e; --tab-inactive-bg: #2d2d2d; --tab-active-bg: #1e1e1e; --top-bar-bg: #333333; --dropdown-bg: #252526; --input-bg: #3c3c3c; --dialog-bg: #252526; --composer-bg: #252526; --toolbar-bg: #252526; --outline: #3c3c3c; --outline-strong: #454545; --border-subtle: #3c3c3c; --border-muted: #2d2d2d; --text: #cccccc; --text-secondary: #969696; --muted: #858585; --placeholder: #858585; --line-number: #858585; --line-number-bg: #1e1e1e; --hover-overlay: rgba(255, 255, 255, 0.1); --hover-overlay-strong: rgba(255, 255, 255, 0.2); --caret: #aeafad; --selection-bg: #264f78; --tree-indent: 16px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55); --glow: rgba(0, 122, 204, 0.28); /* Less rounded corners, more blocky like VS Code */ --radius-xl: 8px; --radius-lg: 6px; --radius-md: 4px; --radius: 3px; /* Classic VS Code fonts */ --font-display: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; --font-body: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; --font-mono: "Consolas", "Courier New", monospace; }