/* Shared Configuration */
:root {
  --font-sans: 'Inter', 'DM Sans', sans-serif;
  --font-serif: 'Lora', serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 0.625rem;
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

/* --- Green Theme (Default) --- */
:root, [data-theme="green"] {
  --background: oklch(0.9859 0.0213 154.1400);
  --foreground: oklch(0.2735 0.0362 144.5072);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.2735 0.0362 144.5072);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.2735 0.0362 144.5072);
  --primary: oklch(0.7227 0.1920 149.5793);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9500 0.0520 163.0510);
  --secondary-foreground: oklch(0.5960 0.1274 163.2254);
  --muted: oklch(0.9918 0.0134 145.4732);
  --muted-foreground: oklch(0.5510 0.0234 264.3637);
  --accent: oklch(0.9049 0.0895 164.1501);
  --accent-foreground: oklch(0.5960 0.1274 163.2254);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.9288 0.0126 255.5078);
  --input: oklch(1.0000 0 0);
  --ring: oklch(0.7227 0.1920 149.5793);
  --chart-1: oklch(0.6271 0.1699 149.2138);
  --chart-2: oklch(0.8003 0.1821 151.7110);
  --chart-3: oklch(0.8712 0.1363 154.4491);
  --chart-4: oklch(0.9250 0.0806 155.9947);
  --chart-5: oklch(0.9624 0.0434 156.7426);
  --sidebar: oklch(0.4318 0.0865 166.9128);
  --sidebar-foreground: oklch(0.9859 0.0213 154.1400);
  --sidebar-primary: oklch(0.8003 0.1821 151.7110);
  --sidebar-primary-foreground: oklch(0.4318 0.0865 166.9128);
  --sidebar-accent: oklch(0.9250 0.0806 155.9947);
  --sidebar-accent-foreground: oklch(0.4318 0.0865 166.9128);
  --sidebar-border: oklch(0.6959 0.1491 162.4796);
  --sidebar-ring: oklch(0.8003 0.1821 151.7110);
}

.dark, [data-theme="green"].dark {
  --background: oklch(0.2094 0.0195 195.7668);
  --foreground: oklch(0.9719 0.0270 145.3638);
  --card: oklch(0.2715 0.0405 144.3596);
  --card-foreground: oklch(0.9719 0.0270 145.3638);
  --popover: oklch(0.2715 0.0405 144.3596);
  --popover-foreground: oklch(0.9719 0.0270 145.3638);
  --primary: oklch(0.8003 0.1821 151.7110);
  --primary-foreground: oklch(0.2094 0.0195 195.7668);
  --secondary: oklch(0.3070 0.0577 144.0095);
  --secondary-foreground: oklch(0.8712 0.1363 154.4491);
  --muted: oklch(0.3463 0.0386 144.6845);
  --muted-foreground: oklch(0.7457 0.0304 254.7208);
  --accent: oklch(0.4342 0.0622 144.4120);
  --accent-foreground: oklch(0.8712 0.1363 154.4491);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.3463 0.0386 144.6845);
  --input: oklch(0.2715 0.0405 144.3596);
  --ring: oklch(0.8003 0.1821 151.7110);
  --sidebar: oklch(0.2777 0.0445 194.8942);
  --sidebar-foreground: oklch(0.9719 0.0270 145.3638);
}

/* --- Blue Theme --- */
[data-theme="blue"] {
  --background: oklch(0.98 0.008 255.0); /* Off-white dengan sedikit tint biru */
  --foreground: oklch(0.25 0.04 260.0); /* Biru tua gelap untuk teks */
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.25 0.04 260.0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.25 0.04 260.0);
  --primary: oklch(0.58 0.19 255.0); /* Modern Electric Blue */
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.95 0.02 255.0); /* Biru sangat muda */
  --secondary-foreground: oklch(0.45 0.12 255.0);
  --muted: oklch(0.97 0.01 255.0);
  --muted-foreground: oklch(0.50 0.05 260.0);
  --accent: oklch(0.93 0.04 255.0);
  --accent-foreground: oklch(0.35 0.15 260.0);
  --destructive: oklch(0.60 0.18 25.0); /* Tetap merah untuk error */
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.91 0.02 255.0);
  --input: oklch(0.91 0.02 255.0);
  --ring: oklch(0.58 0.19 255.0);
  
  /* Modern Blue Charts Palette */
  --chart-1: oklch(0.58 0.19 255.0);
  --chart-2: oklch(0.65 0.14 210.0);
  --chart-3: oklch(0.48 0.15 280.0);
  --chart-4: oklch(0.75 0.12 230.0);
  --chart-5: oklch(0.85 0.08 200.0);

  /* Sidebar Modern Blue */
  --sidebar: oklch(0.98 0.01 255.0);
  --sidebar-foreground: oklch(0.25 0.04 260.0);
  --sidebar-primary: oklch(0.58 0.19 255.0);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.93 0.04 255.0);
  --sidebar-accent-foreground: oklch(0.58 0.19 255.0);
  --sidebar-border: oklch(0.91 0.02 255.0);
  --sidebar-ring: oklch(0.58 0.19 255.0);

  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Lora', serif;
  --font-mono: 'Fira Code', monospace;
  --radius: 0.625rem;
  
  --shadow-x: 0rem;
  --shadow-y: 0.25rem;
  --shadow-blur: 0.5rem;
  --shadow-spread: 0rem;
  --shadow-opacity: 0.08;
  --shadow-color: #000000;
  --shadow-2xs: 0rem 0.25rem 0.5rem 0rem hsl(220 20% 10% / 0.04);
  --shadow-xs: 0rem 0.25rem 0.5rem 0rem hsl(220 20% 10% / 0.05);
  --shadow-sm: 0rem 0.25rem 0.5rem 0rem hsl(220 20% 10% / 0.08);
  --shadow: 0rem 0.25rem 0.5rem 0rem hsl(220 20% 10% / 0.10);
  --shadow-md: 0rem 0.25rem 0.5rem 0rem hsl(220 20% 10% / 0.12);
  --shadow-lg: 0rem 0.25rem 0.5rem 0rem hsl(220 20% 10% / 0.15);
  --shadow-xl: 0rem 0.25rem 0.5rem 0rem hsl(220 20% 10% / 0.18);
  --shadow-2xl: 0rem 0.25rem 0.5rem 0rem hsl(220 20% 10% / 0.25);
}

[data-theme="blue"].dark {
  --background: oklch(0.18 0.03 260.0); /* Deep Midnight Blue */
  --foreground: oklch(0.94 0.01 255.0);
  --card: oklch(0.22 0.03 260.0);
  --card-foreground: oklch(0.94 0.01 255.0);
  --popover: oklch(0.18 0.03 260.0);
  --popover-foreground: oklch(0.94 0.01 255.0);
  --primary: oklch(0.65 0.18 255.0); /* Biru yang lebih cerah untuk dark mode */
  --primary-foreground: oklch(0.15 0.05 260.0);
  --secondary: oklch(0.28 0.05 260.0);
  --secondary-foreground: oklch(0.85 0.05 255.0);
  --muted: oklch(0.25 0.03 260.0);
  --muted-foreground: oklch(0.65 0.03 255.0);
  --accent: oklch(0.32 0.08 260.0);
  --accent-foreground: oklch(0.90 0.05 255.0);
  --destructive: oklch(0.55 0.20 25.0);
  --destructive-foreground: oklch(0.95 0.02 25.0);
  --border: oklch(0.30 0.04 260.0);
  --input: oklch(0.25 0.04 260.0);
  --ring: oklch(0.65 0.18 255.0);

  /* Charts Dark */
  --chart-1: oklch(0.65 0.18 255.0);
  --chart-2: oklch(0.75 0.12 210.0);
  --chart-3: oklch(0.55 0.15 280.0);
  --chart-4: oklch(0.85 0.10 230.0);
  --chart-5: oklch(0.92 0.05 200.0);

  /* Sidebar Dark */
  --sidebar: oklch(0.15 0.04 260.0);
  --sidebar-foreground: oklch(0.94 0.01 255.0);
  --sidebar-primary: oklch(0.65 0.18 255.0);
  --sidebar-primary-foreground: oklch(0.15 0.05 260.0);
  --sidebar-accent: oklch(0.25 0.06 260.0);
  --sidebar-accent-foreground: oklch(0.94 0.01 255.0);
  --sidebar-border: oklch(0.28 0.04 260.0);
  --sidebar-ring: oklch(0.65 0.18 255.0);
}

/* --- Cyan Theme --- */
[data-theme="cyan"] {
  --background: oklch(0.98 0.01 195);
  --foreground: oklch(0.25 0.04 200);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.25 0.04 200);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.25 0.04 200);
  --primary: oklch(0.62 0.15 195); /* Oceanic Cyan */
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.92 0.04 195); 
  --secondary-foreground: oklch(0.40 0.10 195);
  --muted: oklch(0.96 0.02 195);
  --muted-foreground: oklch(0.55 0.04 200);
  --accent: oklch(0.88 0.10 195);
  --accent-foreground: oklch(0.30 0.12 195);
  --destructive: oklch(0.60 0.18 25.0);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.90 0.03 195);
  --input: oklch(0.90 0.03 195);
  --ring: oklch(0.62 0.15 195);
  
  /* Oceanic Charts */
  --chart-1: oklch(0.62 0.15 195);
  --chart-2: oklch(0.70 0.12 170);
  --chart-3: oklch(0.55 0.14 210);
  --chart-4: oklch(0.80 0.08 190);
  --chart-5: oklch(0.90 0.05 200);

  /* Sidebar Oceanic */
  --sidebar: oklch(0.98 0.01 195);
  --sidebar-foreground: oklch(0.25 0.04 200);
  --sidebar-primary: oklch(0.62 0.15 195);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.88 0.10 195);
  --sidebar-accent-foreground: oklch(0.30 0.12 195);
  --sidebar-border: oklch(0.90 0.03 195);
  --sidebar-ring: oklch(0.62 0.15 195);

  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Lora', serif;
  --font-mono: 'Fira Code', monospace;
  --radius: 0.625rem;
}

[data-theme="cyan"].dark {
  --background: oklch(0.18 0.04 200);
  --foreground: oklch(0.94 0.02 195);
  --card: oklch(0.22 0.04 200);
  --card-foreground: oklch(0.94 0.02 195);
  --popover: oklch(0.18 0.04 200);
  --popover-foreground: oklch(0.94 0.02 195);
  --primary: oklch(0.72 0.14 195); /* Vibrant Cyan for Dark */
  --primary-foreground: oklch(0.15 0.05 200);
  --secondary: oklch(0.28 0.06 200);
  --secondary-foreground: oklch(0.88 0.04 195);
  --muted: oklch(0.25 0.04 200);
  --muted-foreground: oklch(0.65 0.03 195);
  --accent: oklch(0.35 0.08 200);
  --accent-foreground: oklch(0.92 0.04 195);
  --destructive: oklch(0.55 0.20 25.0);
  --destructive-foreground: oklch(0.95 0.02 25.0);
  --border: oklch(0.30 0.05 200);
  --input: oklch(0.28 0.05 200);
  --ring: oklch(0.72 0.14 195);
  
  --sidebar: oklch(0.15 0.05 200);
  --sidebar-foreground: oklch(0.94 0.02 195);
  --sidebar-primary: oklch(0.72 0.14 195);
  --sidebar-primary-foreground: oklch(0.15 0.05 200);
  --sidebar-accent: oklch(0.25 0.06 260.0);
  --sidebar-accent-foreground: oklch(0.94 0.02 195);
  --sidebar-border: oklch(0.28 0.05 200);
  --sidebar-ring: oklch(0.72 0.14 195);
}

/* Tailwind Integration */
@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);

  --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);
}