@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

/* ═══════════════════════════════════════════════════════
   TUSK — "Graphite & Honey" Design System
   Warm graphite workstation · ivory text · honey accent
   Monospace-first, tuned for long data + query sessions.
   ═══════════════════════════════════════════════════════ */

@theme inline {
  --radius-sm: calc(var(--radius) - 3px);
  --radius-md: calc(var(--radius) - 1px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Brand + semantic status tokens */
  --color-honey: var(--honey);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-info: var(--info);
  --color-violet: var(--violet);

  /* Database object categories (schema tree, syntax, etc.) */
  --color-data-table: var(--data-table);
  --color-data-view: var(--data-view);
  --color-data-function: var(--data-function);
  --color-data-sequence: var(--data-sequence);

  /* Font families — monospace everywhere, "like for development" */
  --font-sans: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono",
    "Cascadia Code", monospace;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono",
    "Cascadia Code", monospace;
}

:root {
  --radius: 0.5rem;

  /* ── Warm graphite surfaces (hue ~75, very low chroma) ─────────
     Layered from deepest (app) to highest (popover). Never pure
     black — warm charcoal reduces halation over long sessions. */
  --background: oklch(0.176 0.006 75);
  --foreground: oklch(0.912 0.013 80);
  --card: oklch(0.205 0.007 75);
  --card-foreground: oklch(0.912 0.013 80);
  --popover: oklch(0.232 0.008 75);
  --popover-foreground: oklch(0.93 0.012 80);

  /* ── Honey primary — warm, inviting, easy on the eyes ───────── */
  --primary: oklch(0.808 0.124 82);
  --primary-foreground: oklch(0.21 0.03 80);

  /* ── Subtle fills + hover surfaces ──────────────────────────── */
  --secondary: oklch(0.255 0.008 75);
  --secondary-foreground: oklch(0.88 0.012 80);
  --muted: oklch(0.255 0.008 75);
  --muted-foreground: oklch(0.638 0.013 78);
  --accent: oklch(0.285 0.01 75);
  --accent-foreground: oklch(0.93 0.012 80);

  --destructive: oklch(0.655 0.196 24);

  /* ── Borders + inputs — visible but quiet ───────────────────── */
  --border: oklch(0.34 0.011 75 / 65%);
  --input: oklch(0.36 0.011 75 / 55%);
  --ring: oklch(0.808 0.124 82 / 45%);

  /* ── Charts — honey-led harmonious set ──────────────────────── */
  --chart-1: oklch(0.808 0.124 82);
  --chart-2: oklch(0.7 0.12 220);
  --chart-3: oklch(0.74 0.13 152);
  --chart-4: oklch(0.7 0.15 305);
  --chart-5: oklch(0.7 0.16 28);

  /* ── Sidebar — one notch deeper than the main canvas ────────── */
  --sidebar: oklch(0.192 0.006 75);
  --sidebar-foreground: oklch(0.9 0.012 80);
  --sidebar-primary: oklch(0.808 0.124 82);
  --sidebar-primary-foreground: oklch(0.21 0.03 80);
  --sidebar-accent: oklch(0.285 0.01 75);
  --sidebar-accent-foreground: oklch(0.93 0.012 80);
  --sidebar-border: oklch(0.34 0.011 75 / 60%);
  --sidebar-ring: oklch(0.808 0.124 82 / 45%);

  /* ── Brand + semantic status ────────────────────────────────── */
  --honey: oklch(0.808 0.124 82);
  --success: oklch(0.74 0.14 152);
  --warning: oklch(0.78 0.135 65);
  --info: oklch(0.72 0.12 222);
  --violet: oklch(0.72 0.15 305);

  /* ── Database object categories ─────────────────────────────── */
  --data-table: oklch(0.72 0.12 222);
  --data-view: oklch(0.74 0.13 152);
  --data-function: oklch(0.72 0.15 305);
  --data-sequence: oklch(0.79 0.13 70);
}

/* ═══════════════════════════════════════════════════════
   Base layer
   ═══════════════════════════════════════════════════════ */

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    font-feature-settings: "ss02" 1, "zero" 1; /* slashed zero, alt glyphs */
    letter-spacing: -0.006em;
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Tabular figures everywhere data is shown — columns line up */
  code, pre, .font-mono, table, input, [data-slot="sql-editor"], .cm-editor {
    font-variant-numeric: tabular-nums;
  }

  /* Smoother, quieter scrollbars */
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: oklch(0.42 0.01 75 / 45%);
    border-radius: 4px;
    border: 1px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: oklch(0.52 0.012 75 / 60%);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* ═══════════════════════════════════════════════════════
   Wordmark — heavy, tracked-out mono
   ═══════════════════════════════════════════════════════ */

.tusk-wordmark {
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Section / eyebrow labels — small uppercase mono */
.tusk-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   Noise texture overlay — very subtle warm depth
   ═══════════════════════════════════════════════════════ */

.tusk-noise::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Faint warm light bloom from the top — atmosphere, not decoration */
.tusk-noise::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -20%, oklch(0.808 0.124 82 / 4.5%), transparent 60%);
}

/* ═══════════════════════════════════════════════════════
   Glow effects — honey-led
   ═══════════════════════════════════════════════════════ */

.tusk-glow-honey {
  box-shadow: 0 0 12px oklch(0.808 0.124 82 / 14%),
    0 0 3px oklch(0.808 0.124 82 / 9%);
}
.tusk-glow-honey-subtle {
  box-shadow: 0 0 7px oklch(0.808 0.124 82 / 7%);
}

/* ═══════════════════════════════════════════════════════
   Active tab indicator — top honey bar
   ═══════════════════════════════════════════════════════ */

.tusk-tab-active {
  position: relative;
}
.tusk-tab-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, oklch(0.808 0.124 82), oklch(0.79 0.13 70));
  box-shadow: 0 0 8px oklch(0.808 0.124 82 / 35%);
}

/* ═══════════════════════════════════════════════════════
   AI feature branding — violet language
   ═══════════════════════════════════════════════════════ */

.tusk-ai-bar {
  background: linear-gradient(
    135deg,
    oklch(0.72 0.15 305 / 6%) 0%,
    oklch(0.72 0.15 305 / 2%) 50%,
    oklch(0.808 0.124 82 / 3%) 100%
  );
  border-bottom: 1px solid oklch(0.72 0.15 305 / 14%);
}
.tusk-ai-icon {
  color: oklch(0.74 0.15 305);
  filter: drop-shadow(0 0 4px oklch(0.72 0.15 305 / 35%));
}

/* ═══════════════════════════════════════════════════════
   Transitions
   ═══════════════════════════════════════════════════════ */

button, a, [role="tab"], [role="menuitem"], [data-slot="button"] {
  transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════
   Glassmorphism for floating elements
   ═══════════════════════════════════════════════════════ */

[data-radix-popper-content-wrapper] [role="dialog"],
[data-radix-popper-content-wrapper] [role="listbox"],
[data-radix-popper-content-wrapper] [role="menu"],
[data-state="open"][data-side] {
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

/* ═══════════════════════════════════════════════════════
   Sidebar tab active indicator
   ═══════════════════════════════════════════════════════ */

.tusk-sidebar-tab-active {
  position: relative;
}
.tusk-sidebar-tab-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 22%;
  right: 22%;
  height: 2px;
  background: oklch(0.808 0.124 82);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 6px oklch(0.808 0.124 82 / 40%);
}

/* ═══════════════════════════════════════════════════════
   Data grid — the surface that matters most
   ═══════════════════════════════════════════════════════ */

.tusk-grid-header {
  background: oklch(0.232 0.008 75);
  border-bottom: 1px solid oklch(0.4 0.012 75 / 70%);
  box-shadow: 0 1px 0 oklch(0 0 0 / 25%);
}

.tusk-grid-row {
  border-bottom: 1px solid oklch(0.3 0.008 75 / 35%);
}
/* Zebra striping for fast horizontal scanning */
.tusk-grid-row-odd {
  background: oklch(0.205 0.007 75 / 45%);
}
.tusk-grid-row:hover {
  background: oklch(0.808 0.124 82 / 8%);
  box-shadow: inset 2px 0 0 oklch(0.808 0.124 82 / 55%);
}

.tusk-grid-cell-null {
  color: oklch(0.52 0.012 75);
  font-style: italic;
}
.tusk-grid-cell-highlight {
  background: oklch(0.808 0.124 82 / 16%);
  box-shadow: inset 0 0 0 1px oklch(0.808 0.124 82 / 35%);
}

/* ═══════════════════════════════════════════════════════
   Status bar / toolbar chrome
   ═══════════════════════════════════════════════════════ */

.tusk-status-bar {
  background: oklch(0.192 0.006 75);
  border-top: 1px solid oklch(0.34 0.011 75 / 55%);
}
.tusk-toolbar {
  background: linear-gradient(
    180deg,
    oklch(0.222 0.008 75),
    oklch(0.205 0.007 75)
  );
  border-bottom: 1px solid oklch(0.34 0.011 75 / 60%);
}

/* ═══════════════════════════════════════════════════════
   Connection color accent strip
   ═══════════════════════════════════════════════════════ */

.tusk-conn-strip {
  position: relative;
}
.tusk-conn-strip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--strip-width, 3px);
  background: var(--strip-color, transparent);
  box-shadow: 0 0 8px var(--strip-color, transparent);
}

/* ═══════════════════════════════════════════════════════
   Resizable handles
   ═══════════════════════════════════════════════════════ */

[data-panel-group-direction="horizontal"] > [data-resize-handle] {
  width: 1px !important;
  background: oklch(0.34 0.011 75 / 55%);
  transition: background 180ms, width 180ms;
}
[data-panel-group-direction="horizontal"] > [data-resize-handle]:hover,
[data-panel-group-direction="horizontal"] > [data-resize-handle][data-resize-handle-active] {
  width: 3px !important;
  background: oklch(0.808 0.124 82 / 65%);
}
[data-panel-group-direction="vertical"] > [data-resize-handle] {
  height: 1px !important;
  background: oklch(0.34 0.011 75 / 55%);
  transition: background 180ms, height 180ms;
}
[data-panel-group-direction="vertical"] > [data-resize-handle]:hover,
[data-panel-group-direction="vertical"] > [data-resize-handle][data-resize-handle-active] {
  height: 3px !important;
  background: oklch(0.808 0.124 82 / 65%);
}

/* ═══════════════════════════════════════════════════════
   CodeMirror — autocomplete + gutter polish
   (base colors & syntax live in src/lib/editor-theme.ts)
   ═══════════════════════════════════════════════════════ */

.cm-editor {
  font-size: 13px;
  line-height: 1.65;
}
.cm-editor .cm-tooltip-autocomplete {
  backdrop-filter: blur(16px);
  background: oklch(0.232 0.008 75 / 96%);
  border: 1px solid oklch(0.34 0.011 75 / 70%);
  border-radius: 8px;
  box-shadow: 0 10px 36px oklch(0 0 0 / 38%);
  overflow: hidden;
}
.cm-editor .cm-tooltip-autocomplete > ul > li[aria-selected] {
  background: oklch(0.808 0.124 82 / 16%);
  color: oklch(0.93 0.012 80);
}
.cm-editor .cm-completionLabel {
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════
   Sonner toast styling
   ═══════════════════════════════════════════════════════ */

[data-sonner-toaster] [data-sonner-toast] {
  font-family: var(--font-sans);
  backdrop-filter: blur(12px);
}

/* ═══════════════════════════════════════════════════════
   Utility animations
   ═══════════════════════════════════════════════════════ */

@keyframes tusk-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tusk-pulse-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.tusk-fade-in {
  animation: tusk-fade-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tusk-pulse-glow {
  animation: tusk-pulse-glow 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════
   Selection styling
   ═══════════════════════════════════════════════════════ */

::selection {
  background: oklch(0.808 0.124 82 / 26%);
  color: oklch(0.96 0.01 80);
}
