@import "tailwindcss";

/*
 * Design tokens — the single source for every colour, shadow, gradient and font in the UI.
 * Components use the generated utilities (text-muted, bg-surface, border-line, …) and never write a literal
 * colour. Translucent variants use Tailwind's opacity syntax, e.g. bg-accent/8.
 */
@theme {
  /* Text, darkest → lightest */
  --color-ink: #1a1a2e;
  --color-body: #2a2a40;
  --color-ink-2: #4a4a68;
  --color-ink-3: #5a5a80;
  --color-muted: #7878a0;
  --color-placeholder: #a0a0be;
  --color-subtle: #b0b0c8;
  --color-faint: #c0c0d8;

  /* Surfaces */
  --color-page: #f8f8fc;
  --color-surface: #ffffff;
  --color-panel: #f4f4f9;
  --color-panel-code: #f4f4fa;
  --color-tint: #f0f0f8;
  --color-stripe: #f8f8fd;
  --color-notice: #fafafe;

  /* Hairlines (black at low opacity) */
  --color-line-faint: rgba(0, 0, 0, 0.04);
  --color-line-soft: rgba(0, 0, 0, 0.06);
  --color-line: rgba(0, 0, 0, 0.07);
  --color-edge: rgba(0, 0, 0, 0.08);
  --color-edge-strong: rgba(0, 0, 0, 0.09);
  --color-edge-input: rgba(0, 0, 0, 0.1);

  /* Brand */
  --color-accent: #7c5cfc;
  --color-accent-blue: #4f8ef7;
  --color-violet: #a78bfa;
  --color-violet-deep: #5b21b6;
  --color-indigo-deep: #4338ca;
  --color-orb-mid: #5b47d4;
  --color-hero-from: #c4b5fd;
  --color-hero-to: #93c5fd;

  /* Status */
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-danger-soft: #f87171;
  --color-warning: #f59e0b;
  --color-warning-ink: #b45309;
  --color-number: #d97706;
  --color-cyan: #06b6d4;

  /* SQL syntax highlighting (identifiers use violet-deep) */
  --color-syntax-keyword: #6d28d9;
  --color-syntax-function: #047857;
  --color-syntax-string: #065f46;
  --color-syntax-number: #92400e;
  --color-syntax-operator: #1d4ed8;
  --color-syntax-comment: #9ca3af;
  --color-syntax-plain: #374151;

  /* Window-control dots on code frames */
  --color-dot-red: #ff5f57;
  --color-dot-yellow: #febc2e;
  --color-dot-green: #28c840;

  /* Page chrome */
  --color-header: rgba(248, 248, 252, 0.95);
  --color-scrollbar: rgba(0, 0, 0, 0.12);
  --color-scrollbar-thumb: rgba(0, 0, 0, 0.1);
  --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.18);

  /* Width of the chat column: the message list and the input bar share it so they stay aligned */
  --container-chat: 760px;

  /* Elevation */
  --shadow-input: 0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-user-bubble: 0 4px 16px rgba(91, 33, 182, 0.3);
  --shadow-send: 0 0 16px rgba(124, 92, 252, 0.4);
  --shadow-logo: 0 0 0 1px rgba(124, 92, 252, 0.3), 0 0 18px rgba(124, 92, 252, 0.25);
  --shadow-orb: 0 0 0 1px rgba(124, 92, 252, 0.3), 0 0 40px rgba(124, 92, 252, 0.3);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* Fonts: Roboto and JetBrains Mono loaded in layout.tsx; code and data cells use the mono face */
  --font-sans: var(--font-roboto), system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-jetbrains-mono), ui-monospace, "SF Mono", Menlo, monospace;
  --font-code: var(--font-jetbrains-mono), ui-monospace, "SF Mono", Menlo, monospace;

  /* Transitions default to the plain CSS "ease" at 150ms, matching how the UI has always behaved */
  --default-transition-duration: 150ms;
  --default-transition-timing-function: ease;
}

/* Gradients can't live in @theme; expose them as variables and utilities */
:root {
  --gradient-brand: linear-gradient(135deg, var(--color-accent), var(--color-accent-blue));
  --gradient-user: linear-gradient(135deg, var(--color-violet-deep), var(--color-indigo-deep));
  --gradient-orb: linear-gradient(135deg, var(--color-accent) 0%, var(--color-orb-mid) 50%, var(--color-accent-blue) 100%);
  --gradient-hero-text: linear-gradient(135deg, var(--color-hero-from), var(--color-hero-to));
  --gradient-orb-glow: radial-gradient(circle, rgba(124, 92, 252, 0.15), rgba(79, 142, 247, 0.08), transparent);
}
@utility bg-brand { background-image: var(--gradient-brand); }
@utility bg-user { background-image: var(--gradient-user); }
@utility bg-orb { background-image: var(--gradient-orb); }
@utility bg-orb-glow { background-image: var(--gradient-orb-glow); }
@utility bg-hero-text { background-image: var(--gradient-hero-text); }

* { box-sizing: border-box; }

body {
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Scrollbar ── */
* { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover); }

/* ── Selection ── */
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); color: var(--color-surface); }

/* ── Animations ── */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 50%, transparent); } 70% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-success) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 0%, transparent); } }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.typing-dot { animation: typingBounce 1.2s ease-in-out infinite; }
.cursor-blink::after { content: '▋'; display: inline-block; animation: cursorBlink 0.9s step-end infinite; color: var(--color-accent); margin-left: 2px; }
.status-dot { animation: pulse 2.4s ease-in-out infinite; box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 50%, transparent); }
.message-enter { animation: fadeSlideIn 0.2s ease-out; }