/* ==========================================================================
   Middleware Solutions — Design tokens (ported 1:1 from the Next.js
   project's globals.css / shadcn theme) + small custom utilities.
   ========================================================================== */


:root {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --brand: oklch(0.55 0.15 260);
  --brand-foreground: oklch(0.98 0 0);
  --brand-light: oklch(0.93 0.05 260);

  --background: oklch(0.99 0 0);
  --foreground: oklch(0.15 0.01 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.01 260);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0.01 260);
  --primary: oklch(0.55 0.15 260);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.96 0.02 260);
  --secondary1: oklch(98.081% 0.00917 258.497);
  --secondary-foreground: oklch(0.25 0.05 260);
  --muted: oklch(0.96 0.01 260);
  --muted-foreground: oklch(0.50 0.02 260);
  --accent: oklch(0.93 0.05 260);
  --accent-foreground: oklch(0.25 0.05 260);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.91 0.02 260);
  --input: oklch(0.91 0.02 260);
  --ring: oklch(0.55 0.15 260);
}

* {
  border-color: var(--border);
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
}

html {
  scroll-behavior: smooth;
}


body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Icons (lucide) default sizing, matches [&_svg]:size-4 default in shadcn button/badge */
svg {
  flex-shrink: 0;
}

/* ==========================================================================
   Buttons — replicate shadcn/ui `buttonVariants` (cva) exactly
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition: all 0.15s ease;
  outline: none;
  cursor: pointer;
  border: none;
}
.btn:disabled { pointer-events: none; opacity: 0.5; }
.btn svg { width: 1rem; height: 1rem; pointer-events: none; }
.btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }

.btn-default {
  height: 2.25rem; padding: 0.5rem 1rem;
  background-color: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.btn-default:hover { background-color: color-mix(in oklab, var(--primary) 90%, transparent); }

.btn-outline {
  height: 2.25rem; padding: 0.5rem 1rem;
  background-color: var(--background); color: var(--foreground);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.btn-outline:hover { background-color: var(--accent); color: var(--accent-foreground); }

.btn-secondary {
  height: 2.25rem; padding: 0.5rem 1rem;
  background-color: var(--secondary); color: var(--secondary-foreground);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.btn-secondary:hover { background-color: color-mix(in oklab, var(--secondary) 80%, transparent); }

.btn-ghost {
  height: 2.25rem; padding: 0.5rem 1rem;
  background-color: transparent; color: var(--foreground);
}
.btn-ghost:hover { background-color: var(--accent); color: var(--accent-foreground); }

.btn-link {
  height: auto; padding: 0;
  background-color: transparent; color: var(--primary);
  text-underline-offset: 4px;
}
.btn-link:hover { text-decoration: underline; }

.btn-lg { height: 2.5rem; padding: 0 1.5rem; font-size: 1rem; }
.btn-sm { height: 2rem; padding: 0 0.75rem; gap: 0.375rem; }
.btn-icon { height: 2.25rem; width: 2.25rem; padding: 0; }
.btn-full { width: 100%; }

/* On-primary CTA variant used in the CTA / hero band (secondary-on-primary) */
.btn-on-primary {
  background-color: var(--primary-foreground); color: var(--primary);
}
.btn-on-primary:hover { background-color: color-mix(in oklab, var(--primary-foreground) 90%, transparent); }

.btn-outline-on-primary {
  background-color: transparent; color: var(--primary-foreground);
  border: 1px solid color-mix(in oklab, var(--primary-foreground) 30%, transparent);
}
.btn-outline-on-primary:hover { background-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent); }

/* ==========================================================================
   Badge — replicate shadcn/ui `badgeVariants`
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  width: fit-content;
  white-space: nowrap;
}
.badge svg { width: 0.75rem; height: 0.75rem; }
.badge-secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
.badge-secondary1 { background-color: var(--secondary1); color: var(--secondary-foreground); }

/* ==========================================================================
   Card
   ========================================================================== */
.card {
  background-color: var(--card);
  color: var(--card-foreground);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  padding: 1.5rem 0;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.card-header { padding: 0 1.5rem; display: flex; flex-direction: column; gap: 0.375rem; }
.card-title { font-weight: 600; line-height: 1; }
.card-description { color: var(--muted-foreground); font-size: 0.875rem; }
.card-content { padding: 0 1.5rem; }

/* ==========================================================================
   Utility helpers not covered by Tailwind's default config
   ========================================================================== */
.container-x {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.text-primary-token { color: var(--primary); }
.bg-primary-token { background-color: var(--primary); }

/* Mobile drawer */
.mobile-drawer {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.mobile-drawer.open {
  transform: translateX(0);
}
.mobile-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Header transition */
#site-header {
  transition: all 0.3s ease;
}

/* Group-hover helpers used across cards (Tailwind's `group` handles most of
   this, these are the few bits that need real CSS because we removed the
   framer-driven radix bits) */
.group:hover .group-hover-bg-primary { background-color: var(--primary); color: var(--primary-foreground); }
.group:hover .group-hover-translate { transform: translateX(0.25rem); }
.group:hover .group-hover-opacity { opacity: 1; }

/* Custom select (native select styled to match shadcn trigger) */
.select-trigger {
  display: flex;
  height: 2.25rem;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background-color: transparent;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--foreground);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717184' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.select-trigger:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  outline: none;
}

/* Form inputs matching shadcn Input */
.input, .textarea {
  display: flex;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background-color: transparent;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--foreground);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.input { height: 2.25rem; }
.input::placeholder, .textarea::placeholder { color: var(--muted-foreground); }
.input:focus-visible, .textarea:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  outline: none;
}

.label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Separator */
.separator {
  background-color: var(--border);
  height: 1px;
  width: 100%;
}