Refine root UI around shadcn primitives

app/[locale]/(site)/about/page.tsx

@@ -101,7 +101,7 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
               {[t("processOne"), t("processTwo"), t("processThree")].map((step, index) => (
                 <AppCard key={step} level={2}>
                   <CardContent className="p-4">
-                    <span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-pill bg-surface-1 text-xs font-semibold text-foreground/80">
+                    <span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground/80">
                       {index + 1}
                     </span>
                     <p className="text-sm text-foreground/80">{step}</p>

app/[locale]/(site)/page.tsx

@@ -189,11 +189,11 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
           <CardContent className="p-6 lg:p-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
               <div>
-                <p className="inline-flex items-center gap-2 text-sm font-medium text-surface-inverse-foreground/80">
+                <p className="inline-flex items-center gap-2 text-sm font-medium text-primary-foreground/80">
                   <Mail className="h-4 w-4" />
                   {t("ctaTitle")}
                 </p>
-                <p className="mt-2 max-w-2xl text-sm text-surface-inverse-foreground/88 sm:text-base">
+                <p className="mt-2 max-w-2xl text-sm text-primary-foreground/88 sm:text-base">
                   {t("ctaText")}
                 </p>
               </div>

app/[locale]/(site)/portfolio/[slug]/page.tsx

@@ -106,7 +106,7 @@ export default async function PortfolioItemPage({
             </p>
 
             {item.coverImagePath ? (
-              <div className="mt-6 overflow-hidden rounded-surface border border-border">
+              <div className="mt-6 overflow-hidden rounded-lg border border-border bg-card">
                 <PortfolioImage
                   src={item.coverImagePath}
                   alt={getLocalizedValue(item.title, localeKey)}
@@ -180,7 +180,7 @@ export default async function PortfolioItemPage({
                     alt={getLocalizedValue(section.title, localeKey)}
                     width={1200}
                     height={720}
-                    className="mt-4 h-48 w-full rounded-nested object-cover"
+                    className="mt-4 h-48 w-full rounded-md object-cover"
                   />
                 ) : null}
                 {section.linkUrl ? (
@@ -204,7 +204,7 @@ export default async function PortfolioItemPage({
               <h2 className="text-xl font-semibold text-foreground">{t("gallery")}</h2>
               <div className="mt-4 grid gap-4 md:grid-cols-2">
                 {item.assets.map((asset) => (
-                  <div key={asset.id} className="overflow-hidden rounded-surface border border-border">
+                  <div key={asset.id} className="overflow-hidden rounded-lg border border-border bg-card">
                     {asset.kind === "IMAGE" ? (
                       <PortfolioImage
                         src={asset.filePath}
@@ -214,7 +214,7 @@ export default async function PortfolioItemPage({
                         className="h-64 w-full object-cover"
                       />
                     ) : (
-                      <div className="flex h-64 items-center justify-center bg-surface-1 p-6 text-center text-sm text-muted-foreground">
+                      <div className="flex h-64 items-center justify-center bg-muted/40 p-6 text-center text-sm text-muted-foreground">
                         <div className="space-y-3">
                           <p>{getLocalizedValue(asset.alt, localeKey)}</p>
                           <Button asChild variant="outline">

app/[locale]/(site)/portfolio/page.tsx

@@ -75,10 +75,10 @@ export default async function PortfolioPage({
       <section className="flex flex-wrap gap-3">
         <Link
           href={getLocalizedPath(localeKey, "/portfolio")}
-          className={`rounded-pill border px-4 py-2 text-sm transition-colors ${
+          className={`rounded-md border px-4 py-2 text-sm transition-colors ${
             selectedCategory === ""
-              ? "border-border-strong bg-foreground text-background"
-              : "border-border bg-background text-foreground/80 hover:border-border-strong hover:text-foreground"
+              ? "border-input bg-primary text-primary-foreground"
+              : "border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
           }`}
         >
           {t("all")}
@@ -87,10 +87,10 @@ export default async function PortfolioPage({
           <Link
             key={category.id}
             href={getLocalizedPath(localeKey, `/portfolio?category=${category.slug}`)}
-            className={`rounded-pill border px-4 py-2 text-sm transition-colors ${
+            className={`rounded-md border px-4 py-2 text-sm transition-colors ${
               selectedCategory === category.slug
-                ? "border-border-strong bg-foreground text-background"
-                : "border-border bg-background text-foreground/80 hover:border-border-strong hover:text-foreground"
+                ? "border-input bg-primary text-primary-foreground"
+                : "border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
             }`}
           >
             {getLocalizedValue(category.name, localeKey)}

app/[locale]/(site)/products/[slug]/page.tsx

@@ -121,7 +121,7 @@ export default async function ProductPage({ params: { locale, slug } }: ProductP
               {[t("stepOne"), t("stepTwo"), t("stepThree")].map((step, index) => (
                 <AppCard key={step} level={2}>
                   <CardContent className="p-4">
-                    <span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-pill bg-surface-1 text-xs font-semibold text-foreground/80">
+                    <span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground/80">
                       {index + 1}
                     </span>
                     <p className="text-sm text-foreground/80">{step}</p>

app/[locale]/coming-soon/page.tsx

@@ -48,14 +48,14 @@ export default async function ComingSoonPage({
         <MotionFade className="w-full">
           <AppCard
             level={3}
-            className="mx-auto w-full max-w-4xl overflow-hidden border-border/70 bg-surface-1/88 shadow-none"
+            className="mx-auto w-full max-w-4xl overflow-hidden border-border/70 bg-card/95 shadow-sm"
           >
             <CardContent className="relative p-6 text-center sm:p-10 lg:p-14">
               <div className="pointer-events-none absolute -right-20 -top-20 h-48 w-48 rounded-full bg-brand-secondary/15 blur-3xl sm:h-64 sm:w-64" />
               <div className="pointer-events-none absolute -bottom-24 -left-16 h-56 w-56 rounded-full bg-brand-primary/15 blur-3xl sm:h-72 sm:w-72" />
 
               <div className="relative">
-                <p className="inline-flex items-center gap-2 rounded-pill border border-border bg-surface-1 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-foreground/80">
+                <p className="inline-flex items-center gap-2 rounded-full border border-input bg-background px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-foreground/80">
                   <Sparkles className="h-3.5 w-3.5 text-brand-secondary" />
                   {t("badge")}
                 </p>