@import 'tailwindcss';

/*
 * Mosaic Stack design tokens mapped to Tailwind v4 theme.
 * Source: @mosaic/design-tokens (AD-13)
 * Fonts: Outfit (sans), Fira Code (mono)
 * Palette: deep blue-grays + blue/purple/teal accents
 * Default: dark theme
 */

@theme {
  /* ─── Fonts ─── */
  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, Menlo, monospace;

  /* ─── Neutral blue-gray scale ─── */
  --color-gray-50: #f0f2f5;
  --color-gray-100: #dce0e8;
  --color-gray-200: #b8c0cc;
  --color-gray-300: #8e99a9;
  --color-gray-400: #6b7a8d;
  --color-gray-500: #4e5d70;
  --color-gray-600: #3b4859;
  --color-gray-700: #2a3544;
  --color-gray-800: #1c2433;
  --color-gray-900: #111827;
  --color-gray-950: #0a0f1a;

  /* ─── Primary — blue ─── */
  --color-blue-50: #eff4ff;
  --color-blue-100: #dae5ff;
  --color-blue-200: #bdd1ff;
  --color-blue-300: #8fb4ff;
  --color-blue-400: #5b8bff;
  --color-blue-500: #3b6cf7;
  --color-blue-600: #2551e0;
  --color-blue-700: #1d40c0;
  --color-blue-800: #1e369c;
  --color-blue-900: #1e317b;
  --color-blue-950: #162050;

  /* ─── Accent — purple ─── */
  --color-purple-50: #f3f0ff;
  --color-purple-100: #e7dfff;
  --color-purple-200: #d2c3ff;
  --color-purple-300: #b49aff;
  --color-purple-400: #9466ff;
  --color-purple-500: #7c3aed;
  --color-purple-600: #6d28d9;
  --color-purple-700: #5b21b6;
  --color-purple-800: #4c1d95;
  --color-purple-900: #3b1578;
  --color-purple-950: #230d4d;

  /* ─── Accent — teal ─── */
  --color-teal-50: #effcf9;
  --color-teal-100: #d0f7ef;
  --color-teal-200: #a4eddf;
  --color-teal-300: #6fddcb;
  --color-teal-400: #3ec5b2;
  --color-teal-500: #25aa99;
  --color-teal-600: #1c897e;
  --color-teal-700: #1b6e66;
  --color-teal-800: #1a5853;
  --color-teal-900: #194945;
  --color-teal-950: #082d2b;

  /* ─── Semantic surface tokens ─── */
  --color-surface-bg: #0a0f1a;
  --color-surface-card: #111827;
  --color-surface-elevated: #1c2433;
  --color-surface-border: #2a3544;

  /* ─── Semantic text tokens ─── */
  --color-text-primary: #f0f2f5;
  --color-text-secondary: #8e99a9;
  --color-text-muted: #6b7a8d;

  /* ─── Status colors ─── */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ─── Sidebar width ─── */
  --spacing-sidebar: 16rem;
}

/* ─── Base styles ─── */
body {
  background-color: var(--color-surface-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Scrollbar styling ─── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-600);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}