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

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

:root {
  --radius: 0.3rem;

  /* Base colors */
  --background: oklch(0.99 0.001 30);
  --foreground: oklch(0.15 0.01 30);
  --card: var(--background);
  --card-foreground: var(--foreground);
  --popover: oklch(1 0 0);
  --popover-foreground: var(--foreground);

  /* Primary theme from new colors */
  --primary: oklch(0.41 0.16 33);
  /* #7a200f - reddish brown */
  --primary-foreground: oklch(1 0 0);
  /* white */

  --secondary: oklch(0.48 0.09 220);
  /* #0f6a7a - teal */
  --secondary-foreground: oklch(0.2 0.01 30);

  --muted: oklch(0.93 0.01 30);
  --muted-foreground: oklch(0.45 0.02 30);
  --accent: oklch(0.9 0.015 30);
  --accent-foreground: oklch(0.2 0.01 30);
  --destructive: oklch(0.55 0.2 29);
  --border: oklch(0.9 0.01 30);
  --input: oklch(0.9 0.01 30);
  --ring: var(--primary);

  /* Chart palette (based on new tones) */
  --chart-1: oklch(0.48 0.09 220);
  /* teal */
  --chart-2: oklch(0.41 0.16 33);
  /* reddish brown */
  --chart-3: oklch(0.55 0.08 240.3);
  /* blue-gray */
  --chart-4: oklch(0.5 0.1 220);
  /* lighter teal */
  --chart-5: oklch(0.5 0.15 33);
  /* lighter reddish brown */

  /* Sidebar colors */
  --sidebar: oklch(0.98 0 0);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--secondary);
  --sidebar-accent-foreground: var(--secondary-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);

  /* System colors from new palette */
  --color-site-a: var(--secondary);
  /* teal */
  --color-site-a-light: oklch(0.5 0.1 220);
  --color-site-a-dark: oklch(0.38 0.1 220);
  --color-site-b: var(--primary);
  /* reddish brown */
  --color-site-b-light: oklch(0.5 0.15 33);
  --color-site-b-dark: oklch(0.3 0.14 33);
  --color-black: oklch(0 0 0);
  --color-white: oklch(1 0 0);
  --color-blue-gray: oklch(0.55 0.08 240.3);
}

.dark {
  --background: oklch(0.15 0.01 30);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.2 0.01 30);
  --card-foreground: var(--foreground);
  --popover: oklch(0.2 0.01 30);
  --popover-foreground: var(--foreground);

  --primary: oklch(0.3 0.14 33);
  /* darker reddish brown */
  --primary-foreground: oklch(1 0 0);

  --secondary: oklch(0.38 0.1 220);
  /* darker teal */
  --secondary-foreground: var(--foreground);

  --muted: oklch(0.3 0.01 30);
  --muted-foreground: oklch(0.7 0.01 30);
  --accent: oklch(0.3 0.01 30);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.4 0.2 28);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: var(--primary);

  --chart-1: var(--color-site-a-dark);
  --chart-2: var(--color-site-b-dark);
  --chart-3: oklch(0.55 0.08 240.3);
  --chart-4: oklch(0.48 0.09 220);
  --chart-5: oklch(0.41 0.16 33);

  --sidebar: oklch(0.2 0.01 30);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--foreground);
  --sidebar-accent: var(--color-site-a-dark);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: var(--primary);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* SYSTEM COLORS from new palette */
  --color-site-a: var(--color-site-a);
  --color-site-a-light: var(--color-site-a-light);
  --color-site-a-dark: var(--color-site-a-dark);
  --color-site-b: var(--color-site-b);
  --color-site-b-light: var(--color-site-b-light);
  --color-site-b-dark: var(--color-site-b-dark);
}


@layer base {
  * {
    @apply border-border outline-ring/50;
  }

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

  button {
    @apply cursor-pointer;
  }

  .brown-gold {
    @apply bg-gradient-to-r from-[#6f1304] via-[#8a1805] to-[#d4b56a];
  }

  .brown-navyblue {
    @apply bg-gradient-to-br from-[#041e6f] via-[#6f1304] to-[#a82009];
  }

  .brown-teal {
    @apply bg-gradient-to-r from-[#6f1304] via-[#8a1805] to-[#047f6f];
  }

  .brown-earthtone {
    @apply bg-gradient-to-br from-[#6f1304] via-[#a82009] to-[#d6a96a];
  }

  .brown-burgundy {
    @apply bg-gradient-to-tr from-[#450c02] via-[#6f1304] to-[#6f0413];
  }

  .brown-purple {
    @apply bg-gradient-to-br from-[#6f1304] via-[#8a1805] to-[#4a0f6f];
  }

  .brown-charcoal {
    @apply bg-gradient-to-r from-[#6f1304] to-[#333333];
  }
}

.color {
  color: oklch(0.627 0.222 35.57)
}

/* ADDED THEME CSS FOR THE THEME TOGGLE SETTINGS */
@import "./themes/theme-green.css";
@import "./themes/theme-blue.css";
@import "./themes/theme-amber.css";
@import "./themes/theme-mono.css";
@import "./themes/theme-default.css";

/* sty for react-date-picker */
.custom-calendar-popup {
  max-height: unset !important;
  height: auto !important;
}

/* Add these to your CSS */
.chart-color-1 {
  background-color: rgb(var(--color-chart-1));
  border-color: rgb(var(--color-chart-1));
}

.chart-color-2 {
  background-color: rgb(var(--color-chart-2));
  border-color: rgb(var(--color-chart-2));
}

/* Add more as needed */