fix(web): resolve design-system token discrepancies

apps/web/src/app.css

@@ -55,9 +55,19 @@
   --text-3xs: 0.625rem;
   --text-3xs--line-height: 0.9rem;
 
+  /* Radius scale — derived from --radius so that both the `rounded-*`
+     utilities and direct `var(--radius-*)` references (used in button and
+     select variants) resolve to the same values. Defined in a plain `@theme`
+     block (not `@theme inline`) so the tokens are emitted as :root custom
+     properties and can be referenced with var(). */
   --radius-default: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-sm: 0.25rem;
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
 @theme inline {
@@ -94,13 +104,6 @@
   --color-card: var(--card);
   --color-foreground: var(--foreground);
   --color-background: var(--background);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
 /* ─── Light Mode: Warm Cream ─── */

apps/web/src/components/article/comparison.tsx

@@ -14,8 +14,8 @@ export function Comparison({
 }) {
   return (
     <div className="my-7 grid gap-4 md:grid-cols-2">
-      <div className="rounded-xl border border-emerald-200/60 bg-emerald-50/40 p-5 dark:border-emerald-900/40 dark:bg-emerald-950/20">
-        <div className="mb-3 flex items-center gap-2 text-emerald-700 dark:text-emerald-300">
+      <div className="rounded-xl border border-success-border bg-success-surface p-5">
+        <div className="mb-3 flex items-center gap-2 text-success-foreground">
           <CheckCircle2 className="size-4" />
           <p className="font-heading text-sm font-semibold uppercase tracking-wider">
             {helpsTitle}
@@ -29,15 +29,15 @@ export function Comparison({
             >
               <span
                 aria-hidden
-                className="mt-1.5 inline-block size-1.5 shrink-0 rounded-full bg-emerald-500"
+                className="mt-1.5 inline-block size-1.5 shrink-0 rounded-full bg-status-success"
               />
               <span>{item}</span>
             </li>
           ))}
         </ul>
       </div>
-      <div className="rounded-xl border border-rose-200/60 bg-rose-50/40 p-5 dark:border-rose-900/40 dark:bg-rose-950/20">
-        <div className="mb-3 flex items-center gap-2 text-rose-700 dark:text-rose-300">
+      <div className="rounded-xl border border-danger-border bg-danger-surface p-5">
+        <div className="mb-3 flex items-center gap-2 text-danger-foreground">
           <XCircle className="size-4" />
           <p className="font-heading text-sm font-semibold uppercase tracking-wider">
             {hurtsTitle}
@@ -51,7 +51,7 @@ export function Comparison({
             >
               <span
                 aria-hidden
-                className="mt-1.5 inline-block size-1.5 shrink-0 rounded-full bg-rose-500"
+                className="mt-1.5 inline-block size-1.5 shrink-0 rounded-full bg-status-danger"
               />
               <span>{item}</span>
             </li>

apps/web/src/components/article/encouragement.tsx

@@ -3,8 +3,8 @@ import { Heart } from "lucide-react";
 
 export function Encouragement({ children }: { children: ReactNode }) {
   return (
-    <aside className="my-6 flex items-start gap-3 rounded-xl border border-amber-200/60 bg-amber-50/40 px-5 py-4 dark:border-amber-900/40 dark:bg-amber-950/20">
-      <Heart className="mt-0.5 size-5 shrink-0 text-amber-600 dark:text-amber-300" />
+    <aside className="my-6 flex items-start gap-3 rounded-xl border border-accent-200/60 bg-accent-50 px-5 py-4 dark:border-accent-800/40 dark:bg-accent-900/25">
+      <Heart className="mt-0.5 size-5 shrink-0 text-accent-600 dark:text-accent-300" />
       <p className="text-sm leading-relaxed text-foreground/90">{children}</p>
     </aside>
   );

apps/web/src/components/article/key-takeaways.tsx

@@ -9,8 +9,8 @@ export function KeyTakeaways({
   items: ReactNode[];
 }) {
   return (
-    <aside className="my-8 rounded-2xl border border-emerald-200/60 bg-emerald-50/50 p-5 dark:border-emerald-900/40 dark:bg-emerald-950/20">
-      <div className="flex items-center gap-2 text-emerald-700 dark:text-emerald-300">
+    <aside className="my-8 rounded-2xl border border-success-border bg-success-surface p-5">
+      <div className="flex items-center gap-2 text-success-foreground">
         <Sparkles className="size-4" />
         <p className="font-heading text-sm font-semibold uppercase tracking-wider">
           {title}
@@ -22,7 +22,7 @@ export function KeyTakeaways({
             key={String(item)}
             className="flex items-start gap-2.5 text-sm leading-relaxed text-foreground/90"
           >
-            <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-emerald-600 dark:text-emerald-400" />
+            <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-success-foreground" />
             <span>{item}</span>
           </li>
         ))}

apps/web/src/components/ui/badge-variants.ts

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority"
 
 export const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {

apps/web/src/components/ui/tabs.tsx

@@ -42,7 +42,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",

apps/web/src/routes/_authenticated/admin-analytics/analytics-sections.tsx

@@ -29,7 +29,7 @@ export function AlertsSection({ alerts }: { alerts: AnalyticsAlert[] }) {
           className={
             alert.level === "critical"
               ? "border-destructive/50 bg-destructive/5"
-              : "border-amber-500/40 bg-amber-50 dark:bg-amber-950/30"
+              : "border-warning-border bg-warning-surface"
           }
         >
           <CardContent className="py-3 text-sm">

apps/web/src/routes/_authenticated/admin-users/admin-users-auth-info.tsx

@@ -35,7 +35,7 @@ export function AuthInfo({ user }: { user: AdminUser }) {
           E-mail vérifié
         </span>
       ) : (
-        <span className="flex items-center gap-1 text-xs font-medium text-amber-600 dark:text-amber-500">
+        <span className="flex items-center gap-1 text-xs font-medium text-status-warning">
           <MailWarning className="size-3.5" aria-hidden="true" />
           E-mail non vérifié
         </span>