Tailwind V4 Config

@import "tailwindcss";
@import "tw-animate-css";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:is(.dark *));

@theme {
  --color-warning-main: #ff9800;
  --color-divider: #eaebed;

  --text-tiny: 13px;
  --text-tiny--line-height: 24px;

  --text-base-shift: 18px;
  --text-base-shift--line-height: 26px;

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-3xl: 1300px; 
  --breakpoint-2xl: 1536px;
}

@utility container {
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1rem;

  @variant sm {
    max-width: var(--breakpoint-sm);
    padding-inline: 1.5rem; /* px-6 */
  }

  @variant md {
    max-width: var(--breakpoint-md);
    padding-inline: 2rem;
  }

  @variant lg {
    max-width: var(--breakpoint-lg);
    padding-inline: 3rem;
  }

  @variant 3xl {
    max-width: var(--breakpoint-3xl); 
    padding-inline: 4rem; 
  }
  @variant xl {
    max-width: var(--breakpoint-xl);
  }

  @variant 2xl {
    max-width: var(--breakpoint-2xl);
  }
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.2077 0.0398 265.7549);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2077 0.0398 265.7549);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2077 0.0398 265.7549);
  --primary: oklch(0.5117 0.1331 151.0746);
  --primary-foreground: oklch(0.9842 0.0034 247.8575);
  --secondary: oklch(0.7686 0.1647 70.0804);
  --secondary-foreground: oklch(0.2077 0.0398 265.7549);
  --muted: oklch(0.9683 0.0069 247.8956);
  --muted-foreground: oklch(0.5544 0.0407 257.4166);
  --accent: oklch(0.9683 0.0069 247.8956);
  --accent-foreground: oklch(0.2077 0.0398 265.7549);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(0.9842 0.0034 247.8575);
  --border: oklch(0.9288 0.0126 255.5078);
  --input: oklch(0.9288 0.0126 255.5078);
  --ring: oklch(0.5117 0.1331 151.0746);
  --chart-1: oklch(0.5117 0.1331 151.0746);
  --chart-2: oklch(0.7686 0.1647 70.0804);
  --chart-3: oklch(0.6231 0.188 259.8145);
  --chart-4: oklch(0.6559 0.2118 354.3084);
  --chart-5: oklch(0.6056 0.2189 292.7172);
  --sidebar: oklch(0.9842 0.0034 247.8575);
  --sidebar-foreground: oklch(0.2077 0.0398 265.7549);
  --sidebar-primary: oklch(0.5117 0.1331 151.0746);
  --sidebar-primary-foreground: oklch(0.9842 0.0034 247.8575);
  --sidebar-accent: oklch(0.9683 0.0069 247.8956);
  --sidebar-accent-foreground: oklch(0.2077 0.0398 265.7549);
  --sidebar-border: oklch(0.9288 0.0126 255.5078);
  --sidebar-ring: oklch(0.5117 0.1331 151.0746);
  --font-sans: var(--font-geist-sans);
  --font-serif: var(--font-source-serif-4);
  --font-mono: var(--font-geist-mono);
  --radius: 0.75rem;
  --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
    0px 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
    0px 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
    0px 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
    0px 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
    0px 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0rem;
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.1556 0.0163 247.6245);
  --foreground: oklch(0.9288 0.0126 255.5078);
  --card: oklch(0.2077 0.0398 265.7549);
  --card-foreground: oklch(0.9288 0.0126 255.5078);
  --popover: oklch(0.1556 0.0163 247.6245);
  --popover-foreground: oklch(0.9288 0.0126 255.5078);
  --primary: oklch(0.5117 0.1331 151.0746);
  --primary-foreground: oklch(0.9842 0.0034 247.8575);
  --secondary: oklch(0.5117 0.1331 151.0746);
  --secondary-foreground: oklch(0.9842 0.0034 247.8575);
  --muted: oklch(0.2767 0.0388 245.2481);
  --muted-foreground: oklch(0.7107 0.0351 256.7878);
  --accent: oklch(0.2767 0.0388 245.2481);
  --accent-foreground: oklch(0.9288 0.0126 255.5078);
  --destructive: oklch(0.3958 0.1331 25.723);
  --destructive-foreground: oklch(0.9842 0.0034 247.8575);
  --border: oklch(0.2767 0.0388 245.2481);
  --input: oklch(0.2767 0.0388 245.2481);
  --ring: oklch(0.5117 0.1331 151.0746);
  --chart-1: oklch(0.5117 0.1331 151.0746);
  --chart-2: oklch(0.7686 0.1647 70.0804);
  --chart-3: oklch(0.6231 0.188 259.8145);
  --chart-4: oklch(0.6559 0.2118 354.3084);
  --chart-5: oklch(0.6056 0.2189 292.7172);
  --sidebar: oklch(0.2077 0.0398 265.7549);
  --sidebar-foreground: oklch(0.9288 0.0126 255.5078);
  --sidebar-primary: oklch(0.5117 0.1331 151.0746);
  --sidebar-primary-foreground: oklch(0.9842 0.0034 247.8575);
  --sidebar-accent: oklch(0.2767 0.0388 245.2481);
  --sidebar-accent-foreground: oklch(0.9288 0.0126 255.5078);
  --sidebar-border: oklch(0.2767 0.0388 245.2481);
  --sidebar-ring: oklch(0.5117 0.1331 151.0746);
  --font-sans: var(--font-geist-sans);
  --font-serif: var(--font-source-serif-4);
  --font-mono: var(--font-geist-mono);
  --radius: 0.75rem;
  --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
    0px 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
    0px 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
    0px 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
    0px 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
    0px 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.25);
}



body {
  letter-spacing: var(--tracking-normal);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}