@carrierllc/mcp 0.13.41 → 0.13.47

package/templates/storefront/src/app/sign-up/[[...sign-up]]/StorefrontSignUpClient.tsx

@@ -15,14 +15,18 @@ import { useSignUp } from "@clerk/nextjs";
 import { useClerk } from "@clerk/nextjs";
 import { useSearchParams, useRouter } from "next/navigation";
 import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";
+import { buyerCopyForClerkError } from "@/lib/buyer-auth-copy";
 import { sanitizeAuthRedirect } from "@/lib/sanitize-auth-redirect";
+import { fieldClass, primaryButtonClass, textLinkClass } from "@/lib/tap-target";
 
 type FlowStep = "credentials" | "verify" | "complete";
 
-export function StorefrontSignUpClient() {
+const SIGN_UP_ERROR_ID = "su-error";
+
+export function StorefrontSignUpClient({ origin }: { origin: string }) {
   const searchParams = useSearchParams();
   const rawRedirect = searchParams.get("redirect_url") ?? undefined;
-  const redirectTarget = sanitizeAuthRedirect(rawRedirect, "/dashboard");
+  const redirectTarget = sanitizeAuthRedirect(rawRedirect, "/dashboard", origin || undefined);
 
   const { signUp, isLoaded } = useSignUp();
   const { setActive } = useClerk();
@@ -34,15 +38,8 @@ export function StorefrontSignUpClient() {
   const [code, setCode] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
-
-  function clerkErrMsg(err: unknown): string {
-    const e = err as { errors?: Array<{ longMessage?: string; message?: string }> };
-    return (
-      e?.errors?.[0]?.longMessage ??
-      e?.errors?.[0]?.message ??
-      "Something went wrong. Please try again."
-    );
-  }
+  const describedBy = error ? SIGN_UP_ERROR_ID : undefined;
+  const invalid = error ? true : undefined;
 
   async function handleCredentials(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -54,7 +51,7 @@ export function StorefrontSignUpClient() {
       await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
       setStep("verify");
     } catch (err) {
-      setError(clerkErrMsg(err));
+      setError(buyerCopyForClerkError(err, "Something went wrong. Please try again."));
     } finally {
       setLoading(false);
     }
@@ -76,7 +73,7 @@ export function StorefrontSignUpClient() {
         setError(completion.message);
       }
     } catch (err) {
-      setError(clerkErrMsg(err));
+      setError(buyerCopyForClerkError(err, "Something went wrong. Please try again."));
     } finally {
       setLoading(false);
     }
@@ -87,10 +84,10 @@ export function StorefrontSignUpClient() {
       {step === "credentials" && (
         <>
           <h1 className="text-xl font-bold text-sand-900 dark:text-sand-50 mb-1">Create account</h1>
-          <p className="text-xs text-sand-500 mb-6">Email and password — no phone required.</p>
+          <p className="mb-6 text-base text-sand-500">Email and password — no phone required.</p>
           <form onSubmit={handleCredentials} className="space-y-4">
             <div>
-              <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="sf-email">
+              <label className="mb-1 block text-base font-medium text-sand-600 dark:text-sand-400" htmlFor="sf-email">
                 Email address
               </label>
               <input
@@ -100,12 +97,14 @@ export function StorefrontSignUpClient() {
                 required
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
+                className={fieldClass}
                 placeholder="you@example.com"
+                aria-invalid={invalid}
+                aria-describedby={describedBy}
               />
             </div>
             <div>
-              <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="sf-password">
+              <label className="mb-1 block text-base font-medium text-sand-600 dark:text-sand-400" htmlFor="sf-password">
                 Password
               </label>
               <input
@@ -116,26 +115,28 @@ export function StorefrontSignUpClient() {
                 minLength={8}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
+                className={fieldClass}
                 placeholder="Min. 8 characters"
+                aria-invalid={invalid}
+                aria-describedby={describedBy}
               />
             </div>
             {error && (
-              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+              <p id={SIGN_UP_ERROR_ID} role="alert" className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-base text-red-700 dark:text-red-300">
                 {error}
               </p>
             )}
             <button
               type="submit"
               disabled={loading || !isLoaded}
-              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+              className={primaryButtonClass}
             >
               {loading ? "Creating account…" : "Continue"}
             </button>
           </form>
-          <p className="mt-4 text-center text-xs text-sand-400">
+          <p className="mt-4 text-center text-base text-sand-500">
             Already have an account?{" "}
-            <Link href="/sign-in" className="text-[var(--brand-accent)] hover:underline">
+            <Link href={`/sign-in?redirect_url=${encodeURIComponent(redirectTarget)}`} className={textLinkClass}>
               Sign in
             </Link>
           </p>
@@ -145,12 +146,12 @@ export function StorefrontSignUpClient() {
       {step === "verify" && (
         <>
           <h1 className="text-xl font-bold text-sand-900 dark:text-sand-50 mb-1">Check your email</h1>
-          <p className="text-xs text-sand-500 mb-6">
+          <p className="mb-6 text-base text-sand-500">
             We sent a 6-digit code to <span className="text-sand-600 dark:text-sand-300">{email}</span>.
           </p>
           <form onSubmit={handleVerify} className="space-y-4">
             <div>
-              <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="sf-code">
+              <label className="mb-1 block text-base font-medium text-sand-600 dark:text-sand-400" htmlFor="sf-code">
                 Verification code
               </label>
               <input
@@ -162,19 +163,21 @@ export function StorefrontSignUpClient() {
                 maxLength={6}
                 value={code}
                 onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
-                className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-center text-lg tracking-[0.4em] text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
+                className={`${fieldClass} text-center tracking-[0.4em]`}
                 placeholder="000000"
+                aria-invalid={invalid}
+                aria-describedby={describedBy}
               />
             </div>
             {error && (
-              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+              <p id={SIGN_UP_ERROR_ID} role="alert" className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-base text-red-700 dark:text-red-300">
                 {error}
               </p>
             )}
             <button
               type="submit"
               disabled={loading || code.length < 6}
-              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+              className={primaryButtonClass}
             >
               {loading ? "Verifying…" : "Verify email"}
             </button>
@@ -182,7 +185,7 @@ export function StorefrontSignUpClient() {
           <button
             type="button"
             onClick={() => { setStep("credentials"); setError(null); setCode(""); }}
-            className="mt-4 w-full text-center text-xs text-sand-400 hover:text-sand-500"
+            className={`${textLinkClass} mt-4 w-full justify-center`}
           >
             ← Back
           </button>

package/templates/storefront/src/app/sign-up/[[...sign-up]]/page.tsx

@@ -6,11 +6,14 @@ export const dynamic = "force-dynamic";
  * on /activate/[orderId] after purchase.
  */
 import { Suspense } from "react";
+import { headers } from "next/headers";
+import { requestOrigin } from "@/lib/request-origin";
 import { StorefrontSignUpClient } from "./StorefrontSignUpClient";
 
 export const metadata = { title: "Sign up" };
 
-export default function SignUpPage() {
+export default async function SignUpPage() {
+  const origin = requestOrigin(await headers());
   return (
     <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
       <Suspense
@@ -21,7 +24,7 @@ export default function SignUpPage() {
           </div>
         }
       >
-        <StorefrontSignUpClient />
+        <StorefrontSignUpClient origin={origin} />
       </Suspense>
     </div>
   );

package/templates/storefront/src/brand.config.ts

@@ -4,6 +4,11 @@
  */
 const brand = {
   name: process.env.NEXT_PUBLIC_BRAND_NAME ?? "Carrier",
+  /**
+   * Buyer password reset. Unset shows the Forgot password path.
+   * Set NEXT_PUBLIC_PASSWORD_RESET_ENABLED=false to hide it on this storefront.
+   */
+  passwordResetEnabled: process.env.NEXT_PUBLIC_PASSWORD_RESET_ENABLED !== "false",
   legalName: "Lifecycle Innovations Limited",
   tagline: "Programmable connectivity, on demand.",
   /** One sentence. Used for <meta name="description"> and social cards. */
@@ -32,11 +37,22 @@ const brand = {
   colors: {
     bg: "#FAFAF7",
     accent: "#FF6B35",
+    /** Text on a filled #FF6B35 button. */
+    onAccent: "#111111",
+    /** Accent text, links, and focus. Passes on the page background. */
+    accentText: "#C2410C",
+    /** Dark-mode accent text. Must stay ahead of the light value. */
+    accentTextDark: "#FF8A5C",
     accentDark: "#D9461C",
     accentLight: "#FFB088",
     text: "#1A1812",
     textSecondary: "#5C5644",
   },
+  /**
+   * Lightning tier. Off unless this tenant sets NEXT_PUBLIC_LIGHTNING_TIER=1
+   * and the plans carry real Stripe Price ids.
+   */
+  lightningTier: process.env.NEXT_PUBLIC_LIGHTNING_TIER === "1",
   social: {
     x: "@carrier_llc",
     instagram: "@carrier.llc",

package/templates/storefront/src/components/Providers.tsx

@@ -2,14 +2,33 @@
 
 import { ClerkProvider } from "@clerk/nextjs";
 import type { ComponentProps } from "react";
+import brand from "@/brand.config";
 import { ThemeProvider } from "@/components/theme/theme-provider";
 import { clerkAppearance } from "@/components/theme/clerk-appearance";
+import { clerkPublishableKey } from "@/lib/clerk-instance";
 
 type ClerkAppearance = ComponentProps<typeof ClerkProvider>["appearance"];
 
 export function Providers({ children }: { children: React.ReactNode }) {
+  const publishableKey = clerkPublishableKey();
   return (
-    <ClerkProvider appearance={clerkAppearance as ClerkAppearance}>
+    <ClerkProvider
+      {...(publishableKey ? { publishableKey } : {})}
+      appearance={clerkAppearance as ClerkAppearance}
+      localization={{
+        signIn: {
+          start: {
+            title: `Sign in to ${brand.name}`,
+            subtitle: "Email and password.",
+          },
+        },
+      }}
+      // Buyers never pick an organization. Clerk's choose-organization task
+      // lands on the dashboard, which accepts that pending session.
+      signInUrl="/sign-in"
+      signUpUrl="/sign-up"
+      taskUrls={{ "choose-organization": "/dashboard" }}
+    >
       <ThemeProvider>{children}</ThemeProvider>
     </ClerkProvider>
   );

package/templates/storefront/src/components/faq/FaqSection.tsx

@@ -33,11 +33,11 @@ function FaqItem({ q, a }: { q: string; a: string }) {
   return (
     <div className="border-b border-sand-200 dark:border-sand-800">
       <button
-        className="flex w-full items-center justify-between py-4 text-left text-sand-900 transition-colors hover:text-[var(--brand-accent)] dark:text-sand-50"
+        className="flex w-full items-center justify-between py-4 text-left text-sand-900 transition-colors hover:text-[var(--brand-accent-text)] dark:text-sand-50"
         onClick={() => setOpen((o) => !o)}
       >
         <span className="font-medium">{q}</span>
-        <span className={cn("ml-4 shrink-0 text-[var(--brand-accent)] transition-transform", open && "rotate-45")}>
+        <span className={cn("ml-4 shrink-0 text-[var(--brand-accent-text)] transition-transform", open && "rotate-45")}>
           +
         </span>
       </button>

package/templates/storefront/src/components/footer/StorefrontFooter.tsx

@@ -29,19 +29,19 @@ export function StorefrontFooter() {
                 href={buildSupportLink("whatsapp", { message: `Hi ${BRAND.name}!` })}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 rounded-full bg-leaf-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-leaf-600"
+                className="inline-flex min-h-11 items-center gap-2 rounded-full bg-leaf-500 px-4 text-base font-semibold text-[#111111] transition-colors hover:bg-leaf-600"
               >
                 WhatsApp
               </Link>
               <Link
                 href={buildSupportLink("sms")}
-                className="inline-flex items-center gap-2 rounded-full border border-sand-700 bg-sand-900/60 px-4 py-2 text-sm font-semibold text-sand-200 hover:border-[var(--brand-accent)]/40"
+                className="inline-flex min-h-11 items-center gap-2 rounded-full border border-sand-700 bg-sand-900/60 px-4 text-base font-semibold text-sand-200 hover:border-[var(--brand-accent)]/40"
               >
                 SMS
               </Link>
               <Link
                 href={`mailto:${BRAND.support.email}`}
-                className="inline-flex items-center gap-2 rounded-full border border-sand-700 bg-sand-900/60 px-4 py-2 text-sm font-semibold text-sand-200 hover:border-[var(--brand-accent)]/40"
+                className="inline-flex min-h-11 items-center gap-2 rounded-full border border-sand-700 bg-sand-900/60 px-4 text-base font-semibold text-sand-200 hover:border-[var(--brand-accent)]/40"
               >
                 Email
               </Link>
@@ -49,13 +49,13 @@ export function StorefrontFooter() {
           </div>
           {Object.entries(FOOTER_LINKS).map(([section, links]) => (
             <div key={section}>
-              <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-sand-500">
+              <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-[#9C9480]">
                 {section}
               </p>
               <ul className="space-y-2">
                 {links.map((link) => (
                   <li key={link.href}>
-                    <Link href={link.href} className="text-sm text-sand-400 transition-colors hover:text-sand-50">
+                    <Link href={link.href} className="inline-flex min-h-11 items-center text-base text-sand-400 transition-colors hover:text-sand-50">
                       {link.label}
                     </Link>
                   </li>
@@ -65,10 +65,10 @@ export function StorefrontFooter() {
           ))}
         </div>
         <div className="flex flex-col items-start justify-between gap-2 border-t border-sand-800 pt-6 md:flex-row md:items-center">
-          <p className="text-xs text-sand-600">
+          <p className="text-xs text-[#A39A86]">
             © {new Date().getFullYear()} {BRAND.legalName}. All rights reserved.
           </p>
-          <p className="text-xs text-sand-600">{BRAND.support.hoursLocal}</p>
+          <p className="text-xs text-[#A39A86]">{BRAND.support.hoursLocal}</p>
         </div>
       </div>
     </footer>

package/templates/storefront/src/components/landing/FinalCTA.tsx

@@ -4,21 +4,16 @@ import brand from "@/brand.config";
 export function FinalCTA() {
   return (
     <section className="px-4 py-20">
-      <div
-        className="mx-auto max-w-6xl overflow-hidden rounded-[2rem] px-8 py-14 text-center md:px-16"
-        style={{
-          background: `linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 88%, #1A1812), var(--brand-accent-dark))`,
-        }}
-      >
-        <h2 className="text-3xl font-semibold tracking-tight text-white md:text-4xl">
+      <div className="mx-auto max-w-6xl overflow-hidden rounded-[2rem] bg-[var(--brand-accent)] px-8 py-14 text-center text-[var(--brand-on-accent)] md:px-16">
+        <h2 className="text-3xl font-semibold tracking-tight text-[var(--brand-on-accent)] md:text-4xl">
           Travel light. Land connected.
         </h2>
-        <p className="mx-auto mt-3 max-w-lg text-sm text-white/85">
+        <p className="mx-auto mt-3 max-w-lg text-sm text-[var(--brand-on-accent)]">
           {brand.tagline}
         </p>
         <Link
           href="/shop"
-          className="mt-8 inline-flex rounded-full bg-white px-7 py-3 text-sm font-semibold text-sand-900 hover:bg-sand-50"
+          className="mt-8 inline-flex min-h-11 items-center rounded-full bg-sand-50 px-7 text-base font-semibold text-[#111111] hover:bg-white"
         >
           Browse plans
         </Link>

package/templates/storefront/src/components/landing/HeroSection.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import brand from "@/brand.config";
+import { filledAccentClass } from "@/lib/tap-target";
 
 const STATS = [
   { value: "200+", label: "countries" },
@@ -25,7 +26,7 @@ export function HeroSection() {
           </p>
           <h1 className="font-display text-4xl font-semibold tracking-tight text-sand-900 sm:text-5xl md:text-6xl dark:text-sand-50">
             Stay connected,
-            <span className="block" style={{ color: "var(--brand-accent)" }}>
+            <span className="block" style={{ color: "var(--brand-accent-text)" }}>
               everywhere.
             </span>
           </h1>
@@ -33,16 +34,12 @@ export function HeroSection() {
             {brand.tagline} Instant QR activation. No physical cards. No roaming surprises.
           </p>
           <div className="mt-8 flex flex-wrap items-center gap-3">
-            <Link
-              href="/shop"
-              className="rounded-full px-7 py-3 text-sm font-semibold text-white transition-opacity hover:opacity-90"
-              style={{ background: "var(--brand-accent)" }}
-            >
+            <Link href="/shop" className={filledAccentClass}>
               Browse plans
             </Link>
             <Link
               href="/#how-it-works"
-              className="rounded-full border border-sand-300 bg-white px-7 py-3 text-sm font-semibold text-sand-800 transition-colors hover:border-sand-400 dark:border-sand-700 dark:bg-sand-900 dark:text-sand-100"
+              className="inline-flex min-h-11 items-center rounded-full border border-sand-300 bg-white px-7 text-base font-semibold text-sand-800 transition-colors hover:border-sand-400 dark:border-sand-700 dark:bg-sand-900 dark:text-sand-100"
             >
               How it works
             </Link>

package/templates/storefront/src/components/landing/HowItWorks.tsx

@@ -30,7 +30,7 @@ export function HowItWorks() {
               key={step.n}
               className="rounded-2xl border border-sand-200 bg-white p-6 dark:border-sand-800 dark:bg-sand-950"
             >
-              <p className="text-sm font-semibold" style={{ color: "var(--brand-accent)" }}>
+              <p className="text-sm font-semibold" style={{ color: "var(--brand-accent-text)" }}>
                 {step.n}
               </p>
               <h3 className="mt-3 text-lg font-semibold text-sand-900 dark:text-sand-50">{step.title}</h3>

package/templates/storefront/src/components/landing/PlanCard.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { motion } from "framer-motion";
 import { cn } from "@/vendor/ui/cn";
+import { formatPrice } from "@/vendor/geo";
 import type { SkuTemplate } from "@/vendor/carrier/types";
 
 interface PlanCardProps {
@@ -19,7 +20,8 @@ interface PlanCardProps {
 }
 
 export function PlanCard({ plan, href, onSelect, featured, selected }: PlanCardProps) {
-  const destination = href ?? (onSelect ? undefined : `/checkout/${plan.id}`);
+  const unavailable = plan.price_unavailable === true;
+  const destination = unavailable ? undefined : href ?? (onSelect ? undefined : `/checkout/${plan.id}`);
 
   function handleSelect() {
     onSelect?.(plan);
@@ -29,7 +31,7 @@ export function PlanCard({ plan, href, onSelect, featured, selected }: PlanCardP
     <>
       {featured && (
         <span
-          className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full px-3 py-0.5 text-xs font-semibold text-white"
+          className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full px-3 py-0.5 text-xs font-semibold text-[var(--brand-on-accent)]"
           style={{ background: "var(--brand-accent)" }}
         >
           Most popular
@@ -37,39 +39,47 @@ export function PlanCard({ plan, href, onSelect, featured, selected }: PlanCardP
       )}
       <div>
         <p className="font-semibold text-sand-900 dark:text-sand-50">{plan.name}</p>
-        <p className="mt-0.5 text-sm text-sand-500">{plan.description}</p>
+        <p className="mt-0.5 text-sm text-sand-700 dark:text-sand-200">{plan.description}</p>
       </div>
       <div className="flex items-baseline gap-1">
-        <span className="text-3xl font-bold text-sand-900 dark:text-sand-50">
-          €{(plan.price_cents / 100).toFixed(2)}
-        </span>
-        <span className="text-sm text-sand-500">one-time</span>
+        {plan.price_unavailable ? (
+          <span className="text-3xl font-bold text-sand-900 dark:text-sand-50">Unavailable</span>
+        ) : (
+          <span
+            className="text-3xl font-bold text-sand-900 dark:text-sand-50"
+            data-unit-amount={plan.price_cents}
+            data-currency={plan.currency}
+          >
+            {formatPrice(plan.price_cents, plan.currency)}
+          </span>
+        )}
+        <span className="text-sm text-sand-700 dark:text-sand-200">one-time</span>
       </div>
       <ul className="space-y-1.5 text-sm text-sand-700 dark:text-sand-300">
         {plan.features.map((f) => (
           <li key={f} className="flex items-center gap-2">
-            <span style={{ color: "var(--brand-accent)" }}>✓</span>
+            <span style={{ color: "var(--brand-accent-text)" }}>✓</span>
             {f}
           </li>
         ))}
       </ul>
       <span
         className={cn(
-          "mt-auto block rounded-full py-2 text-center text-sm font-semibold transition-colors",
+          "mt-auto inline-flex min-h-11 items-center justify-center rounded-full px-6 py-2 text-center text-base font-semibold transition-colors",
           featured || selected
-            ? "text-white"
+            ? "text-[var(--brand-on-accent)]"
             : "border border-sand-300 text-sand-900 hover:bg-sand-100 dark:border-sand-700 dark:text-sand-50 dark:hover:bg-sand-800",
         )}
-        style={featured || selected ? { background: "var(--brand-accent)" } : undefined}
+        style={featured || selected ? { background: "var(--brand-accent)", color: "var(--brand-on-accent)" } : undefined}
       >
-        {selected ? "Selected" : "Select plan"}
+        {unavailable ? "Unavailable" : selected ? "Selected" : "Select plan"}
       </span>
     </>
   );
 
   const cardClass = cn(
     "relative flex flex-col gap-4 rounded-2xl border p-6 pt-8 transition-colors",
-    selected && "ring-2 ring-[var(--brand-accent)] ring-offset-2 ring-offset-sand-50 dark:ring-offset-sand-950",
+    selected && "ring-2 ring-[var(--brand-focus)] ring-offset-2 ring-offset-sand-50 dark:ring-offset-sand-950",
     featured
       ? "border-[var(--brand-accent)] bg-[color-mix(in_srgb,var(--brand-accent)_6%,white)] dark:bg-[color-mix(in_srgb,var(--brand-accent)_12%,#0F0E0A)]"
       : "border-sand-200 bg-white hover:border-sand-300 dark:border-sand-800 dark:bg-sand-900 dark:hover:border-sand-700",