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

/*@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=PT+Mono&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");*/

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");

@import "tailwindcss";
@import "tw-animate-css";

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

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

  --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: Arial, Helvetica, sans-serif;
  }
}

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

@layer base {
  :root {
    --font-sans: "Noto Sans", ui-sans-serif, sans-serif, system-ui;
    --font-serif: "Noto Serif", ui-serif, serif;
    --font-mono: "Noto Sans Mono", ui-monospace, monospace;

    --background: oklch(1 0 0);
    --foreground: oklch(13.636% 0.02685 282.25);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.2035 0.0139 285.1021);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.2035 0.0139 285.1021);
    --primary: oklch(0.623 0.214 259.815);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.9574 0.0011 197.1383);
    --secondary-foreground: oklch(0.2069 0.0098 285.5081);
    --muted: oklch(0.9674 0.0013 286.3752);
    --muted-foreground: oklch(0.5466 0.0216 285.664);
    --accent: oklch(0.9299 0.0334 272.7879);
    --accent-foreground: oklch(0.3729 0.0306 259.7328);
    --destructive: oklch(0.583 0.2387 28.4765);
    --destructive-foreground: oklch(1 0 0);
    --border: oklch(0.9273 0.0067 286.2663);
    --input: oklch(0.9173 0.0067 286.2663);
    --ring: oklch(0.6187 0.2067 259.2316);
    --chart-1: oklch(0.6471 0.2173 36.8511);
    --chart-2: oklch(37.973% 0.0506 187.591);
    --chart-3: oklch(0.4247 0.0852 230.5827);
    --chart-4: oklch(0.829 0.1712 81.0381);
    --chart-5: oklch(0.7724 0.1728 65.367);
    --sidebar: oklch(0.957 0.007 272.5840410480741);
    --sidebar-foreground: oklch(0.2035 0.0139 285.1021);
    --sidebar-primary: oklch(0.623 0.214 259.815);
    --sidebar-primary-foreground: oklch(1 0 0);
    --sidebar-accent: oklch(0.9674 0.0013 286.3752);
    --sidebar-accent-foreground: oklch(0.2069 0.0098 285.5081);
    --sidebar-border: oklch(0.9173 0.0067 286.2663);
    --sidebar-ring: oklch(0.623 0.214 259.815);
    --radius: 0.4rem;
    --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);
    --tracking-normal: 0rem;
    --spacing: 0.22rem;
  }

  .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";