/*
 * Vector design tokens — Tailwind v4 CSS-first theme preset.
 * Consumers: @import this file, then add @source entries pointing at packages/ui/src
 * so Tailwind scans the shadcn primitives for class names.
 *
 * Palette = shadcn "new-york" with a Vector-specific accent. Radius and typography
 * are tuned for a dense inventory app (8px grid, 13px base font).
 */

@theme {
  /* Color tokens are wired through OKLCH for perceptual-linear dark theme mixing. */
  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.985 0 0);

  --color-card: oklch(0.175 0 0);
  --color-card-foreground: oklch(0.985 0 0);

  --color-popover: oklch(0.175 0 0);
  --color-popover-foreground: oklch(0.985 0 0);

  --color-primary: oklch(0.985 0 0);
  --color-primary-foreground: oklch(0.205 0 0);

  --color-secondary: oklch(0.269 0 0);
  --color-secondary-foreground: oklch(0.985 0 0);

  --color-muted: oklch(0.225 0 0);
  --color-muted-foreground: oklch(0.708 0 0);

  --color-accent: oklch(0.269 0 0);
  --color-accent-foreground: oklch(0.985 0 0);

  --color-destructive: oklch(0.584 0.205 27.325);
  --color-destructive-foreground: oklch(0.985 0 0);

  --color-success: oklch(0.696 0.17 162.48);
  --color-success-foreground: oklch(0.145 0 0);

  --color-warning: oklch(0.769 0.188 70.08);
  --color-warning-foreground: oklch(0.145 0 0);

  --color-border: oklch(1 0 0 / 0.12);
  --color-input: oklch(1 0 0 / 0.14);
  --color-ring: oklch(0.556 0 0);

  /* Brand accent — used for primary CTAs in pages (not in shell chrome). */
  --color-brand: oklch(0.663 0.186 250);
  --color-brand-foreground: oklch(0.985 0 0);

  /* Radius (8px grid). */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* Typography. */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "Menlo", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.75rem;

  /* Spacing extension — adds half-step 2.5/3.5 already in Tailwind plus shell widths. */
  --spacing-sidebar: 16rem;
  --spacing-sidebar-collapsed: 3.5rem;
  --spacing-topbar: 3.25rem;

  /* Shadow. */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55);

  /* Animation. */
  --animate-fade-in: fade-in 120ms ease-out;
  --animate-slide-up: slide-up 180ms ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Base layer — body and selection defaults. */
@layer base {
  html, body, #root {
    height: 100%;
  }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  ::selection {
    background-color: color-mix(in oklch, var(--color-brand) 40%, transparent);
    color: var(--color-foreground);
  }
  *:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
  }
}