@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;
  }
}