@import 'tailwindcss';

@plugin '@tailwindcss/forms';
@plugin 'tailwindcss-animate';
@plugin "tailwindcss-radix";

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

@theme {
  --animate-ping: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  @keyframes ping {
    75%,
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

/*
  ---break---
*/
@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --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);

  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive-border: var(--destructive-border);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-success-border: var(--success-border);
  --color-brand: var(--brand);
}
/*
  ---break---
*/
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.028 261.692);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.13 0.028 261.692);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.13 0.028 261.692);
  --primary: oklch(0.21 0.034 264.665);
  --primary: var(--color-violet-600);
  --primary-foreground: oklch(0.985 0.002 247.839);
  --secondary: oklch(0.967 0.003 264.542);
  --secondary-foreground: oklch(0.21 0.034 264.665);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.551 0.027 264.364);
  --accent: oklch(0.967 0.003 264.542);
  --accent-foreground: oklch(0.21 0.034 264.665);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.928 0.006 264.531);
  --input: oklch(0.928 0.006 264.531);
  --ring: oklch(0.627 0.265 303.9);
  --chart-1: oklch(0.398 0.07 227.392);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.646 0.222 41.116);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0.002 247.839);
  --sidebar-foreground: oklch(0.13 0.028 261.692);
  --sidebar-primary: oklch(0.21 0.034 264.665);
  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
  --sidebar-accent: oklch(0.967 0.003 264.542);
  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
  --sidebar-border: oklch(0.928 0.006 264.531);
  --sidebar-ring: oklch(0.707 0.022 261.325);

  color-scheme: light;
  --destructive-foreground: oklch(0.9857 0.005 263.3);
  --destructive-border: oklch(0.6463 0.2632 29.07);
  --success: oklch(0.6407 0.2347 142.13);
  --success-foreground: oklch(0.9857 0.005 263.3);
  --success-border: oklch(0.5692 0.1922 142.13);
  --brand: var(--color-violet-600);
}
/*
  ---break---
*/
.dark {
  --background: oklch(0.13 0.028 261.692);
  --foreground: oklch(0.985 0.002 247.839);
  --card: oklch(0.21 0.034 264.665);
  --card-foreground: oklch(0.985 0.002 247.839);
  --popover: oklch(0.21 0.034 264.665);
  --popover-foreground: oklch(0.985 0.002 247.839);
  --primary: oklch(0.928 0.006 264.531);
  --primary-foreground: oklch(0.21 0.034 264.665);
  --secondary: oklch(0.278 0.033 256.848);
  --secondary-foreground: oklch(0.985 0.002 247.839);
  --muted: oklch(0.278 0.033 256.848);
  --muted-foreground: oklch(0.707 0.022 261.325);
  --accent: oklch(0.278 0.033 256.848);
  --accent-foreground: oklch(0.985 0.002 247.839);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.71 0.16 294);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.034 264.665);
  --sidebar-foreground: oklch(0.985 0.002 247.839);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
  --sidebar-accent: oklch(0.278 0.033 256.848);
  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);

  color-scheme: dark;
  --destructive-foreground: oklch(0.9857 0.005 263.3);
  --destructive-border: oklch(0.6279 0.2524 29.23);
  --success: oklch(62.7% 0.194 149.214);
  --success-foreground: oklch(0.9857 0.005 263.3);
  --success-border: oklch(0.6371 0.2152 142.13);
  --brand: var(--color-violet-500);
}
/*
  ---break---
*/
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html {
    @apply bg-background h-full w-auto;
  }
  body {
    @apply bg-background text-foreground h-full antialiased;
  }

  noscript {
    @apply flex h-full items-center justify-center;
  }

  /* Default focus states for interactive elements - only shown during keyboard navigation */
  :where(button, input, select, textarea, a, [role='button']):focus-visible {
    @apply border-ring ring-ring ring-1 outline-none;
  }

  /* Remove default focus styles when using mouse */
  :where(button, input, select, textarea, a, [role='button']):focus:not(
      :focus-visible
    ) {
    @apply border-border ring-0 outline-none;
  }

  /* Default focus state for placeholder text */
  :where(input, textarea):focus-visible::placeholder {
    @apply text-muted-foreground;
  }

  input[type='text'],
  input[type='number'],
  input[type='date'],
  input[type='time'] {
    @apply min-h-9;
  }
}
