1 files changed, 248 insertions, 0 deletions
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..da13c1f
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,248 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --sidebar-width: 240px;
+    --tabs-height: 36px;
+    --status-height: 24px;
+
+    --color-editor-bg: #0c0c0e;
+    --color-editor-surface: #121216;
+    --color-editor-line: #19191d;
+
+    --color-panel-bg: #141417;
+    --color-panel-hover: #1c1c21;
+    --color-panel-active: #24242b;
+    --color-activity-bg: #08080a;
+    --color-panel-border: rgba(255, 255, 255, 0.03);
+
+    --color-accent: #f0a030;
+    --color-accent-hover: #f5b84a;
+    --color-accent-muted: rgba(240, 160, 48, 0.2);
+    --color-accent-text: #f5c56b;
+
+    --color-text-primary: #e8e8ed;
+    --color-text-secondary: #9b9ba3;
+    --color-text-muted: #7a7a82;
+
+    --color-semantic-error: #e34c4c;
+    --color-semantic-warning: #f0a030;
+    --color-semantic-info: #42a5f5;
+    --color-semantic-success: #4caf50;
+
+    --color-ruler: rgba(255, 255, 255, 0.06);
+
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
+    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.35), 0 2px 4px -2px rgba(0,0,0,0.25);
+    --shadow-lg: 0 4px 6px rgba(0,0,0,0.3), 0 10px 30px rgba(0,0,0,0.2);
+    --shadow-xl: 0 8px 12px rgba(0,0,0,0.3), 0 18px 50px rgba(0,0,0,0.18);
+    --shadow-2xl: 0 12px 24px rgba(0,0,0,0.3), 0 24px 64px rgba(0,0,0,0.18);
+  }
+
+  [data-theme="light"] {
+    --color-editor-bg: #fafbfc;
+    --color-editor-surface: #f0f2f5;
+    --color-editor-line: #e8eaed;
+
+    --color-panel-bg: #f3f4f6;
+    --color-panel-hover: #e5e7eb;
+    --color-panel-active: #d1d5db;
+    --color-activity-bg: #e8eaed;
+    --color-panel-border: rgba(0, 0, 0, 0.03);
+
+    --color-accent: #d97706;
+    --color-accent-hover: #b45309;
+    --color-accent-muted: rgba(217, 119, 6, 0.15);
+    --color-accent-text: #92400e;
+
+    --color-text-primary: #111827;
+    --color-text-secondary: #4b5563;
+    --color-text-muted: #6b7280;
+
+    --color-semantic-error: #dc2626;
+    --color-semantic-warning: #d97706;
+    --color-semantic-info: #2563eb;
+    --color-semantic-success: #16a34a;
+
+    --color-ruler: rgba(0, 0, 0, 0.06);
+
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
+    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
+    --shadow-lg: 0 4px 6px rgba(0,0,0,0.05), 0 10px 30px rgba(0,0,0,0.04);
+    --shadow-xl: 0 8px 12px rgba(0,0,0,0.05), 0 18px 50px rgba(0,0,0,0.04);
+    --shadow-2xl: 0 12px 24px rgba(0,0,0,0.06), 0 24px 64px rgba(0,0,0,0.05);
+  }
+
+  html, body, #root {
+    @apply m-0 p-0 h-full overflow-hidden;
+  }
+
+  html {
+    overscroll-behavior: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    scrollbar-width: thin;
+  }
+
+  body {
+    @apply font-ui antialiased;
+    background-color: var(--color-editor-bg);
+    color: var(--color-text-primary);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  body, body * {
+    transition: background-color 0.25s ease,
+                color 0.25s ease,
+                border-color 0.25s ease,
+                box-shadow 0.25s ease;
+  }
+
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  svg, img {
+    -webkit-user-drag: none;
+    user-select: none;
+  }
+
+  .cm-editor, .cm-editor * {
+    user-select: text;
+    -webkit-user-select: text;
+  }
+
+  .cm-editor {
+    line-height: 1.6;
+    letter-spacing: 0;
+    font-variant-ligatures: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .cm-scroller {
+    scroll-behavior: auto;
+  }
+
+  .cm-content {
+    padding: 0;
+  }
+
+  .cm-line {
+    padding: 0;
+  }
+
+  *:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -2px;
+  }
+
+  .focus-ring:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  *::selection {
+    background-color: var(--color-accent-muted);
+  }
+
+  *::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--color-panel-border);
+    border-radius: 4px;
+    transition: opacity 0.2s ease, background-color 0.15s ease;
+    opacity: 0;
+  }
+
+  *:hover::-webkit-scrollbar-thumb {
+    opacity: 0.7;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+    background: var(--color-text-muted);
+  }
+
+  *::-webkit-scrollbar-thumb:active {
+    opacity: 1;
+    background: var(--color-text-secondary);
+  }
+
+  .cm-scroller::-webkit-scrollbar-thumb {
+    opacity: 0.4;
+  }
+
+  .cm-scroller:hover::-webkit-scrollbar-thumb {
+    opacity: 0.8;
+  }
+
+  .shadow-glass {
+    box-shadow: var(--shadow-2xl);
+  }
+
+  .shadow-glass-lg {
+    box-shadow: var(--shadow-lg);
+  }
+
+  .panel-mica {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
+      var(--color-panel-bg);
+  }
+
+  [data-theme="light"] .panel-mica {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, transparent 40%),
+      var(--color-panel-bg);
+  }
+
+  .backdrop-glass {
+    background-color: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+
+  [data-theme="light"] .backdrop-glass {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+
+  @keyframes contextMenuIn {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  .context-menu {
+    animation: contextMenuIn 0.12s ease-out;
+    transform-origin: top left;
+  }
+
+  @keyframes toastIn {
+    from { opacity: 0; transform: translateY(16px) scale(0.96); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
+  @keyframes toastOut {
+    from { opacity: 1; transform: translateY(0) scale(1); }
+    to { opacity: 0; transform: translateY(8px) scale(0.96); }
+  }
+
+  .toast {
+    animation: toastIn 0.25s ease-out;
+  }
+
+  .toast.toast-exit {
+    animation: toastOut 0.2s ease-in forwards;
+  }
+}