@import "./tokens.css";
@import "@xyflow/react/dist/style.css";

/* Tell Tailwind v4 to scan meda's compiled component output so utilities
   like `h-full`, `mt-auto`, `py-3.5`, and `bg-shell-rail` (used by IconRail,
   AppShellWorkspace, etc.) are generated even when the consumer app doesn't
   reference them itself. Without this, consumers see broken layout where
   meda components rely on classes the app doesn't otherwise use. Path is
   resolved relative to this CSS file at build time, so it points to the
   sibling component output regardless of where the package is installed. */
@source "../**/*.js";

@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));

@layer base {
  :root {
    color-scheme: light;
    --auth-gradient-primary: var(--color-brand-500);
    --auth-gradient-secondary: var(--color-brand-700);
    --auth-gradient-base: var(--color-brand-800);
  }

  .dark,
  [data-theme="dark"] {
    color-scheme: dark;
  }
}

[data-vaul-drawer][data-state="open"] {
  will-change: auto;
}

@theme inline {
  /* Color primitives — exposed as Tailwind color scales */

  /* Brand (purple) — 11 stops */
  --color-brand-50: var(--color-brand-50);
  --color-brand-100: var(--color-brand-100);
  --color-brand-200: var(--color-brand-200);
  --color-brand-300: var(--color-brand-300);
  --color-brand-400: var(--color-brand-400);
  --color-brand-500: var(--color-brand-500);
  --color-brand-600: var(--color-brand-600);
  --color-brand-700: var(--color-brand-700);
  --color-brand-800: var(--color-brand-800);
  --color-brand-900: var(--color-brand-900);
  --color-brand-950: var(--color-brand-950);

  /* Neutral (zinc-aligned) — 11 stops */
  --color-neutral-50: var(--color-neutral-50);
  --color-neutral-100: var(--color-neutral-100);
  --color-neutral-200: var(--color-neutral-200);
  --color-neutral-300: var(--color-neutral-300);
  --color-neutral-400: var(--color-neutral-400);
  --color-neutral-500: var(--color-neutral-500);
  --color-neutral-600: var(--color-neutral-600);
  --color-neutral-700: var(--color-neutral-700);
  --color-neutral-800: var(--color-neutral-800);
  --color-neutral-900: var(--color-neutral-900);
  --color-neutral-950: var(--color-neutral-950);

  /* Error (rose) — 10 stops */
  --color-error-50: var(--color-error-50);
  --color-error-100: var(--color-error-100);
  --color-error-200: var(--color-error-200);
  --color-error-300: var(--color-error-300);
  --color-error-400: var(--color-error-400);
  --color-error-500: var(--color-error-500);
  --color-error-600: var(--color-error-600);
  --color-error-700: var(--color-error-700);
  --color-error-800: var(--color-error-800);
  --color-error-900: var(--color-error-900);

  /* Info (blue) — 10 stops */
  --color-info-50: var(--color-info-50);
  --color-info-100: var(--color-info-100);
  --color-info-200: var(--color-info-200);
  --color-info-300: var(--color-info-300);
  --color-info-400: var(--color-info-400);
  --color-info-500: var(--color-info-500);
  --color-info-600: var(--color-info-600);
  --color-info-700: var(--color-info-700);
  --color-info-800: var(--color-info-800);
  --color-info-900: var(--color-info-900);

  /* Success (teal) — 10 stops */
  --color-success-50: var(--color-success-50);
  --color-success-100: var(--color-success-100);
  --color-success-200: var(--color-success-200);
  --color-success-300: var(--color-success-300);
  --color-success-400: var(--color-success-400);
  --color-success-500: var(--color-success-500);
  --color-success-600: var(--color-success-600);
  --color-success-700: var(--color-success-700);
  --color-success-800: var(--color-success-800);
  --color-success-900: var(--color-success-900);

  /* Warning (amber) — 10 stops */
  --color-warning-50: var(--color-warning-50);
  --color-warning-100: var(--color-warning-100);
  --color-warning-200: var(--color-warning-200);
  --color-warning-300: var(--color-warning-300);
  --color-warning-400: var(--color-warning-400);
  --color-warning-500: var(--color-warning-500);
  --color-warning-600: var(--color-warning-600);
  --color-warning-700: var(--color-warning-700);
  --color-warning-800: var(--color-warning-800);
  --color-warning-900: var(--color-warning-900);

  /* shadcn semantic colors (mode-flipped at runtime via :root / .dark) */
  --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-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Status semantic */
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-danger: var(--danger);

  /* Sidebar */
  --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);

  /* Chart */
  --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);

  /* Shell semantic colors */
  --color-shell-header: var(--shell-header);
  --color-shell-rail: var(--shell-rail);
  --color-shell-context: var(--shell-context);
  --color-shell-main: var(--shell-main);
  --color-shell-panel: var(--shell-panel);
  --color-shell-border: var(--shell-border);

  /* Shell sizing → spacing scale */
  --spacing-shell-header: var(--shell-header-height);
  --spacing-shell-rail: var(--shell-rail-width);
  --spacing-shell-context: var(--shell-context-default);
  --spacing-shell-panel: var(--shell-panel-default);
  --spacing-shell-bottom-nav: var(--shell-bottom-nav-height);

  /* Font families — Geist + Geist Mono only (no Inter) */
  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
}