Uecko_ERP/packages/shadcn-ui/src/styles/globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "@fontsource-variable/geist";

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

@theme inline {
  --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);
  --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);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 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);
  }
}

@layer utilities {
  body {
    font-family: "Geist Variable", ui-sans-serif, sans-serif, system-ui;
  }
}

/**
 *
 * https://tweakcn.com/
 * https://themux.vercel.app/shadcn-themes
 * https://shadcnstudio.com/theme-generator
 *
 **/

:root {
  --font-sans: "Geist Variable", ui-sans-serif, sans-serif, system-ui;

  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.575 0.1533 256.4357);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.6427 0.1407 253.94);
  --secondary-foreground: oklch(0.9543 0.0166 250.8425);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.6427 0.1407 253.94);
  --accent-foreground: oklch(0.97 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.575 0.1533 256.4357); /* oklch(0.708 0 0); */
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
  --sidebar: oklch(0.575 0.1533 256.4357);
  --sidebar-foreground: oklch(1 0 0);
  --sidebar-primary: oklch(1 0 0);
  --sidebar-primary-foreground: oklch(0.575 0.1533 256.4357);
  --sidebar-accent: oklch(0.6427 0.1407 253.94);
  --sidebar-accent-foreground: oklch(1 0 0);
  --sidebar-border: oklch(0.6427 0.1407 253.94);
  --sidebar-ring: oklch(1 0 0);

  --radius: 0.625rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
}

.dark {
  --background: oklch(0.1448 0 0);
  --foreground: oklch(0.9851 0 0);
  --card: oklch(0.2046 0 0);
  --card-foreground: oklch(0.9851 0 0);
  --popover: oklch(0.2046 0 0);
  --popover-foreground: oklch(0.9851 0 0);
  --primary: oklch(0.5471 0.2506 262.8726);
  --primary-foreground: oklch(0.9705 0.0142 254.6042);
  --secondary: oklch(0.2707 0.0092 285.7705);
  --secondary-foreground: oklch(0.9851 0 0);
  --muted: oklch(0.2686 0 0);
  --muted-foreground: oklch(0.709 0 0);
  --accent: oklch(0.3729 0.0306 259.7328);
  --accent-foreground: oklch(0.8717 0.0093 258.3382);
  --destructive: oklch(0.7022 0.1892 22.2279);
  --destructive-foreground: oklch(0.2558 0.0412 235.1561);
  --border: oklch(1 0 0);
  --input: oklch(1 0 0);
  --ring: oklch(0.4915 0.2776 263.8724);
  --chart-1: oklch(0.4915 0.2776 263.8724);
  --chart-2: oklch(0.7019 0.1577 160.4375);
  --chart-3: oklch(0.7724 0.1728 65.367);
  --chart-4: oklch(0.6217 0.2589 305.309);
  --chart-5: oklch(0.6435 0.2452 16.501);
  --sidebar: oklch(0.2046 0 0);
  --sidebar-foreground: oklch(0.9851 0 0);
  --sidebar-primary: oklch(0.5471 0.2506 262.8726);
  --sidebar-primary-foreground: oklch(0.9705 0.0142 254.6042);
  --sidebar-accent: oklch(0.2686 0 0);
  --sidebar-accent-foreground: oklch(0.9851 0 0);
  --sidebar-border: oklch(1 0 0);
  --sidebar-ring: oklch(0.4915 0.2776 263.8724);
  --radius: 0.25rem;
  --shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 1px 1px 6px 0px hsl(0 0% 0% / 0.25);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
    @apply transition-colors duration-300; /* Added transition for smooth color changes */
  }

  body {
    @apply bg-background text-foreground;
  }

  input {
    @apply bg-input;
  }
}

@source "../components";