/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for QuickSilver.
 *
 * 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.
 */

@layer base {
  :root {
    --background: oklch(0.94 0.05 90);
    --foreground: oklch(0.38 0.1 30);

    --card: oklch(1 0 0);
    --card-foreground: oklch(0.38 0.1 30);

    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.38 0.1 30);

    --primary: oklch(0.48 0.11 210);
    --primary-foreground: oklch(1 0 0);

    --secondary: oklch(0.6 0.09 200);
    --secondary-foreground: oklch(0.25 0.04 200);

    --accent: oklch(0.6 0.16 38);
    --accent-foreground: oklch(1 0 0);

    --destructive: oklch(0.5 0.17 28);
    --destructive-foreground: oklch(1 0 0);

    --teal-50: oklch(0.97 0.02 200);
    --teal-100: oklch(0.93 0.03 200);
    --teal-200: oklch(0.87 0.05 200);
    --teal-300: oklch(0.8 0.07 200);
    --teal-400: oklch(0.7 0.09 205);
    --teal-500: oklch(0.62 0.1 205);
    --teal-600: oklch(0.55 0.11 210);
    --teal-700: oklch(0.48 0.11 210);
    --teal-800: oklch(0.38 0.09 210);
    --teal-900: oklch(0.3 0.07 210);
    --teal-950: oklch(0.22 0.05 210);

    --rust-50: oklch(0.97 0.02 40);
    --rust-100: oklch(0.93 0.04 38);
    --rust-200: oklch(0.86 0.07 38);
    --rust-300: oklch(0.78 0.1 38);
    --rust-400: oklch(0.7 0.13 38);
    --rust-500: oklch(0.62 0.16 38);
    --rust-600: oklch(0.55 0.17 35);
    --rust-700: oklch(0.48 0.16 32);
    --rust-800: oklch(0.4 0.13 30);
    --rust-900: oklch(0.32 0.1 28);
    --rust-950: oklch(0.25 0.07 28);

    --success-50: oklch(0.97 0.02 170);
    --success-100: oklch(0.92 0.04 170);
    --success-200: oklch(0.85 0.07 170);
    --success-300: oklch(0.75 0.09 170);
    --success-400: oklch(0.68 0.1 170);
    --success-500: oklch(0.6 0.11 170);
    --success-600: oklch(0.52 0.12 170);
    --success-700: oklch(0.45 0.11 170);
    --success-800: oklch(0.38 0.09 170);
    --success-900: oklch(0.3 0.07 170);

    --warning-50: oklch(0.98 0.02 75);
    --warning-100: oklch(0.95 0.04 70);
    --warning-200: oklch(0.88 0.08 65);
    --warning-300: oklch(0.8 0.12 60);
    --warning-400: oklch(0.72 0.15 55);
    --warning-500: oklch(0.65 0.17 50);
    --warning-600: oklch(0.57 0.18 45);
    --warning-700: oklch(0.5 0.17 40);
    --warning-800: oklch(0.42 0.14 35);
    --warning-900: oklch(0.34 0.11 30);

    --info-50: oklch(0.97 0.02 210);
    --info-100: oklch(0.92 0.04 210);
    --info-200: oklch(0.86 0.06 210);
    --info-300: oklch(0.78 0.08 210);
    --info-400: oklch(0.7 0.09 210);
    --info-500: oklch(0.62 0.1 210);
    --info-600: oklch(0.55 0.11 210);
    --info-700: oklch(0.48 0.1 210);
    --info-800: oklch(0.38 0.08 210);
    --info-900: oklch(0.3 0.06 210);

    --muted: oklch(0.88 0.03 90);
    --muted-foreground: oklch(0.45 0.05 30);

    --border: oklch(0.85 0.03 90);
    --input: oklch(0.9 0.02 90);
    --ring: oklch(0.48 0.11 210);

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

    --radius: 0.75rem;

    --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 1px hsl(0 0% 0% / 0.05);
    --shadow-xs:
      0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-sm:
      0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow:
      0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-md:
      0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
    --shadow-lg:
      0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
    --shadow-xl:
      0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
    --shadow-2xl:
      0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
    --tracking-normal: 0em;
    --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.28 0.06 210);
    --foreground: oklch(0.95 0.03 90);

    --card: oklch(0.32 0.05 210);
    --card-foreground: oklch(0.95 0.03 90);

    --popover: oklch(0.32 0.05 210);
    --popover-foreground: oklch(0.95 0.03 90);

    --primary: oklch(0.62 0.1 200);
    --primary-foreground: oklch(0.18 0.03 200);

    --secondary: oklch(0.45 0.1 35);
    --secondary-foreground: oklch(0.95 0.03 90);

    --accent: oklch(0.65 0.16 38);
    --accent-foreground: oklch(0.18 0.03 200);

    --destructive: oklch(0.6 0.17 28);
    --destructive-foreground: oklch(0.18 0.03 200);

    --muted: oklch(0.36 0.04 210);
    --muted-foreground: oklch(0.8 0.03 90);

    --border: oklch(0.4 0.04 210);
    --input: oklch(0.4 0.04 210);
    --ring: oklch(0.62 0.1 200);

    --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.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
  }
}