@import "tailwindcss";

@theme {
  --color-base: var(--c-bg);
  --color-surface: var(--c-surface);
  --color-subtle: var(--c-subtle);
  --color-muted: var(--c-muted);
  --color-emphasis: var(--c-emphasis);
  --color-content: var(--c-content);
  --color-content-2: var(--c-content-2);
  --color-content-3: var(--c-content-3);
  --color-content-4: var(--c-content-4);
  --color-line: var(--c-line);
  --color-line-2: var(--c-line-2);
  --color-accent: var(--c-accent);
  --color-accent-hover: var(--c-accent-hover);
  --color-accent-text: var(--c-accent-text);
  --color-accent-dim: var(--c-accent-dim);
  --color-danger: var(--c-danger);
  --color-danger-dim: var(--c-danger-dim);
  --color-warning: var(--c-warning);
  --color-info: var(--c-info);
}

@layer base {
  :root,
  [data-theme="green"] {
    --c-bg: #020c06;
    --c-surface: #0a1a10;
    --c-subtle: rgba(34, 197, 94, 0.06);
    --c-muted: rgba(34, 197, 94, 0.10);
    --c-emphasis: rgba(34, 197, 94, 0.18);
    --c-content: #ffffff;
    --c-content-2: #9ca3af;
    --c-content-3: #6b7280;
    --c-content-4: #4b5563;
    --c-line: rgba(255, 255, 255, 0.08);
    --c-line-2: rgba(255, 255, 255, 0.04);
    --c-accent: #22c55e;
    --c-accent-hover: #16a34a;
    --c-accent-text: #4ade80;
    --c-accent-dim: rgba(34, 197, 94, 0.20);
    --c-danger: #ef4444;
    --c-danger-dim: rgba(239, 68, 68, 0.20);
    --c-warning: #eab308;
    --c-info: #3b82f6;
  }

  [data-theme="rose"] {
    --c-bg: #0c0206;
    --c-surface: #1a0a10;
    --c-subtle: rgba(244, 63, 94, 0.06);
    --c-muted: rgba(244, 63, 94, 0.10);
    --c-emphasis: rgba(244, 63, 94, 0.18);
    --c-content: #ffffff;
    --c-content-2: #9ca3af;
    --c-content-3: #6b7280;
    --c-content-4: #4b5563;
    --c-line: rgba(255, 255, 255, 0.08);
    --c-line-2: rgba(255, 255, 255, 0.04);
    --c-accent: #f43f5e;
    --c-accent-hover: #e11d48;
    --c-accent-text: #fb7185;
    --c-accent-dim: rgba(244, 63, 94, 0.20);
    --c-danger: #ef4444;
    --c-danger-dim: rgba(239, 68, 68, 0.20);
    --c-warning: #eab308;
    --c-info: #3b82f6;
  }

  [data-theme="blue"] {
    --c-bg: #02060c;
    --c-surface: #0a101a;
    --c-subtle: rgba(59, 130, 246, 0.06);
    --c-muted: rgba(59, 130, 246, 0.10);
    --c-emphasis: rgba(59, 130, 246, 0.18);
    --c-content: #ffffff;
    --c-content-2: #9ca3af;
    --c-content-3: #6b7280;
    --c-content-4: #4b5563;
    --c-line: rgba(255, 255, 255, 0.08);
    --c-line-2: rgba(255, 255, 255, 0.04);
    --c-accent: #3b82f6;
    --c-accent-hover: #2563eb;
    --c-accent-text: #60a5fa;
    --c-accent-dim: rgba(59, 130, 246, 0.20);
    --c-danger: #ef4444;
    --c-danger-dim: rgba(239, 68, 68, 0.20);
    --c-warning: #eab308;
    --c-info: #8b5cf6;
  }

  [data-theme="violet"] {
    --c-bg: #06020c;
    --c-surface: #120a1a;
    --c-subtle: rgba(139, 92, 246, 0.06);
    --c-muted: rgba(139, 92, 246, 0.10);
    --c-emphasis: rgba(139, 92, 246, 0.18);
    --c-content: #ffffff;
    --c-content-2: #9ca3af;
    --c-content-3: #6b7280;
    --c-content-4: #4b5563;
    --c-line: rgba(255, 255, 255, 0.08);
    --c-line-2: rgba(255, 255, 255, 0.04);
    --c-accent: #8b5cf6;
    --c-accent-hover: #7c3aed;
    --c-accent-text: #a78bfa;
    --c-accent-dim: rgba(139, 92, 246, 0.20);
    --c-danger: #ef4444;
    --c-danger-dim: rgba(239, 68, 68, 0.20);
    --c-warning: #eab308;
    --c-info: #3b82f6;
  }

  [data-theme="orange"] {
    --c-bg: #0c0602;
    --c-surface: #1a120a;
    --c-subtle: rgba(249, 115, 22, 0.06);
    --c-muted: rgba(249, 115, 22, 0.10);
    --c-emphasis: rgba(249, 115, 22, 0.18);
    --c-content: #ffffff;
    --c-content-2: #9ca3af;
    --c-content-3: #6b7280;
    --c-content-4: #4b5563;
    --c-line: rgba(255, 255, 255, 0.08);
    --c-line-2: rgba(255, 255, 255, 0.04);
    --c-accent: #f97316;
    --c-accent-hover: #ea580c;
    --c-accent-text: #fb923c;
    --c-accent-dim: rgba(249, 115, 22, 0.20);
    --c-danger: #ef4444;
    --c-danger-dim: rgba(239, 68, 68, 0.20);
    --c-warning: #eab308;
    --c-info: #3b82f6;
  }

  [data-theme="cyan"] {
    --c-bg: #020c0c;
    --c-surface: #0a1a1a;
    --c-subtle: rgba(6, 182, 212, 0.06);
    --c-muted: rgba(6, 182, 212, 0.10);
    --c-emphasis: rgba(6, 182, 212, 0.18);
    --c-content: #ffffff;
    --c-content-2: #9ca3af;
    --c-content-3: #6b7280;
    --c-content-4: #4b5563;
    --c-line: rgba(255, 255, 255, 0.08);
    --c-line-2: rgba(255, 255, 255, 0.04);
    --c-accent: #06b6d4;
    --c-accent-hover: #0891b2;
    --c-accent-text: #22d3ee;
    --c-accent-dim: rgba(6, 182, 212, 0.20);
    --c-danger: #ef4444;
    --c-danger-dim: rgba(239, 68, 68, 0.20);
    --c-warning: #eab308;
    --c-info: #3b82f6;
  }

  [data-theme="pink"] {
    --c-bg: #0c020a;
    --c-surface: #1a0a16;
    --c-subtle: rgba(236, 72, 153, 0.06);
    --c-muted: rgba(236, 72, 153, 0.10);
    --c-emphasis: rgba(236, 72, 153, 0.18);
    --c-content: #ffffff;
    --c-content-2: #9ca3af;
    --c-content-3: #6b7280;
    --c-content-4: #4b5563;
    --c-line: rgba(255, 255, 255, 0.08);
    --c-line-2: rgba(255, 255, 255, 0.04);
    --c-accent: #ec4899;
    --c-accent-hover: #db2777;
    --c-accent-text: #f472b6;
    --c-accent-dim: rgba(236, 72, 153, 0.20);
    --c-danger: #ef4444;
    --c-danger-dim: rgba(239, 68, 68, 0.20);
    --c-warning: #eab308;
    --c-info: #3b82f6;
  }

  [data-theme="light-green"] {
    --c-bg: #f8faf9;
    --c-surface: #ffffff;
    --c-subtle: rgba(34, 197, 94, 0.06);
    --c-muted: rgba(34, 197, 94, 0.10);
    --c-emphasis: rgba(34, 197, 94, 0.16);
    --c-content: #111827;
    --c-content-2: #4b5563;
    --c-content-3: #6b7280;
    --c-content-4: #9ca3af;
    --c-line: rgba(0, 0, 0, 0.08);
    --c-line-2: rgba(0, 0, 0, 0.04);
    --c-accent: #16a34a;
    --c-accent-hover: #15803d;
    --c-accent-text: #15803d;
    --c-accent-dim: rgba(34, 197, 94, 0.15);
    --c-danger: #dc2626;
    --c-danger-dim: rgba(220, 38, 38, 0.12);
    --c-warning: #ca8a04;
    --c-info: #2563eb;
  }

  [data-theme="light-rose"] {
    --c-bg: #faf8f9;
    --c-surface: #ffffff;
    --c-subtle: rgba(244, 63, 94, 0.06);
    --c-muted: rgba(244, 63, 94, 0.10);
    --c-emphasis: rgba(244, 63, 94, 0.16);
    --c-content: #111827;
    --c-content-2: #4b5563;
    --c-content-3: #6b7280;
    --c-content-4: #9ca3af;
    --c-line: rgba(0, 0, 0, 0.08);
    --c-line-2: rgba(0, 0, 0, 0.04);
    --c-accent: #e11d48;
    --c-accent-hover: #be123c;
    --c-accent-text: #be123c;
    --c-accent-dim: rgba(244, 63, 94, 0.15);
    --c-danger: #dc2626;
    --c-danger-dim: rgba(220, 38, 38, 0.12);
    --c-warning: #ca8a04;
    --c-info: #2563eb;
  }

  [data-theme="light-blue"] {
    --c-bg: #f8f9fb;
    --c-surface: #ffffff;
    --c-subtle: rgba(59, 130, 246, 0.06);
    --c-muted: rgba(59, 130, 246, 0.10);
    --c-emphasis: rgba(59, 130, 246, 0.16);
    --c-content: #111827;
    --c-content-2: #4b5563;
    --c-content-3: #6b7280;
    --c-content-4: #9ca3af;
    --c-line: rgba(0, 0, 0, 0.08);
    --c-line-2: rgba(0, 0, 0, 0.04);
    --c-accent: #2563eb;
    --c-accent-hover: #1d4ed8;
    --c-accent-text: #1d4ed8;
    --c-accent-dim: rgba(59, 130, 246, 0.15);
    --c-danger: #dc2626;
    --c-danger-dim: rgba(220, 38, 38, 0.12);
    --c-warning: #ca8a04;
    --c-info: #7c3aed;
  }

  [data-theme="light-violet"] {
    --c-bg: #f9f8fb;
    --c-surface: #ffffff;
    --c-subtle: rgba(139, 92, 246, 0.06);
    --c-muted: rgba(139, 92, 246, 0.10);
    --c-emphasis: rgba(139, 92, 246, 0.16);
    --c-content: #111827;
    --c-content-2: #4b5563;
    --c-content-3: #6b7280;
    --c-content-4: #9ca3af;
    --c-line: rgba(0, 0, 0, 0.08);
    --c-line-2: rgba(0, 0, 0, 0.04);
    --c-accent: #7c3aed;
    --c-accent-hover: #6d28d9;
    --c-accent-text: #6d28d9;
    --c-accent-dim: rgba(139, 92, 246, 0.15);
    --c-danger: #dc2626;
    --c-danger-dim: rgba(220, 38, 38, 0.12);
    --c-warning: #ca8a04;
    --c-info: #2563eb;
  }

  [data-theme="light-orange"] {
    --c-bg: #faf9f8;
    --c-surface: #ffffff;
    --c-subtle: rgba(249, 115, 22, 0.06);
    --c-muted: rgba(249, 115, 22, 0.10);
    --c-emphasis: rgba(249, 115, 22, 0.16);
    --c-content: #111827;
    --c-content-2: #4b5563;
    --c-content-3: #6b7280;
    --c-content-4: #9ca3af;
    --c-line: rgba(0, 0, 0, 0.08);
    --c-line-2: rgba(0, 0, 0, 0.04);
    --c-accent: #ea580c;
    --c-accent-hover: #c2410c;
    --c-accent-text: #c2410c;
    --c-accent-dim: rgba(249, 115, 22, 0.15);
    --c-danger: #dc2626;
    --c-danger-dim: rgba(220, 38, 38, 0.12);
    --c-warning: #ca8a04;
    --c-info: #2563eb;
  }

  [data-theme="light-cyan"] {
    --c-bg: #f8fbfb;
    --c-surface: #ffffff;
    --c-subtle: rgba(6, 182, 212, 0.06);
    --c-muted: rgba(6, 182, 212, 0.10);
    --c-emphasis: rgba(6, 182, 212, 0.16);
    --c-content: #111827;
    --c-content-2: #4b5563;
    --c-content-3: #6b7280;
    --c-content-4: #9ca3af;
    --c-line: rgba(0, 0, 0, 0.08);
    --c-line-2: rgba(0, 0, 0, 0.04);
    --c-accent: #0891b2;
    --c-accent-hover: #0e7490;
    --c-accent-text: #0e7490;
    --c-accent-dim: rgba(6, 182, 212, 0.15);
    --c-danger: #dc2626;
    --c-danger-dim: rgba(220, 38, 38, 0.12);
    --c-warning: #ca8a04;
    --c-info: #2563eb;
  }

  [data-theme="light-pink"] {
    --c-bg: #faf8f9;
    --c-surface: #ffffff;
    --c-subtle: rgba(236, 72, 153, 0.06);
    --c-muted: rgba(236, 72, 153, 0.10);
    --c-emphasis: rgba(236, 72, 153, 0.16);
    --c-content: #111827;
    --c-content-2: #4b5563;
    --c-content-3: #6b7280;
    --c-content-4: #9ca3af;
    --c-line: rgba(0, 0, 0, 0.08);
    --c-line-2: rgba(0, 0, 0, 0.04);
    --c-accent: #db2777;
    --c-accent-hover: #be185d;
    --c-accent-text: #be185d;
    --c-accent-dim: rgba(236, 72, 153, 0.15);
    --c-danger: #dc2626;
    --c-danger-dim: rgba(220, 38, 38, 0.12);
    --c-warning: #ca8a04;
    --c-info: #2563eb;
  }

  html {
    background: var(--c-bg);
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
  }

  body {
    @apply antialiased;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--c-bg);
    color: var(--c-content);
    position: fixed;
    inset: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  input, textarea, [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--c-muted);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--c-emphasis);
  }

  select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
  }

  select:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px var(--c-accent-dim);
  }

  select option {
    background: var(--c-surface);
    color: var(--c-content);
    padding: 8px;
  }

  input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--c-emphasis);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    flex-shrink: 0;
  }

  input[type="checkbox"]:hover {
    border-color: var(--c-accent);
  }

  input[type="checkbox"]:checked {
    background: var(--c-accent);
    border-color: var(--c-accent);
  }

  input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
}