/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Synfonik.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values.
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.343 0.032 156.56);
  --card: oklch(1 0 89.876);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: oklch(0.343 0.032 156.56);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.782 0.033 151.20);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.373 0.031 259.733);
  --metallic: oklch(73.57% 0.158 87.52);
  --metallic-foreground: oklch(0.282 0.033 151.20);
  --accent: oklch(0.645 0.036 103.58);
  --accent-foreground: oklch(0.38 0.145 265.465);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --success: oklch(0.634 0.143 138.22);
  --success-foreground: oklch(0.326 0.103 139.908);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-stylish: "KudryDisplaySans", "Georgia", "Cambria";
  --radius: 0.5rem;
  --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;
  --spacing: 0.25rem;
  --logo-width: 40px;
}

/**
#4A5D66
#D4AF37
 */

.dark {
  --background: oklch(0.282 0.033 151.20);
  --foreground: oklch(0.960 0.017 110.28);
  --card: oklch(0.645 0.036 103.58);
  --card-foreground: oklch(0.9219 0 0);
  --primary: oklch(0.343 0.032 156.56);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.960 0.017 110.28);
  --secondary-foreground: oklch(0.282 0.033 151.20);
  --muted: oklch(0.645 0.036 103.58);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --metallic: oklch(0.724 0.144 87.582);
  --metallic-foreground: oklch(0.282 0.033 151.20);
  --accent: oklch(43.91% 0.034 233.17);
  --accent-foreground: oklch(0.960 0.017 110.28);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: Inter, "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-stylish: "KudryDisplaySans", "Georgia", "Cambria";
  --radius: 0.5rem;
  --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);
}

/* Subtle AOS zoom specifically for Section grid wrapper. */
.section-grid-aos[data-aos="zoom-in"] {
  transform: scale(0.92) !important;
}

.section-grid-aos[data-aos="zoom-in"].aos-animate {
  transform: scale(1) !important;
}

/* Subtle hover zoom for Synfonik Image component. */
.synfonik-image-hover .synfonik-image-hover__img {
  transform: scale(1);
  transition: transform 300ms ease;
}

.synfonik-image-hover:hover .synfonik-image-hover__img,
.synfonik-image-hover:focus-within .synfonik-image-hover__img {
  transform: scale(1.03);
}