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

/* DKMc - Customized theme.css, copied out of the theme src directory. */

:root {
  --background: oklch(0.9857 0.0015 84.5551);
  --foreground: oklch(0.2649 0.0225 248.6877);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.2336 0.0186 248.6300);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.2336 0.0186 248.6300);
  --primary: oklch(0.4830 0.0795 53.4223);
  --primary-foreground: oklch(0.9857 0.0015 84.5551);
  --secondary: oklch(0.3657 0.0208 248.3964);
  --secondary-foreground: oklch(0.9857 0.0015 84.5551);
  --muted: oklch(0.9535 0.0026 247.8500);
  --muted-foreground: oklch(0.5491 0.0226 248.2392);
  --accent: oklch(0.468 0.0456 101.63); 
  --accent-foreground: oklch(0.9857 0.0015 84.5551);
  --destructive: oklch(0.5181 0.1747 25.7610);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.8827 0.0067 247.9010);
  --input: oklch(0.9222 0.0044 247.8716);
  --ring: oklch(0.4830 0.0795 53.4223);
  --chart-1: oklch(0.4830 0.0795 53.4223);
  --chart-2: oklch(0.4727 0.0604 157.4957);
  --chart-3: oklch(0.3657 0.0208 248.3964);
  --chart-4: oklch(0.6391 0.0722 75.2215);
  --chart-5: oklch(0.6780 0.0191 248.1098);
  --sidebar: oklch(0.2970 0.0158 248.3587);
  --sidebar-foreground: oklch(0.9641 0.0037 84.5611);
  --sidebar-primary: oklch(0.4830 0.0795 53.4223);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.3657 0.0208 248.3964);
  --sidebar-accent-foreground: oklch(0.9641 0.0037 84.5611);
  --sidebar-border: oklch(0.3367 0.0187 248.3826);
  --sidebar-ring: oklch(0.4830 0.0795 53.4223);
  --font-sans: Inter, -apple-system, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.125rem;
  --shadow-x: 0px;
  --shadow-y: 2px;
  --shadow-blur: 4px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: rgba(0,0,0,0.1);
  --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.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: -0.01em;
  --spacing: 0.25rem;

  --gin-color-primary: rgb(var(--gin-color-primary-rgb));
  --gin-color-primary-light: rgba(var(--gin-color-primary-rgb), .15);
  --gin-bg-app: rgb(var(--gin-bg-app-rgb));
  --gin-bg-layer-rgb: 255, 255, 255;
  --gin-bg-item: rgba(var(--gin-color-primary-rgb), .05);
  --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .1);
  --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
  --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .3);
  --gin-shadow-primary-light: rgba(var(--gin-color-primary-rgb), .45);
  --gin-color-primary-rgb: 5, 80, 230;
  --gin-color-primary-light-rgb: 205, 220, 250;
  --gin-color-primary-hover: #0444c4;
  --gin-color-primary-active: #043cad;
  --gin-bg-app-rgb: 248, 250, 254;
  --gin-bg-header: #e1eafc;
  --gin-color-sticky-rgb: 235, 241, 253;

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

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

/* Logo visibility based on color scheme */
.logo-dark-mode {
  display: none;
}
.dark .logo-dark-mode {
  display: block;
}
.dark .logo-light-mode {
  display: none;
}

.dark {
  --background: oklch(0.2127 0.0127 248.4250);
  --foreground: oklch(0.9560 0.0029 84.5593);
  --card: oklch(0.2342 0.0149 248.4634);
  --card-foreground: oklch(0.9560 0.0029 84.5593);
  --popover: oklch(0.2342 0.0149 248.4634);
  --popover-foreground: oklch(0.9560 0.0029 84.5593);
  --primary: oklch(0.5820 0.1075 52.7029);
  --primary-foreground: oklch(0.9854 0.0010 84.5538);
  --secondary: oklch(0.3671 0.0139 248.2062);
  --secondary-foreground: oklch(0.9560 0.0029 84.5593);
  --muted: oklch(0.2961 0.0210 248.5405);
  --muted-foreground: oklch(0.7615 0.0139 248.0106);
  --accent: oklch(0.5433 0.0817 156.6999);
  --accent-foreground: oklch(0.9854 0.0010 84.5538);
  --destructive: oklch(0.5939 0.1862 24.8375);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.3170 0.0173 248.3715);
  --input: oklch(0.3170 0.0173 248.3715);
  --ring: oklch(0.5820 0.1075 52.7029);
  --chart-1: oklch(0.5820 0.1075 52.7029);
  --chart-2: oklch(0.5433 0.0817 156.6999);
  --chart-3: oklch(0.6780 0.0191 248.1098);
  --chart-4: oklch(0.6067 0.0854 74.2747);
  --chart-5: oklch(0.4127 0.0243 248.4143);
  --sidebar: oklch(0.1901 0.0131 248.5161);
  --sidebar-foreground: oklch(0.9222 0.0044 247.8716);
  --sidebar-primary: oklch(0.5820 0.1075 52.7029);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.2656 0.0180 248.5074);
  --sidebar-accent-foreground: oklch(0.9222 0.0044 247.8716);
  --sidebar-border: oklch(0.2552 0.0170 248.4942);
  --sidebar-ring: oklch(0.5820 0.1075 52.7029);
  --font-sans: Inter, -apple-system, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.125rem;
  --shadow-x: 0px;
  --shadow-y: 4px;
  --shadow-blur: 8px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.4;
  --shadow-color: rgba(0,0,0,0.5);
  --shadow-2xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.20);
  --shadow-xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.20);
  --shadow-sm: 0px 4px 8px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
  --shadow: 0px 4px 8px 0px hsl(0 0% 0% / 0.40), 0px: 1px 2px -1px hsl(0 0% 0% / 0.40);
  --shadow-md: 0px 4px 8px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
  --shadow-lg: 0px 4px 8px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
  --shadow-xl: 0px 4px 8px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
  --shadow-2xl: 0px 4px 8px 0px hsl(0 0% 0% / 1.00);

  --gin-color-primary: rgb(var(--gin-color-primary-rgb));
  --gin-color-primary-light: rgba(var(--gin-color-primary-rgb), .15);
  --gin-bg-app: rgb(var(--gin-bg-app-rgb));
  --gin-bg-layer-rgb: 255, 255, 255;
  --gin-bg-item: rgba(var(--gin-color-primary-rgb), .05);
  --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .1);
  --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
  --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .3);
  --gin-shadow-primary-light: rgba(var(--gin-color-primary-rgb), .45);
  --gin-color-primary-rgb: 5, 80, 230;
  --gin-color-primary-light-rgb: 205, 220, 250;
  --gin-color-primary-hover: #0444c4;
  --gin-color-primary-active: #043cad;
  --gin-bg-app-rgb: 248, 250, 254;
  --gin-bg-header: #e1eafc;
  --gin-color-sticky-rgb: 235, 241, 253;
}

@layer components {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    @apply border bg-transparent p-1.5 text-base outline-none;
  }
}