@import "tailwindcss";

/*
 * Tailwind scans this app's sources for class names, and node_modules is excluded from that
 * scan by default — so the classes that exist ONLY inside @owlmeans/web-panel components
 * (the navigation shell, the footer) would never reach the stylesheet. This line adds them.
 */
@source "../../../node_modules/@owlmeans/web-panel/build";

/*
 * shadcn / Tailwind v4 design tokens (new-york, neutral). The app owns these — they
 * replace what @owlmeans/owl-theme would otherwise provide. The shadcn primitives in
 * components/ui and the @owlmeans web components consume them via `bg-background`, etc.
 */
@theme {
  --color-background:           oklch(1 0 0);
  --color-foreground:           oklch(0.145 0 0);

  --color-card:                 oklch(1 0 0);
  --color-card-foreground:      oklch(0.145 0 0);

  --color-popover:              oklch(1 0 0);
  --color-popover-foreground:   oklch(0.145 0 0);

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

  --color-secondary:            oklch(0.97 0 0);
  --color-secondary-foreground: oklch(0.205 0 0);

  --color-muted:                oklch(0.97 0 0);
  --color-muted-foreground:     oklch(0.556 0 0);

  --color-accent:               oklch(0.97 0 0);
  --color-accent-foreground:    oklch(0.205 0 0);

  --color-destructive:          oklch(0.577 0.245 27.325);
  --color-success:              oklch(0.62 0.18 145);

  --color-border:               oklch(0.922 0 0);
  --color-input:                oklch(0.922 0 0);
  --color-ring:                 oklch(0.708 0 0);

  --radius:                     0.625rem;

  --animate-progress-indeterminate: progress-indeterminate 1.5s linear infinite;

  @keyframes progress-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
}

.dark {
  --color-background:           oklch(0.145 0 0);
  --color-foreground:           oklch(0.985 0 0);
  --color-card:                 oklch(0.205 0 0);
  --color-card-foreground:      oklch(0.985 0 0);
  --color-popover:              oklch(0.205 0 0);
  --color-popover-foreground:   oklch(0.985 0 0);
  --color-primary:              oklch(0.922 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.269 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.704 0.191 22.216);
  --color-success:              oklch(0.7 0.18 145);
  --color-border:               oklch(1 0 0 / 10%);
  --color-input:                oklch(1 0 0 / 15%);
  --color-ring:                 oklch(0.556 0 0);
}

@layer base {
  * {
    border-color: var(--color-border);
  }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
}