Refactor color tokens across components for improved consistency and clarity

- Removed legacy color aliases from globals.css to streamline design tokens.
- Updated various components, including Badge, Button, Checkbox, and Input, to utilize new color tokens for error states.
- Enhanced error messaging styles in components like ErrorBoundary and AlertBanner for better visual coherence.
- Standardized color usage in billing and subscription components to align with updated design tokens.
- Improved overall styling consistency across the application by adopting the new color system.

apps/portal/src/app/globals.css

@@ -188,13 +188,6 @@
   --color-danger-soft: var(--danger-bg);
   --color-neutral-soft: var(--neutral-bg);
 
-  /* Legacy aliases (existing components use these) */
-  --color-destructive: var(--danger);
-  --color-destructive-foreground: var(--danger-foreground);
-  --color-destructive-soft: var(--danger-bg);
-  --color-error: var(--danger);
-  --color-error-foreground: var(--danger-foreground);
-
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);

apps/portal/src/components/atoms/badge.tsx

@@ -11,7 +11,7 @@ const badgeVariants = cva(
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         success: "bg-success-soft text-success hover:bg-success-soft/80",
         warning: "bg-warning-soft text-foreground hover:bg-warning-soft/80",
-        error: "bg-destructive-soft text-destructive hover:bg-destructive-soft/80",
+        error: "bg-danger-soft text-danger hover:bg-danger-soft/80",
         info: "bg-info-soft text-info hover:bg-info-soft/80",
         outline: "border border-border bg-background text-foreground hover:bg-muted",
         ghost: "text-foreground hover:bg-muted",
@@ -47,7 +47,7 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
               "mr-1.5 h-1.5 w-1.5 rounded-full",
               variant === "success" && "bg-success",
               variant === "warning" && "bg-warning",
-              variant === "error" && "bg-destructive",
+              variant === "error" && "bg-danger",
               variant === "info" && "bg-info",
               variant === "default" && "bg-primary-foreground",
               variant === "secondary" && "bg-secondary-foreground",

apps/portal/src/components/atoms/button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva(
         default:
           "bg-primary text-primary-foreground hover:bg-primary-hover shadow-[var(--cp-shadow-1)] hover:shadow-[var(--cp-shadow-2)]",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-[var(--cp-shadow-1)] hover:shadow-[var(--cp-shadow-2)]",
+          "bg-danger text-danger-foreground hover:bg-danger/90 shadow-[var(--cp-shadow-1)] hover:shadow-[var(--cp-shadow-2)]",
         outline:
           "border border-border bg-background text-foreground hover:bg-muted shadow-[var(--cp-shadow-1)] hover:shadow-[var(--cp-shadow-2)]",
         secondary:

apps/portal/src/components/atoms/checkbox.tsx

@@ -25,7 +25,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
             ref={ref}
             className={cn(
               "h-4 w-4 rounded border-input text-primary focus:ring-ring focus:ring-2",
-              error && "border-destructive",
+              error && "border-danger",
               className
             )}
             {...props}
@@ -35,7 +35,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
               htmlFor={checkboxId}
               className={cn(
                 "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-                error && "text-destructive"
+                error && "text-danger"
               )}
             >
               {label}
@@ -43,7 +43,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           )}
         </div>
         {helperText && !error && <p className="text-xs text-muted-foreground">{helperText}</p>}
-        {error && <p className="text-xs text-destructive">{error}</p>}
+        {error && <p className="text-xs text-danger">{error}</p>}
       </div>
     );
   }

apps/portal/src/components/atoms/input.tsx

@@ -21,7 +21,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-0 focus-visible:border-primary",
           "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border",
           isInvalid &&
-            "border-destructive hover:border-destructive focus-visible:ring-destructive/40 focus-visible:border-destructive",
+            "border-danger hover:border-danger focus-visible:ring-danger/40 focus-visible:border-danger",
           className
         )}
         aria-invalid={isInvalid || undefined}

apps/portal/src/components/atoms/status-pill.tsx

@@ -18,7 +18,7 @@ export const StatusPill = forwardRef<HTMLSpanElement, StatusPillProps>(
           : variant === "info"
             ? "bg-info-soft text-info ring-info/25"
             : variant === "error"
-              ? "bg-destructive-soft text-destructive ring-destructive/25"
+              ? "bg-danger-soft text-danger ring-danger/25"
               : "bg-muted text-muted-foreground ring-border-muted/40";
 
     const sizing =

apps/portal/src/components/molecules/AlertBanner/AlertBanner.tsx

@@ -37,10 +37,10 @@ const variantClasses: Record<
     Icon: ExclamationTriangleIcon,
   },
   error: {
-    bg: "bg-destructive-soft",
-    border: "border-destructive/30",
-    text: "text-destructive",
-    icon: "text-destructive",
+    bg: "bg-danger-soft",
+    border: "border-danger/30",
+    text: "text-danger",
+    icon: "text-danger",
     Icon: XCircleIcon,
   },
 };

apps/portal/src/components/molecules/FormField/FormField.tsx

@@ -49,14 +49,14 @@ const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
             htmlFor={id}
             className={cn(
               "block text-sm font-medium text-muted-foreground",
-              error && "text-destructive",
+              error && "text-danger",
               labelProps?.className
             )}
             {...(labelProps ? { ...labelProps, className: undefined } : undefined)}
           >
             <span>{label}</span>
             {required ? (
-              <span aria-hidden="true" className="ml-1 text-destructive">
+              <span aria-hidden="true" className="ml-1 text-danger">
                 *
               </span>
             ) : null}
@@ -79,8 +79,7 @@ const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
             aria-invalid={error ? "true" : undefined}
             aria-describedby={cn(errorId, helperTextId) || undefined}
             className={cn(
-              error &&
-                "border-destructive focus-visible:ring-destructive focus-visible:ring-offset-2",
+              error && "border-danger focus-visible:ring-danger focus-visible:ring-offset-2",
               inputClassName,
               inputPropsClassName
             )}

apps/portal/src/components/molecules/error-boundary.tsx

@@ -52,7 +52,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
       return (
         <div className="flex items-center justify-center h-64">
           <div className="text-center space-y-4">
-            <h2 className="text-lg font-semibold text-destructive">Something went wrong</h2>
+            <h2 className="text-lg font-semibold text-danger">Something went wrong</h2>
             <p className="text-muted-foreground">
               {process.env.NODE_ENV === "development"
                 ? this.state.error?.message || "An unexpected error occurred"

apps/portal/src/features/account/components/AddressCard.tsx

@@ -57,7 +57,7 @@ export function AddressCard({
         {isEditing ? (
           <div className="space-y-6">
             <AddressForm initialAddress={address} onChange={addr => onAddressChange(addr, true)} />
-            {error && <div className="text-sm text-destructive">{error}</div>}
+            {error && <div className="text-sm text-danger">{error}</div>}
             <div className="flex items-center justify-end space-x-3 pt-4 border-t border-border/60">
               <button
                 onClick={onCancel}

apps/portal/src/features/auth/components/SetPasswordForm/SetPasswordForm.tsx

@@ -152,7 +152,7 @@ export function SetPasswordForm({
       </FormField>
 
       {form.values.confirmPassword && (
-        <p className={`text-sm ${passwordsMatch ? "text-success" : "text-destructive"}`}>
+        <p className={`text-sm ${passwordsMatch ? "text-success" : "text-danger"}`}>
           {passwordsMatch ? "✓ Passwords match" : "✗ Passwords do not match"}
         </p>
       )}

apps/portal/src/features/auth/components/SignupForm/SignupForm.tsx

@@ -276,7 +276,7 @@ export function SignupForm({ onSuccess, onError, className = "" }: SignupFormPro
         />
 
         {error && (
-          <ErrorMessage className="mt-4 text-center p-3 bg-destructive-soft rounded-lg">
+          <ErrorMessage className="mt-4 text-center p-3 bg-danger-soft rounded-lg">
             {error}
           </ErrorMessage>
         )}

apps/portal/src/features/auth/components/SignupForm/steps/AccountStep.tsx

@@ -153,7 +153,7 @@ export function AccountStep({ form }: AccountStepProps) {
               "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               "disabled:cursor-not-allowed disabled:opacity-50",
               getError("gender")
-                ? "border-destructive focus-visible:ring-destructive focus-visible:ring-offset-2"
+                ? "border-danger focus-visible:ring-danger focus-visible:ring-offset-2"
                 : "",
             ].join(" ")}
             aria-invalid={Boolean(getError("gender")) || undefined}

apps/portal/src/features/auth/components/SignupForm/steps/PasswordStep.tsx

@@ -95,7 +95,7 @@ export function PasswordStep({ form }: PasswordStepProps) {
       </FormField>
 
       {values.confirmPassword && (
-        <p className={`text-sm ${passwordsMatch ? "text-success" : "text-destructive"}`}>
+        <p className={`text-sm ${passwordsMatch ? "text-success" : "text-danger"}`}>
           {passwordsMatch ? "✓ Passwords match" : "✗ Passwords do not match"}
         </p>
       )}

apps/portal/src/features/auth/components/SignupForm/steps/ReviewStep.tsx

@@ -203,7 +203,7 @@ export function ReviewStep({ form }: ReviewStepProps) {
           </span>
         </label>
         {errors.acceptTerms && (
-          <p className="text-sm text-destructive ml-11 -mt-2">{errors.acceptTerms}</p>
+          <p className="text-sm text-danger ml-11 -mt-2">{errors.acceptTerms}</p>
         )}
 
         <label className="flex items-start gap-3 cursor-pointer p-3 rounded-lg hover:bg-muted transition-colors">

apps/portal/src/features/billing/components/BillingSummary/BillingSummary.tsx

@@ -114,7 +114,7 @@ const BillingSummary = forwardRef<HTMLDivElement, BillingSummaryProps>(
                   <IconComponent
                     className={cn(
                       "w-5 h-5 mr-3",
-                      item.variant === "error" && "text-destructive",
+                      item.variant === "error" && "text-danger",
                       item.variant === "warning" && "text-warning",
                       item.variant === "success" && "text-success",
                       item.variant === "neutral" && "text-muted-foreground"

apps/portal/src/features/billing/components/InvoiceDetail/InvoiceSummaryBar.tsx

@@ -148,7 +148,7 @@ export function InvoiceSummaryBar({
                 <span
                   className={cn(
                     "font-medium",
-                    invoice.status === "Overdue" ? "text-destructive" : "text-warning"
+                    invoice.status === "Overdue" ? "text-danger" : "text-warning"
                   )}
                 >
                   {relativeDue}

apps/portal/src/features/billing/components/InvoiceTable/InvoiceTable.tsx

@@ -38,7 +38,7 @@ const getStatusIcon = (status: string) => {
     case "unpaid":
       return <ClockIcon className="h-5 w-5 text-warning" />;
     case "overdue":
-      return <ExclamationTriangleIcon className="h-5 w-5 text-destructive" />;
+      return <ExclamationTriangleIcon className="h-5 w-5 text-danger" />;
     case "cancelled":
     case "canceled":
       return <ExclamationTriangleIcon className="h-5 w-5 text-muted-foreground" />;
@@ -161,11 +161,11 @@ export function InvoiceTable({
               case "Overdue":
                 return (
                   <div className="space-y-1.5">
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-destructive-soft text-destructive border border-destructive/20">
+                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-danger-soft text-danger border border-danger/20">
                       Overdue
                     </span>
                     {invoice.daysOverdue && (
-                      <div className="text-xs text-destructive">
+                      <div className="text-xs text-danger">
                         {invoice.daysOverdue} day{invoice.daysOverdue !== 1 ? "s" : ""} overdue
                       </div>
                     )}

apps/portal/src/features/billing/components/PaymentMethodCard/PaymentMethodCard.tsx

@@ -38,7 +38,7 @@ const getCardBrandColor = (cardBrand?: string) => {
     case "visa":
       return "text-info";
     case "mastercard":
-      return "text-destructive";
+      return "text-danger";
     case "amex":
     case "american express":
       return "text-success";

apps/portal/src/features/catalog/components/sim/ActivationForm.tsx

@@ -117,9 +117,7 @@ export function ActivationForm({
                     className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors"
                   />
                   {errors.scheduledActivationDate && (
-                    <p className="text-destructive text-sm mt-1">
-                      {errors.scheduledActivationDate}
-                    </p>
+                    <p className="text-danger text-sm mt-1">{errors.scheduledActivationDate}</p>
                   )}
                   <p className="text-xs text-muted-foreground mt-1">
                     Weekend or holiday requests may be processed on the next business day.

apps/portal/src/features/catalog/components/sim/SimConfigureView.tsx

@@ -158,7 +158,7 @@ export function SimConfigureView({
         icon={<ExclamationTriangleIcon className="h-6 w-6" />}
       >
         <div className="text-center py-12">
-          <ExclamationTriangleIcon className="h-12 w-12 mx-auto text-destructive mb-4" />
+          <ExclamationTriangleIcon className="h-12 w-12 mx-auto text-danger mb-4" />
           <h2 className="text-xl font-semibold text-foreground mb-2">Plan Not Found</h2>
           <p className="text-muted-foreground mb-4">The selected plan could not be found</p>
           <a href="/catalog/sim" className="text-primary hover:text-primary-hover font-medium">

apps/portal/src/features/dashboard/components/TaskCard.tsx

@@ -43,10 +43,10 @@ const toneStyles: Record<
   }
 > = {
   critical: {
-    card: "bg-error/5 hover:bg-error/10",
-    border: "border-l-error",
-    iconBg: "bg-error/15",
-    iconColor: "text-error",
+    card: "bg-danger/5 hover:bg-danger/10",
+    border: "border-l-danger",
+    iconBg: "bg-danger/15",
+    iconColor: "text-danger",
     buttonVariant: "default",
   },
   warning: {

apps/portal/src/features/dashboard/views/DashboardView.tsx

@@ -86,7 +86,7 @@ export function DashboardView() {
             <span
               className={cn(
                 "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium",
-                hasUrgentTask ? "bg-error/10 text-error" : "bg-warning/10 text-warning"
+                hasUrgentTask ? "bg-danger/10 text-danger" : "bg-warning/10 text-warning"
               )}
             >
               {hasUrgentTask && <ExclamationTriangleIcon className="h-4 w-4" />}

apps/portal/src/features/orders/views/OrderDetail.tsx

@@ -279,7 +279,7 @@ export function OrderDetailContainer() {
         { label: data ? `Order #${orderNumber}` : "Order Details" },
       ]}
     >
-      {error && <div className="mb-4 text-sm text-destructive">{error}</div>}
+      {error && <div className="mb-4 text-sm text-danger">{error}</div>}
 
       {isNewOrder && (
         <div className="mb-6 rounded-2xl border border-success/25 bg-success-soft px-5 py-4 shadow-[var(--cp-shadow-1)]">

apps/portal/src/features/sim-management/components/DataUsageChart.tsx

@@ -71,9 +71,9 @@ export function DataUsageChart({
     return (
       <div className={`${embedded ? "" : "bg-card shadow rounded-lg "}p-6`}>
         <div className="text-center">
-          <ExclamationTriangleIcon className="h-12 w-12 text-destructive mx-auto mb-4" />
+          <ExclamationTriangleIcon className="h-12 w-12 text-danger mx-auto mb-4" />
           <h3 className="text-lg font-medium text-foreground mb-2">Error Loading Usage Data</h3>
-          <p className="text-destructive">{error}</p>
+          <p className="text-danger">{error}</p>
         </div>
       </div>
     );
@@ -223,12 +223,12 @@ export function DataUsageChart({
         {/* Warnings */}
 
         {usagePercentage >= 90 && (
-          <div className="mt-6 bg-destructive-bg border border-destructive-border rounded-lg p-4">
+          <div className="mt-6 bg-danger-bg border border-danger-border rounded-lg p-4">
             <div className="flex items-center">
-              <ExclamationTriangleIcon className="h-5 w-5 text-destructive mr-2" />
+              <ExclamationTriangleIcon className="h-5 w-5 text-danger mr-2" />
               <div>
-                <h4 className="text-sm font-medium text-destructive">High Usage Warning</h4>
-                <p className="text-sm text-destructive/80 mt-1">
+                <h4 className="text-sm font-medium text-danger">High Usage Warning</h4>
+                <p className="text-sm text-danger/80 mt-1">
                   You have used {usagePercentage.toFixed(1)}% of your data quota. Consider topping
                   up to avoid service interruption.
                 </p>

apps/portal/src/features/sim-management/components/SimActions.tsx

@@ -245,7 +245,7 @@ export function SimActions({
             disabled={!canCancel || loading !== null}
             className={`w-full flex items-center justify-start px-4 py-4 rounded-lg text-sm font-medium transition-colors duration-[var(--cp-duration-normal)] ${
               canCancel && loading === null
-                ? "text-destructive bg-destructive-soft border border-destructive/30 hover:bg-destructive-soft/80 shadow-[var(--cp-shadow-1)] hover:shadow-[var(--cp-shadow-2)] focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+                ? "text-danger bg-danger-soft border border-danger/30 hover:bg-danger-soft/80 shadow-[var(--cp-shadow-1)] hover:shadow-[var(--cp-shadow-2)] focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
                 : "text-muted-foreground bg-muted border border-border cursor-not-allowed"
             }`}
           >
@@ -285,7 +285,7 @@ export function SimActions({
             )}
             {activeInfo === "cancel" && (
               <div className="flex items-start">
-                <XMarkIcon className="h-4 w-4 text-destructive mr-2 mt-0.5 flex-shrink-0" />
+                <XMarkIcon className="h-4 w-4 text-danger mr-2 mt-0.5 flex-shrink-0" />
                 <div>
                   <strong>Cancel SIM:</strong> Permanently cancel your SIM service. This action
                   cannot be undone and will terminate your service immediately.
@@ -383,8 +383,8 @@ export function SimActions({
             <div className="inline-block align-bottom bg-card rounded-lg text-left overflow-hidden shadow-[var(--cp-shadow-3)] border border-border transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
               <div className="bg-card px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div className="sm:flex sm:items-start">
-                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-destructive-soft sm:mx-0 sm:h-10 sm:w-10">
-                    <ExclamationTriangleIcon className="h-6 w-6 text-destructive" />
+                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-danger-soft sm:mx-0 sm:h-10 sm:w-10">
+                    <ExclamationTriangleIcon className="h-6 w-6 text-danger" />
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                     <h3 className="text-lg leading-6 font-medium text-foreground">

apps/portal/src/features/sim-management/components/SimDetailsCard.tsx

@@ -57,7 +57,7 @@ export function SimDetailsCard({
       case "suspended":
         return <ExclamationTriangleIcon className="h-6 w-6 text-warning" />;
       case "cancelled":
-        return <XCircleIcon className="h-6 w-6 text-destructive" />;
+        return <XCircleIcon className="h-6 w-6 text-danger" />;
       case "pending":
         return <ClockIcon className="h-6 w-6 text-info" />;
       default:
@@ -72,7 +72,7 @@ export function SimDetailsCard({
       case "suspended":
         return "bg-warning-soft text-warning";
       case "cancelled":
-        return "bg-destructive-soft text-destructive";
+        return "bg-danger-soft text-danger";
       case "pending":
         return "bg-info-soft text-info";
       default:
@@ -127,14 +127,14 @@ export function SimDetailsCard({
   if (error) {
     return (
       <div
-        className={`${embedded ? "" : "bg-card shadow-sm rounded-[var(--cp-card-radius)] border border-destructive-soft "}p-[var(--cp-card-padding)] lg:p-[var(--cp-card-padding-lg)]`}
+        className={`${embedded ? "" : "bg-card shadow-sm rounded-[var(--cp-card-radius)] border border-danger-soft "}p-[var(--cp-card-padding)] lg:p-[var(--cp-card-padding-lg)]`}
       >
         <div className="text-center">
-          <div className="bg-destructive-soft rounded-full p-3 w-16 h-16 mx-auto mb-4">
-            <ExclamationTriangleIcon className="h-10 w-10 text-destructive mx-auto" />
+          <div className="bg-danger-soft rounded-full p-3 w-16 h-16 mx-auto mb-4">
+            <ExclamationTriangleIcon className="h-10 w-10 text-danger mx-auto" />
           </div>
           <h3 className="text-lg font-semibold text-foreground mb-2">Error Loading SIM Details</h3>
-          <p className="text-destructive text-sm">{error}</p>
+          <p className="text-danger text-sm">{error}</p>
         </div>
       </div>
     );

apps/portal/src/features/sim-management/components/SimFeatureToggles.tsx

@@ -181,7 +181,7 @@ export function SimFeatureToggles({
               <div className="text-xs text-muted-foreground">
                 Choose your preferred connectivity
               </div>
-              <div className="text-xs text-destructive mt-1">
+              <div className="text-xs text-danger mt-1">
                 Voice, network, and plan changes must be requested at least 30 minutes apart. If you
                 just changed another option, you may need to wait before submitting.
               </div>

apps/portal/src/features/sim-management/components/SimManagementSection.tsx

@@ -163,8 +163,8 @@ export function SimManagementSection({ subscriptionId }: SimManagementSectionPro
     return (
       <div className="bg-card shadow-[var(--cp-shadow-1)] rounded-lg border border-border p-8">
         <div className="text-center py-10 max-w-xl mx-auto">
-          <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-destructive-soft flex items-center justify-center border border-destructive/25">
-            <ExclamationTriangleIcon className="h-10 w-10 text-destructive" />
+          <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-danger-soft flex items-center justify-center border border-danger/25">
+            <ExclamationTriangleIcon className="h-10 w-10 text-danger" />
           </div>
           <h3 className="text-xl font-semibold text-foreground mb-3">
             Unable to Load SIM Information
@@ -321,9 +321,9 @@ export function SimManagementSection({ subscriptionId }: SimManagementSectionPro
 
             <button
               onClick={navigateToCancel}
-              className="flex flex-col items-center justify-center p-6 bg-card border border-destructive/25 rounded-lg hover:bg-destructive-soft hover:shadow-[var(--cp-shadow-2)] transition-colors duration-[var(--cp-duration-normal)]"
+              className="flex flex-col items-center justify-center p-6 bg-card border border-danger/25 rounded-lg hover:bg-danger-soft hover:shadow-[var(--cp-shadow-2)] transition-colors duration-[var(--cp-duration-normal)]"
             >
-              <XCircleIcon className="h-8 w-8 text-destructive mb-2" />
+              <XCircleIcon className="h-8 w-8 text-danger mb-2" />
               <span className="text-sm font-medium text-foreground">Cancel SIM</span>
             </button>
           </div>

apps/portal/src/features/subscriptions/utils/status-presenters.tsx

@@ -20,7 +20,7 @@ const STATUS_ICON_MAP: Record<SubscriptionStatus, ReactNode> = {
   [SUBSCRIPTION_STATUS.INACTIVE]: <ServerIcon className="h-6 w-6 text-muted-foreground" />,
   [SUBSCRIPTION_STATUS.PENDING]: <ClockIcon className="h-6 w-6 text-info" />,
   [SUBSCRIPTION_STATUS.SUSPENDED]: <ExclamationTriangleIcon className="h-6 w-6 text-warning" />,
-  [SUBSCRIPTION_STATUS.TERMINATED]: <XCircleIcon className="h-6 w-6 text-destructive" />,
+  [SUBSCRIPTION_STATUS.TERMINATED]: <XCircleIcon className="h-6 w-6 text-danger" />,
   [SUBSCRIPTION_STATUS.CANCELLED]: <XCircleIcon className="h-6 w-6 text-muted-foreground" />,
   [SUBSCRIPTION_STATUS.COMPLETED]: <CheckCircleIcon className="h-6 w-6 text-success" />,
 };

apps/portal/src/features/subscriptions/views/SimCancel.tsx

@@ -172,7 +172,7 @@ export function SimCancelContainer() {
 
             {/* Minimum Contract Warning */}
             {preview?.isWithinMinimumTerm && (
-              <div className="bg-destructive-soft border border-destructive/25 rounded-lg p-4 mb-6">
+              <div className="bg-danger-soft border border-danger/25 rounded-lg p-4 mb-6">
                 <div className="text-sm font-semibold text-foreground mb-1">
                   Minimum Contract Term Warning
                 </div>
@@ -361,12 +361,12 @@ export function SimCancelContainer() {
                 </div>
 
                 {emailProvided && !emailValid && (
-                  <div className="text-xs text-destructive">
+                  <div className="text-xs text-danger">
                     Please enter a valid email address in both fields.
                   </div>
                 )}
                 {emailProvided && emailValid && !emailsMatch && (
-                  <div className="text-xs text-destructive">Email addresses do not match.</div>
+                  <div className="text-xs text-danger">Email addresses do not match.</div>
                 )}
 
                 {/* Comments */}
@@ -385,7 +385,7 @@ export function SimCancelContainer() {
                 </div>
 
                 {/* Final Warning */}
-                <div className="bg-destructive-soft border border-destructive/25 rounded-lg p-4">
+                <div className="bg-danger-soft border border-danger/25 rounded-lg p-4">
                   <div className="text-sm font-semibold text-foreground mb-1">
                     Your cancellation request is not confirmed yet.
                   </div>

apps/portal/src/features/subscriptions/views/SimReissue.tsx

@@ -273,7 +273,7 @@ export function SimReissueContainer() {
                       device settings under "About" or "SIM status".
                     </p>
                     {newEid && !isValidEid() && (
-                      <p className="text-xs text-destructive mt-1">
+                      <p className="text-xs text-danger mt-1">
                         Please enter exactly 32 digits ({newEid.length}/32)
                       </p>
                     )}

apps/portal/src/features/subscriptions/views/SimTopUp.tsx

@@ -138,8 +138,8 @@ export function SimTopUpContainer() {
             </div>
 
             {!isValidAmount() && gbAmount && (
-              <div className="bg-destructive-soft border border-destructive/25 rounded-lg p-3">
-                <p className="text-sm text-destructive">
+              <div className="bg-danger-soft border border-danger/25 rounded-lg p-3">
+                <p className="text-sm text-danger">
                   Please enter a valid whole number between 1 and 50 GB.
                 </p>
               </div>

apps/portal/src/features/support/utils/case-presenters.tsx

@@ -87,7 +87,7 @@ const STATUS_CLASSES_WITH_BORDER: Record<CaseStatusVariant, string> = {
  * Tailwind class mappings for priority variants
  */
 const PRIORITY_CLASSES: Record<CasePriorityVariant, string> = {
-  high: "text-destructive bg-destructive-soft",
+  high: "text-danger bg-danger-soft",
   medium: "text-warning bg-warning-soft",
   low: "text-success bg-success-soft",
   neutral: "text-muted-foreground bg-muted",
@@ -97,7 +97,7 @@ const PRIORITY_CLASSES: Record<CasePriorityVariant, string> = {
  * Tailwind class mappings for priority variants with border
  */
 const PRIORITY_CLASSES_WITH_BORDER: Record<CasePriorityVariant, string> = {
-  high: "text-destructive bg-destructive-soft border-destructive/20",
+  high: "text-danger bg-danger-soft border-danger/20",
   medium: "text-warning bg-warning-soft border-warning/20",
   low: "text-success bg-success-soft border-success/20",
   neutral: "text-muted-foreground bg-muted border-border",

apps/portal/src/styles/utilities.css

@@ -94,12 +94,6 @@
     color: var(--neutral-foreground);
   }
 
-  /* Legacy aliases */
-  .cp-badge-error {
-    background: var(--danger);
-    color: var(--danger-foreground);
-  }
-
   /* Soft badge variants (light bg, dark text) */
   .cp-badge-soft-success {
     background: var(--success-soft);
@@ -126,12 +120,6 @@
     color: var(--neutral);
   }
 
-  /* Legacy aliases */
-  .cp-badge-soft-error {
-    background: var(--danger-soft);
-    color: var(--danger);
-  }
-
   .cp-badge-outline {
     background: transparent;
     border: 1px solid currentColor;