@carrierllc/mcp 0.2.18 → 0.2.20

package/templates/storefront/package.json

@@ -17,7 +17,7 @@
     "clsx": "^2.1.1",
     "framer-motion": "^11.15.0",
     "geist": "^1.3.1",
-    "next": "^15.3.0",
+    "next": "^16.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^2.6.0"
@@ -29,8 +29,8 @@
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "eslint": "^9.0.0",
-    "eslint-config-next": "^15.3.0",
+    "eslint": "^10.8.1",
+    "eslint-config-next": "^16.3.0",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.0",
     "wrangler": "^4.94.0"

package/templates/storefront/public/brand/logo.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="Carrier logo">
+  <defs>
+    <linearGradient id="lgcf797g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#ff9c75"/>
+      <stop offset="55%" stop-color="#FF6B35"/>
+      <stop offset="100%" stop-color="#984625"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="96" fill="#FAFAF7"/>
+  <path d="M256 64 C320 64 400 96 424 176 C448 256 424 352 344 416 C280 464 232 464 168 416 C88 352 64 256 88 176 C112 96 192 64 256 64 Z" fill="url(#lgcf797g)"/>
+  <text x="256" y="300" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif" font-size="220" font-weight="700" fill="#FFF8EB">C</text>
+</svg>

package/templates/storefront/src/app/activate/[orderId]/ActivateClient.tsx

@@ -51,34 +51,34 @@ export function ActivateClient({ orderId }: Props) {
         <div className="inline-flex items-center justify-center size-14 rounded-full bg-emerald-500/10 border border-emerald-500/30 mb-4">
           <span className="text-2xl">✓</span>
         </div>
-        <h1 className="text-2xl font-bold text-white">Your eSIM is ready</h1>
-        <p className="mt-2 text-sm text-white/50">Order: {orderId}</p>
+        <h1 className="text-2xl font-bold text-sand-900 dark:text-sand-50">Your eSIM is ready</h1>
+        <p className="mt-2 text-sm text-sand-500">Order: {orderId}</p>
       </div>
 
       {/* QR Code placeholder */}
-      <div className="rounded-2xl border border-white/10 bg-white/5 p-8 text-center mb-8">
-        <p className="text-white/60 text-sm mb-2">
+      <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 text-center mb-8">
+        <p className="text-sand-600 dark:text-sand-400 text-sm mb-2">
           Your QR code will appear here once your order is confirmed.
         </p>
-        <p className="text-white/30 text-xs">
+        <p className="text-sand-400 text-xs">
           This usually takes less than a minute. Refresh if needed.
         </p>
       </div>
 
       {/* Optional phone / WhatsApp collection */}
-      <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+      <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-6">
         <div className="flex items-start gap-3 mb-4">
           <div className="shrink-0 mt-0.5">
-            <span className="inline-flex items-center justify-center size-5 rounded-full bg-white/10 text-[10px] text-white/50">
+            <span className="inline-flex items-center justify-center size-5 rounded-full bg-white/10 text-[10px] text-sand-500">
               ?
             </span>
           </div>
           <div>
-            <p className="text-sm font-medium text-white">
+            <p className="text-sm font-medium text-sand-900 dark:text-sand-50">
               Get eSIM updates via WhatsApp{" "}
-              <span className="text-white/30 font-normal">(optional)</span>
+              <span className="text-sand-400 font-normal">(optional)</span>
             </p>
-            <p className="text-xs text-white/40 mt-0.5">
+            <p className="text-xs text-sand-500 mt-0.5">
               We&apos;ll send your QR code and activation status. You can skip this.
             </p>
           </div>
@@ -97,7 +97,7 @@ export function ActivateClient({ orderId }: Props) {
                 value={phone}
                 onChange={(e) => setPhone(e.target.value)}
                 placeholder="+1 555 000 0000"
-                className="flex-1 rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                className="flex-1 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"
               />
               <button
                 type="submit"
@@ -113,7 +113,7 @@ export function ActivateClient({ orderId }: Props) {
             <button
               type="button"
               onClick={() => setSubmitted(true)}
-              className="w-full text-center text-xs text-white/30 hover:text-white/50 py-1"
+              className="w-full text-center text-xs text-sand-400 hover:text-sand-500 py-1"
             >
               Skip for now
             </button>

package/templates/storefront/src/app/checkout/[templateId]/CheckoutClient.tsx

@@ -86,11 +86,11 @@ export function CheckoutClient({ plan, session }: Props) {
   if (checkoutError) {
     return (
       <div className="mx-auto max-w-lg px-4 py-32 text-center">
-        <p className="text-white/80">{checkoutError}</p>
-        <p className="text-sm text-white/30 mt-2">{plan.name}</p>
+        <p className="text-sand-700 dark:text-sand-200">{checkoutError}</p>
+        <p className="text-sm text-sand-400 mt-2">{plan.name}</p>
         <a
           href="/shop"
-          className="mt-6 inline-block rounded-full border border-white/20 px-6 py-2 text-sm text-white hover:bg-white/10 transition-colors"
+          className="mt-6 inline-block rounded-full border border-sand-300 dark:border-sand-700 px-6 py-2 text-sm text-sand-900 dark:text-sand-50 hover:bg-white/10 transition-colors"
         >
           ← Back to shop
         </a>
@@ -101,10 +101,10 @@ export function CheckoutClient({ plan, session }: Props) {
   return (
     <div className="mx-auto max-w-lg px-4 py-32 text-center">
       <div className="h-8 w-8 rounded-full border-2 border-[var(--brand-accent)] border-t-transparent animate-spin mx-auto mb-4" />
-      <p className="text-white/60">
+      <p className="text-sand-600 dark:text-sand-400">
         {loading ? "Preparing your checkout…" : "Redirecting to payment…"}
       </p>
-      <p className="text-sm text-white/30 mt-2">{plan.name}</p>
+      <p className="text-sm text-sand-400 mt-2">{plan.name}</p>
     </div>
   );
 }

package/templates/storefront/src/app/checkout/success/CheckoutSuccessClient.tsx

@@ -11,7 +11,7 @@
  * The orderId is verified server-side before this component renders.
  */
 import { useState, FormEvent, useEffect, useCallback } from "react";
-import { useSignUp, useSignIn } from "@clerk/nextjs/legacy";
+import { useSignUp, useSignIn } from "@clerk/nextjs";
 import { useClerk, useAuth } from "@clerk/nextjs";
 import { useRouter } from "next/navigation";
 import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";
@@ -166,7 +166,7 @@ export function CheckoutSuccessClient({
       <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
         <div className="text-center space-y-3">
           <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
-          <p className="text-sm text-white/60">
+          <p className="text-sm text-sand-600 dark:text-sand-400">
             {step === "redirecting" ? "Activating your eSIM…" : "Loading…"}
           </p>
         </div>
@@ -181,8 +181,8 @@ export function CheckoutSuccessClient({
           <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 px-6 py-4">
             <p className="text-lg font-semibold text-emerald-300">✓ Payment successful!</p>
           </div>
-          <div className="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur space-y-4">
-            <p className="text-sm text-white/80">We could not link this purchase to your account.</p>
+          <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 backdrop-blur space-y-4">
+            <p className="text-sm text-sand-700 dark:text-sand-200">We could not link this purchase to your account.</p>
             {error && (
               <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
                 {error}
@@ -213,17 +213,17 @@ export function CheckoutSuccessClient({
         </div>
 
         {/* Auth card */}
-        <div className="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur">
+        <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 backdrop-blur">
           {/* Mode toggle */}
           {step === "credentials" && (
-            <div className="flex rounded-lg border border-white/10 p-1 mb-6">
+            <div className="flex rounded-lg border border-sand-200 dark:border-sand-800 p-1 mb-6">
               <button
                 type="button"
                 onClick={() => { setMode("signup"); setError(null); }}
                 className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
                   mode === "signup"
-                    ? "bg-[var(--brand-accent)] text-white"
-                    : "text-white/40 hover:text-white/70"
+                    ? "bg-[var(--brand-accent)] text-sand-900 dark:text-sand-50"
+                    : "text-sand-500 hover:text-sand-600 dark:text-sand-300"
                 }`}
               >
                 Create account
@@ -233,8 +233,8 @@ export function CheckoutSuccessClient({
                 onClick={() => { setMode("signin"); setError(null); }}
                 className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
                   mode === "signin"
-                    ? "bg-[var(--brand-accent)] text-white"
-                    : "text-white/40 hover:text-white/70"
+                    ? "bg-[var(--brand-accent)] text-sand-900 dark:text-sand-50"
+                    : "text-sand-500 hover:text-sand-600 dark:text-sand-300"
                 }`}
               >
                 Sign in
@@ -245,15 +245,15 @@ export function CheckoutSuccessClient({
           {/* Sign-up: credentials step */}
           {step === "credentials" && mode === "signup" && (
             <>
-              <h2 className="text-base font-semibold text-white mb-1">Create your account</h2>
-              <p className="text-xs text-white/40 mb-5">
+              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Create your account</h2>
+              <p className="text-xs text-sand-500 mb-5">
                 {emailLocked
                   ? "Use the email from your checkout to create your account."
                   : "Email and password — no phone required."}
               </p>
               <form onSubmit={handleSignUp} className="space-y-4">
                 <div>
-                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="su-email">
+                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="su-email">
                     Email address
                   </label>
                   <input
@@ -264,12 +264,12 @@ export function CheckoutSuccessClient({
                     readOnly={emailLocked}
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    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"
                     placeholder="you@example.com"
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="su-password">
+                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="su-password">
                     Password
                   </label>
                   <input
@@ -280,7 +280,7 @@ export function CheckoutSuccessClient({
                     minLength={8}
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    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"
                     placeholder="Min. 8 characters"
                   />
                 </div>
@@ -303,15 +303,15 @@ export function CheckoutSuccessClient({
           {/* Sign-in: credentials step */}
           {step === "credentials" && mode === "signin" && (
             <>
-              <h2 className="text-base font-semibold text-white mb-1">Sign in</h2>
-              <p className="text-xs text-white/40 mb-5">
+              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Sign in</h2>
+              <p className="text-xs text-sand-500 mb-5">
                 {emailLocked
                   ? "Sign in with the email from your checkout to activate your eSIM."
                   : "Sign in to activate your eSIM."}
               </p>
               <form onSubmit={handleSignIn} className="space-y-4">
                 <div>
-                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="si-email">
+                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="si-email">
                     Email address
                   </label>
                   <input
@@ -322,12 +322,12 @@ export function CheckoutSuccessClient({
                     readOnly={emailLocked}
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    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"
                     placeholder="you@example.com"
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="si-password">
+                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="si-password">
                     Password
                   </label>
                   <input
@@ -337,7 +337,7 @@ export function CheckoutSuccessClient({
                     required
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    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"
                     placeholder="Your password"
                   />
                 </div>
@@ -360,13 +360,13 @@ export function CheckoutSuccessClient({
           {/* Email verification step */}
           {step === "verify" && (
             <>
-              <h2 className="text-base font-semibold text-white mb-1">Check your email</h2>
-              <p className="text-xs text-white/40 mb-5">
-                We sent a 6-digit code to <span className="text-white/70">{email}</span>.
+              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Check your email</h2>
+              <p className="text-xs text-sand-500 mb-5">
+                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-white/60 mb-1" htmlFor="verify-code">
+                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="verify-code">
                     Verification code
                   </label>
                   <input
@@ -378,7 +378,7 @@ export function CheckoutSuccessClient({
                     maxLength={6}
                     value={code}
                     onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
-                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-center text-lg tracking-[0.4em] text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    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"
                     placeholder="000000"
                   />
                 </div>
@@ -398,7 +398,7 @@ export function CheckoutSuccessClient({
               <button
                 type="button"
                 onClick={() => { setStep("credentials"); setError(null); setCode(""); }}
-                className="mt-4 w-full text-center text-xs text-white/30 hover:text-white/50"
+                className="mt-4 w-full text-center text-xs text-sand-400 hover:text-sand-500"
               >
                 ← Back
               </button>
@@ -406,7 +406,7 @@ export function CheckoutSuccessClient({
           )}
         </div>
 
-        <p className="text-center text-xs text-white/30">
+        <p className="text-center text-xs text-sand-400">
           Your payment is confirmed. Account setup is required to receive your eSIM QR code.
         </p>
       </div>

package/templates/storefront/src/app/checkout/success/page.tsx

@@ -43,7 +43,7 @@ export default async function CheckoutSuccessPage({ searchParams }: Props) {
         <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
           <div className="text-center space-y-3">
             <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
-            <p className="text-sm text-white/60">Loading…</p>
+            <p className="text-sm text-sand-600 dark:text-sand-400">Loading…</p>
           </div>
         </div>
       }

package/templates/storefront/src/app/contact/page.tsx

@@ -1,34 +1,42 @@
+import Link from "next/link";
 import brand from "@/brand.config";
+import { buildSupportLink } from "@/vendor/ui/brand";
 
 export const metadata = { title: "Contact" };
 
 export default function ContactPage() {
   return (
-    <div className="mx-auto max-w-2xl px-4 py-24">
-      <h1 className="text-3xl font-bold text-white mb-8">Get in touch</h1>
-      <div className="space-y-4 text-white/70">
-        <p>
-          Email:{" "}
-          <a
-            href={`mailto:${brand.supportEmail}`}
-            className="text-[var(--brand-accent)] hover:underline"
-          >
-            {brand.supportEmail}
-          </a>
-        </p>
-        {brand.supportWhatsapp && (
-          <p>
-            WhatsApp:{" "}
-            <a
-              href={`https://wa.me/${brand.supportWhatsapp.replace(/[^0-9]/g, "")}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-[var(--brand-accent)] hover:underline"
-            >
-              {brand.supportWhatsapp}
-            </a>
-          </p>
-        )}
+    <div className="mx-auto max-w-2xl px-4 py-16">
+      <h1 className="text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
+        Get in touch
+      </h1>
+      <p className="mt-2 mb-10 text-sand-600 dark:text-sand-400">
+        Real humans. 24/7. Pick the channel you already have open.
+      </p>
+      <div className="space-y-3">
+        <Link
+          href={buildSupportLink("whatsapp", { message: `Hi ${brand.name}!` })}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center justify-between rounded-2xl border border-sand-200 bg-white px-5 py-4 text-sand-900 dark:border-sand-800 dark:bg-sand-900 dark:text-sand-50"
+        >
+          <span className="font-medium">WhatsApp</span>
+          <span className="text-sm text-sand-500">24/7</span>
+        </Link>
+        <Link
+          href={buildSupportLink("sms")}
+          className="flex items-center justify-between rounded-2xl border border-sand-200 bg-white px-5 py-4 text-sand-900 dark:border-sand-800 dark:bg-sand-900 dark:text-sand-50"
+        >
+          <span className="font-medium">SMS</span>
+          <span className="text-sm text-sand-500">{brand.supportWhatsapp}</span>
+        </Link>
+        <a
+          href={`mailto:${brand.supportEmail}`}
+          className="flex items-center justify-between rounded-2xl border border-sand-200 bg-white px-5 py-4 text-sand-900 dark:border-sand-800 dark:bg-sand-900 dark:text-sand-50"
+        >
+          <span className="font-medium">Email</span>
+          <span className="text-sm text-sand-500">{brand.supportEmail}</span>
+        </a>
       </div>
     </div>
   );

package/templates/storefront/src/app/dashboard/page.tsx

@@ -11,12 +11,15 @@ export default async function DashboardPage() {
 
   return (
     <div className="mx-auto max-w-4xl px-4 py-16">
-      <h1 className="text-3xl font-bold text-white mb-8">Your eSIMs</h1>
-      <div className="rounded-2xl border border-white/10 bg-white/5 p-12 text-center">
-        <p className="text-white/50">No active eSIMs yet.</p>
+      <h1 className="mb-8 text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
+        Your eSIMs
+      </h1>
+      <div className="rounded-2xl border border-sand-200 bg-white p-12 text-center dark:border-sand-800 dark:bg-sand-900">
+        <p className="text-sand-500">No active eSIMs yet.</p>
         <a
           href="/shop"
-          className="mt-4 inline-block rounded-full bg-[var(--brand-accent)] px-6 py-2 text-sm font-semibold text-white hover:bg-[var(--brand-accent-dark)] transition-colors"
+          className="mt-4 inline-block rounded-full px-6 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+          style={{ background: "var(--brand-accent)" }}
         >
           Browse plans
         </a>

package/templates/storefront/src/app/globals.css

@@ -1,99 +1,89 @@
 @import "tailwindcss";
 
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
 @theme {
-  /* Brand palette — overridden per white-label via CSS vars */
-  --color-brand-bg: var(--brand-bg);
-  --color-brand-accent: var(--brand-accent);
-  --color-brand-accent-dark: var(--brand-accent-dark);
-  --color-brand-accent-light: var(--brand-accent-light);
-  --color-brand-text: var(--brand-text);
-  --color-brand-text-secondary: var(--brand-text-secondary);
+  --color-leaf-50: #F0FDF4;
+  --color-leaf-500: #22C55E;
+  --color-leaf-600: #16A34A;
+  --color-leaf-700: #15803D;
 
-  /* Map mango-* → brand flame so ported component classNames keep working */
-  --color-mango-50: #fff4ef;
-  --color-mango-100: #ffe0d0;
-  --color-mango-200: #ffbfa0;
-  --color-mango-300: #ff9970;
-  --color-mango-400: #ff7d4d;
-  --color-mango-500: var(--brand-accent);
-  --color-mango-600: var(--brand-accent-dark);
-  --color-mango-700: #b33a17;
-  --color-mango-800: #8a2d12;
-  --color-mango-900: #5e1e0c;
-  --color-mango-950: #3a1107;
+  --color-sand-50: #FAFAF7;
+  --color-sand-100: #F4F2EC;
+  --color-sand-200: #E8E4D8;
+  --color-sand-400: #A8A28E;
+  --color-sand-500: #78725F;
+  --color-sand-600: #5C5644;
+  --color-sand-700: #3F3B30;
+  --color-sand-800: #2C291F;
+  --color-sand-900: #1A1812;
+  --color-sand-950: #0F0E0A;
 
-  /* Neutral slate */
-  --color-slate-950: #080C16;
+  --font-sans: var(--font-geist-sans, "Geist", "Inter", system-ui, sans-serif);
+  --font-display: var(--font-geist-sans, "Geist", system-ui, sans-serif);
+  --font-mono: var(--font-geist-mono, ui-monospace, monospace);
 
-  /* Fonts */
-  --font-sans: var(--font-geist-sans, system-ui, sans-serif);
-  --font-mono: var(--font-geist-mono, monospace);
-
-  /* Radii */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --radius-2xl: 28px;
   --radius-full: 9999px;
 }
 
-/* ── Brand CSS variables (dark-first default) ─────────────────────────────── */
-:root {
-  --brand-bg: #080C16;
-  --brand-accent: #FF6B35;
-  --brand-accent-dark: #D9461C;
-  --brand-accent-light: #FFB088;
-  --brand-text: #F5F1EA;
-  --brand-text-secondary: #C9CCD6;
-}
+@layer base {
+  :root {
+    color-scheme: light;
+    --brand-accent: #FF6B35;
+    --brand-accent-dark: #D9461C;
+    --brand-accent-light: #FFB088;
+  }
 
-[data-theme="light"] {
-  --brand-bg: #FAFAF8;
-  --brand-text: #0F1117;
-  --brand-text-secondary: #6B7280;
-}
+  html[data-theme="dark"] {
+    color-scheme: dark;
+  }
 
-/* ── Base reset ───────────────────────────────────────────────────────────── */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+  * { box-sizing: border-box; }
 
-html {
-  scroll-behavior: smooth;
-  -webkit-text-size-adjust: 100%;
-}
+  html {
+    scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: var(--color-sand-50);
+    scrollbar-gutter: stable;
+  }
 
-body {
-  background-color: var(--brand-bg);
-  color: var(--brand-text);
-  font-family: var(--font-sans);
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  body {
+    background-color: var(--color-sand-50);
+    color: var(--color-sand-900);
+    font-family: var(--font-sans);
+    text-rendering: optimizeLegibility;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
 
-/* ── Selection ───────────────────────────────────────────────────────────── */
-::selection {
-  background-color: color-mix(in srgb, var(--brand-accent) 30%, transparent);
-  color: var(--brand-text);
-}
+  html[data-theme="dark"] {
+    background-color: var(--color-sand-950);
+  }
 
-/* ── Scrollbar ───────────────────────────────────────────────────────────── */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--brand-accent) 40%, transparent);
-  border-radius: 3px;
+  html[data-theme="dark"] body {
+    background-color: var(--color-sand-950);
+    color: var(--color-sand-50);
+  }
+
+  ::selection {
+    background-color: color-mix(in srgb, var(--brand-accent) 28%, transparent);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--brand-accent);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
 }