/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for HuitDesign.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  --background: oklch(1.0000 0 0);
  --foreground: oklch(0.2098 0.0083 84.5851);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.2098 0.0083 84.5851);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.2098 0.0083 84.5851);
  --primary: oklch(0.8424 0.1592 83.9635);
  --primary-foreground: oklch(0.2098 0.0083 84.5851);
  --secondary: oklch(0.9711 0.0074 80.7211);
  --secondary-foreground: oklch(0.2098 0.0083 84.5851);
  --muted: oklch(0.9674 0.0013 286.3752);
  --muted-foreground: oklch(0.5517 0.0138 285.9385);
  --accent: oklch(0.9681 0.0409 90.2423);
  --accent-foreground: oklch(0.2098 0.0083 84.5851);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(0.9851 0 0);
  --border: oklch(0.9197 0.0040 286.3202);
  --input: oklch(0.9197 0.0040 286.3202);
  --ring: oklch(0.8424 0.1592 83.9635);
  --chart-1: oklch(0.8424 0.1592 83.9635);
  --chart-2: oklch(0.3600 0 0);
  --chart-3: oklch(0.6174 0.0957 88.4833);
  --chart-4: oklch(0.9033 0.1154 88.0464);
  --chart-5: oklch(0.7350 0.1462 84.2671);
  --sidebar: oklch(0.9851 0 0);
  --sidebar-foreground: oklch(0.2098 0.0083 84.5851);
  --sidebar-primary: oklch(0.8424 0.1592 83.9635);
  --sidebar-primary-foreground: oklch(0.2098 0.0083 84.5851);
  --sidebar-accent: oklch(0.9674 0.0013 286.3752);
  --sidebar-accent-foreground: oklch(0.2098 0.0083 84.5851);
  --sidebar-border: oklch(0.9197 0.0040 286.3202);
  --sidebar-ring: oklch(0.8424 0.1592 83.9635);
  --font-sans: "Host Grotesk", system-ui, -apple-system, sans-serif;
  --font-serif: Playfair Display, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;
  --shadow-x: 0px;
  --shadow-y: 4px;
  --shadow-blur: 10px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.05;
  --shadow-color: #000000;
  --shadow-2xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
  --shadow-xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
  --shadow-sm: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow-md: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
  --shadow-lg: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
  --shadow-xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
  --shadow-2xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.13);
  --tracking-normal: -0.015em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  --background: oklch(0.1539 0.0021 106.6426);
  --foreground: oklch(0.9791 0 0);
  --card: oklch(0.1904 0.0040 106.7692);
  --card-foreground: oklch(0.9791 0 0);
  --popover: oklch(0.1904 0.0040 106.7692);
  --popover-foreground: oklch(0.9791 0 0);
  --primary: oklch(0.8424 0.1592 83.9635);
  --primary-foreground: oklch(0.2098 0.0083 84.5851);
  --secondary: oklch(0.2166 0.0057 106.8685);
  --secondary-foreground: oklch(0.9791 0 0);
  --muted: oklch(0.2739 0.0055 286.0326);
  --muted-foreground: oklch(0.7118 0.0129 286.0665);
  --accent: oklch(0.2691 0.0218 91.8152);
  --accent-foreground: oklch(0.8424 0.1592 83.9635);
  --destructive: oklch(0.3958 0.1331 25.7230);
  --destructive-foreground: oklch(0.9851 0 0);
  --border: oklch(0.2739 0.0055 286.0326);
  --input: oklch(0.2739 0.0055 286.0326);
  --ring: oklch(0.8424 0.1592 83.9635);
  --chart-1: oklch(0.8424 0.1592 83.9635);
  --chart-2: oklch(0.5094 0.0888 89.5115);
  --chart-3: oklch(0.8839 0.1382 87.7879);
  --chart-4: oklch(0.3621 0.0606 90.0105);
  --chart-5: oklch(0.6644 0.1316 85.2531);
  --sidebar: oklch(0.1393 0.0024 106.7017);
  --sidebar-foreground: oklch(0.9791 0 0);
  --sidebar-primary: oklch(0.8424 0.1592 83.9635);
  --sidebar-primary-foreground: oklch(0.2098 0.0083 84.5851);
  --sidebar-accent: oklch(0.2166 0.0057 106.8685);
  --sidebar-accent-foreground: oklch(0.9791 0 0);
  --sidebar-border: oklch(0.2739 0.0055 286.0326);
  --sidebar-ring: oklch(0.8424 0.1592 83.9635);
  --font-sans: "Host Grotesk", system-ui, -apple-system, sans-serif;
  --font-serif: Playfair Display, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;
  --shadow-x: 0px;
  --shadow-y: 8px;
  --shadow-blur: 20px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.4;
  --shadow-color: #000000;
  --shadow-2xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.20);
  --shadow-xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.20);
  --shadow-sm: 0px 8px 20px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
  --shadow: 0px 8px 20px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
  --shadow-md: 0px 8px 20px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
  --shadow-lg: 0px 8px 20px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
  --shadow-xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
  --shadow-2xl: 0px 8px 20px 0px hsl(0 0% 0% / 1.00);
}