@sofya-ds/react 0.1.0 → 1.1.0

package/dist/index.js

@@ -645,11 +645,11 @@ var alertVariants = cva2("flex w-full items-start border", {
       lg: "gap-4 rounded-[18px] px-6 py-4"
     },
     tone: {
-      default: "border-[#D9E2FA] bg-[#F8FAFF] text-[var(--sofya-tag-navy)]",
-      info: "border-[#D6E6FF] bg-[#F4F8FF] text-[var(--sofya-tag-blue)]",
-      success: "border-[#CDEFD8] bg-[#F1FBF5] text-[var(--sofya-tag-green)]",
-      warning: "border-[#F0E2C4] bg-[#FCF8F0] text-[var(--sofya-tag-sand)]",
-      destructive: "border-[#F0D5D9] bg-[#FFF5F6] text-[var(--sofya-tag-red)]"
+      default: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-tone-default-foreground)]",
+      info: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-[color:var(--sofya-tone-info-foreground)]",
+      success: "border-[color:var(--sofya-tone-success-border)] bg-[color:var(--sofya-tone-success-background)] text-[color:var(--sofya-tone-success-foreground)]",
+      warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-[color:var(--sofya-tone-warning-foreground)]",
+      destructive: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-[color:var(--sofya-tone-destructive-foreground)]"
     }
   },
   defaultVariants: {
@@ -686,7 +686,10 @@ var Alert = React5.forwardRef(function Alert2({
       "data-slot": "alert",
       "data-tone": resolvedTone,
       role: resolvedRole,
-      className: cn(alertVariants({ size: resolvedSize, tone: resolvedTone }), className),
+      className: cn(
+        alertVariants({ size: resolvedSize, tone: resolvedTone }),
+        className
+      ),
       ...props,
       children: [
         resolvedIcon ? /* @__PURE__ */ jsx5(
@@ -702,29 +705,27 @@ var Alert = React5.forwardRef(function Alert2({
     }
   );
 });
-var AlertTitle = React5.forwardRef(
-  function AlertTitle2({ children, className, ...props }, ref) {
-    return /* @__PURE__ */ jsx5(
-      "div",
-      {
-        ref,
-        "data-slot": "alert-title",
-        className: cn("text-current", className),
-        ...props,
-        children: renderTextContent(children, {
-          as: "span",
-          className: "block text-current",
-          size: "h4",
-          style: {
-            fontWeight: 500,
-            lineHeight: "22px",
-            letterSpacing: "-0.02em"
-          }
-        })
-      }
-    );
-  }
-);
+var AlertTitle = React5.forwardRef(function AlertTitle2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-title",
+      className: cn("text-current", className),
+      ...props,
+      children: renderTextContent(children, {
+        as: "span",
+        className: "block text-current",
+        size: "h4",
+        style: {
+          fontWeight: 500,
+          lineHeight: "22px",
+          letterSpacing: "-0.02em"
+        }
+      })
+    }
+  );
+});
 var AlertDescription = React5.forwardRef(function AlertDescription2({ children, className, ...props }, ref) {
   return /* @__PURE__ */ jsx5(
     "div",
@@ -767,7 +768,7 @@ var badgeVariants = cva3(
   {
     variants: {
       variant: {
-        default: "border-transparent bg-[rgba(123,93,193,0.1)] text-[color:var(--sofya-tag-violet)]",
+        default: "border-transparent bg-accent/10 text-accent",
         secondary: "border-transparent bg-secondary text-secondary-foreground",
         outline: "border border-border bg-background text-foreground",
         success: "border-transparent bg-success/10 text-success",
@@ -786,9 +787,9 @@ var badgeAlertVariants = cva3(
   {
     variants: {
       alert: {
-        default: "border-transparent bg-[rgba(123,93,193,0.1)] text-[color:var(--sofya-tag-violet)]",
-        medium: "border-transparent bg-[#F2F1CE] text-[color:var(--sofya-tag-sand)]",
-        high: "border-transparent bg-[#F2CED5] text-[color:var(--sofya-tag-red)]"
+        default: "border-transparent bg-accent/10 text-accent",
+        medium: "border-transparent bg-[color:var(--sofya-tone-warning-background)] text-warning",
+        high: "border-transparent bg-[color:var(--sofya-tone-destructive-background)] text-destructive"
       }
     },
     defaultVariants: {
@@ -801,8 +802,8 @@ var badgePillVariants = cva3(
   {
     variants: {
       tone: {
-        neutral: "border-[rgba(226,232,240,0.5)] bg-[#F8FAFC] text-[#202021]",
-        danger: "border-[rgba(254,226,226,0.5)] bg-[#FFE7E3] text-[#D74F36]"
+        neutral: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-tone-default-foreground)]",
+        danger: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-[color:var(--sofya-tone-destructive-foreground)]"
       }
     },
     defaultVariants: {
@@ -958,15 +959,15 @@ var buttonVariantOptions = [
 ];
 var buttonSizeOptions = ["default", "sm", "lg", "icon"];
 var buttonRippleVariantClasses = {
-  default: "bg-white/82 mix-blend-screen",
-  gradient: "bg-white/80 mix-blend-screen",
-  dropdown: "bg-[#3A63E0]/36",
-  icon: "bg-primary/34",
-  language: "bg-white/76 mix-blend-screen",
-  secondary: "bg-primary/30",
-  outline: "bg-primary/32",
-  ghost: "bg-primary/28",
-  destructive: "bg-white/78 mix-blend-screen"
+  default: "bg-[hsl(var(--sofya-primary-foreground)/0.82)] mix-blend-screen",
+  gradient: "bg-[hsl(var(--sofya-primary-foreground)/0.8)] mix-blend-screen",
+  dropdown: "bg-[hsl(var(--sofya-primary)/0.36)]",
+  icon: "bg-[hsl(var(--sofya-primary)/0.34)]",
+  language: "bg-[hsl(var(--sofya-background)/0.76)] mix-blend-screen",
+  secondary: "bg-[hsl(var(--sofya-primary)/0.30)]",
+  outline: "bg-[hsl(var(--sofya-primary)/0.32)]",
+  ghost: "bg-[hsl(var(--sofya-primary)/0.28)]",
+  destructive: "bg-[hsl(var(--sofya-destructive-foreground)/0.78)] mix-blend-screen"
 };
 var buttonVariants = cva4(
   "relative isolate inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-full text-[14px] font-medium leading-5 tracking-[0.025em] transform-gpu transition-[width,transform,filter,background-color,border-color,color,box-shadow] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
@@ -975,7 +976,7 @@ var buttonVariants = cva4(
       variant: {
         default: "bg-primary text-primary-foreground hover:brightness-[1.04]",
         gradient: "sofya-gradient-motion [--sofya-gradient-motion-duration:4s] bg-[linear-gradient(90deg,hsl(var(--sofya-button-gradient-from))_0%,hsl(var(--sofya-button-gradient-to))_100%)] text-primary-foreground hover:brightness-[1.05]",
-        dropdown: "justify-between border border-[#E3EAFF] bg-white font-normal tracking-normal text-[#6B86D6] shadow-none hover:bg-white hover:border-[#E3EAFF]",
+        dropdown: "justify-between border border-[color:var(--sofya-border-strong)] bg-card font-normal tracking-normal text-primary shadow-none hover:bg-card hover:border-[color:var(--sofya-border-strong)]",
         icon: "border-0 bg-primary/10 text-primary shadow-sofya-sm hover:bg-primary/15",
         language: "border-0 bg-muted bg-cover bg-center bg-no-repeat text-primary-foreground shadow-none hover:brightness-[1.03]",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/85",
@@ -1015,12 +1016,17 @@ var buttonRippleBaseSize = {
   lg: 22,
   icon: 18
 };
-function ButtonSpinner({ size }) {
+function ButtonSpinner({
+  size
+}) {
   return /* @__PURE__ */ jsxs4(
     "svg",
     {
       "aria-hidden": "true",
-      className: cn("animate-spin text-current", loadingSpinnerSizeClasses[size]),
+      className: cn(
+        "animate-spin text-current",
+        loadingSpinnerSizeClasses[size]
+      ),
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -1098,11 +1104,11 @@ var Button = React6.forwardRef(
     const hideContent = loadingPhase === "hiding-content" || loadingPhase === "collapsing" || loadingPhase === "loading" || loadingPhase === "hiding-spinner" || loadingPhase === "expanding";
     const showSpinner = loadingPhase === "loading";
     const iconOnlyActionClassName = isIconOnlyAction ? cn(
-      "h-10 w-10 rounded-[10px] border-0 p-2 text-[#6B86D6] shadow-none",
-      active ? "bg-[#E3EAFF] hover:bg-[#E3EAFF]" : "bg-transparent hover:bg-transparent"
+      "h-10 w-10 rounded-[10px] border-0 p-2 text-primary shadow-none",
+      active ? "bg-[color:var(--sofya-surface-selected)] hover:bg-[color:var(--sofya-surface-selected)]" : "bg-transparent hover:bg-transparent"
     ) : void 0;
     const languageButtonClassName = isLanguageButton ? cn(
-      "min-w-0 overflow-hidden border-0 text-white shadow-none",
+      "min-w-0 overflow-hidden border-0 text-primary-foreground shadow-none",
       languageButtonSizeClasses[resolvedSize]
     ) : void 0;
     const resolvedButtonStyle = {
@@ -1133,7 +1139,10 @@ var Button = React6.forwardRef(
           Math.hypot(rect.width - x, rect.height - y)
         );
         const baseSize = buttonRippleBaseSize[resolvedSize];
-        const finalDiameter = Math.max(radius * 2 + 24, Math.max(rect.width, rect.height) + 18);
+        const finalDiameter = Math.max(
+          radius * 2 + 24,
+          Math.max(rect.width, rect.height) + 18
+        );
         setRipples((currentRipples) => [
           ...currentRipples,
           {
@@ -1154,7 +1163,11 @@ var Button = React6.forwardRef(
           return;
         }
         if (event.button === 0) {
-          createRipple(event.currentTarget, event.clientX, event.clientY);
+          createRipple(
+            event.currentTarget,
+            event.clientX,
+            event.clientY
+          );
         }
       },
       [createRipple, isDisabled, onPointerDown]
@@ -1178,7 +1191,10 @@ var Button = React6.forwardRef(
         frameRef.current = null;
       }
     }, []);
-    React6.useImperativeHandle(ref, () => buttonRef.current);
+    React6.useImperativeHandle(
+      ref,
+      () => buttonRef.current
+    );
     React6.useLayoutEffect(() => {
       const element = buttonRef.current;
       if (element && loadingPhase === "idle" && !loading) {
@@ -1289,7 +1305,11 @@ var Button = React6.forwardRef(
                   ),
                   initial: prefersReducedMotion ? { opacity: 0.32, scale: 0.72 } : { opacity: 0.56, scale: 0 },
                   animate: prefersReducedMotion ? { opacity: 0, scale: 1.02 } : { opacity: [0.56, 0.26, 0], scale: ripple.scale },
-                  transition: prefersReducedMotion ? { duration: 0.2, ease: "linear" } : { duration: 0.62, times: [0, 0.35, 1], ease: [0.16, 1, 0.3, 1] },
+                  transition: prefersReducedMotion ? { duration: 0.2, ease: "linear" } : {
+                    duration: 0.62,
+                    times: [0, 0.35, 1],
+                    ease: [0.16, 1, 0.3, 1]
+                  },
                   style: {
                     height: ripple.size,
                     left: ripple.x,
@@ -1452,143 +1472,147 @@ function CardFooter({ children, className, ...props }) {
 // src/components/checkbox.tsx
 import * as React8 from "react";
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var Checkbox = React8.forwardRef(function Checkbox2({
-  checked,
-  className,
-  defaultChecked,
-  description,
-  descriptionClassName,
-  disabled,
-  id,
-  label,
-  labelClassName,
-  ...props
-}, ref) {
-  const generatedId = React8.useId();
-  const resolvedId = id ?? generatedId;
-  const descriptionId = description ? `${resolvedId}-description` : void 0;
-  const alignClassName = description ? "items-start" : "items-center";
-  const indicatorOffsetClassName = "";
-  return /* @__PURE__ */ jsxs5(
-    "label",
-    {
-      htmlFor: resolvedId,
-      className: cn(
-        "flex w-fit gap-4",
-        alignClassName,
-        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx10(
-          "input",
-          {
-            ref,
-            id: resolvedId,
-            type: "checkbox",
-            className: "peer sr-only",
-            checked,
-            defaultChecked,
-            disabled,
-            "aria-describedby": descriptionId,
-            ...props
-          }
-        ),
-        /* @__PURE__ */ jsx10(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: cn(
-              "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-[8px] border border-[#D9E2FA] bg-card text-transparent transition-[background-color,border-color,box-shadow,color] duration-sofya ease-sofya peer-checked:border-primary peer-checked:bg-primary peer-checked:text-primary-foreground peer-focus-visible:ring-2 peer-focus-visible:ring-[#D9E2FA]/60 peer-focus-visible:ring-offset-0",
-              indicatorOffsetClassName
-            ),
-            children: /* @__PURE__ */ jsx10(
-              "svg",
-              {
-                viewBox: "0 0 16 16",
-                fill: "none",
-                xmlns: "http://www.w3.org/2000/svg",
-                className: "h-4 w-4 shrink-0",
-                children: /* @__PURE__ */ jsx10(
-                  "path",
-                  {
-                    d: "M2.75 8.25L6.4 11.9L13.35 4.95",
-                    stroke: "currentColor",
-                    strokeWidth: "2.4",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                )
-              }
-            )
-          }
+var Checkbox = React8.forwardRef(
+  function Checkbox2({
+    checked,
+    className,
+    defaultChecked,
+    description,
+    descriptionClassName,
+    disabled,
+    id,
+    label,
+    labelClassName,
+    ...props
+  }, ref) {
+    const generatedId = React8.useId();
+    const resolvedId = id ?? generatedId;
+    const descriptionId = description ? `${resolvedId}-description` : void 0;
+    const alignClassName = description ? "items-start" : "items-center";
+    const indicatorOffsetClassName = "";
+    return /* @__PURE__ */ jsxs5(
+      "label",
+      {
+        htmlFor: resolvedId,
+        className: cn(
+          "flex w-fit gap-4",
+          alignClassName,
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          className
         ),
-        label || description ? /* @__PURE__ */ jsxs5("span", { className: "grid gap-2", children: [
-          label ? /* @__PURE__ */ jsx10(
-            "span",
+        children: [
+          /* @__PURE__ */ jsx10(
+            "input",
             {
-              className: cn(
-                "text-[var(--sofya-tag-navy)] [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-[3px]",
-                labelClassName
-              ),
-              children: renderTextContent(label, {
-                as: "span",
-                className: "text-[var(--sofya-tag-navy)]",
-                size: "h4",
-                style: {
-                  fontWeight: 400,
-                  lineHeight: "22px",
-                  letterSpacing: "-0.02em"
-                }
-              })
+              ref,
+              id: resolvedId,
+              type: "checkbox",
+              className: "peer sr-only",
+              checked,
+              defaultChecked,
+              disabled,
+              "aria-describedby": descriptionId,
+              ...props
             }
-          ) : null,
-          description ? /* @__PURE__ */ jsx10(
+          ),
+          /* @__PURE__ */ jsx10(
             "span",
             {
-              id: descriptionId,
+              "aria-hidden": "true",
               className: cn(
-                "text-muted-foreground",
-                descriptionClassName
+                "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-[8px] border border-[color:var(--sofya-border-strong)] bg-card text-transparent transition-[background-color,border-color,box-shadow,color] duration-sofya ease-sofya peer-checked:border-primary peer-checked:bg-primary peer-checked:text-primary-foreground peer-focus-visible:ring-2 peer-focus-visible:ring-[color:var(--sofya-focus-ring-soft)] peer-focus-visible:ring-offset-0",
+                indicatorOffsetClassName
               ),
-              children: renderTextContent(description, {
-                as: "span",
-                className: "text-muted-foreground",
-                size: "body",
-                style: {
-                  lineHeight: "20px"
+              children: /* @__PURE__ */ jsx10(
+                "svg",
+                {
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-4 w-4 shrink-0",
+                  children: /* @__PURE__ */ jsx10(
+                    "path",
+                    {
+                      d: "M2.75 8.25L6.4 11.9L13.35 4.95",
+                      stroke: "currentColor",
+                      strokeWidth: "2.4",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
                 }
-              })
+              )
             }
-          ) : null
-        ] }) : null
-      ]
-    }
-  );
-});
+          ),
+          label || description ? /* @__PURE__ */ jsxs5("span", { className: "grid gap-2", children: [
+            label ? /* @__PURE__ */ jsx10(
+              "span",
+              {
+                className: cn(
+                  "text-[color:var(--sofya-text-default)] [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-[3px]",
+                  labelClassName
+                ),
+                children: renderTextContent(label, {
+                  as: "span",
+                  className: "text-[color:var(--sofya-text-default)]",
+                  size: "h4",
+                  style: {
+                    fontWeight: 400,
+                    lineHeight: "22px",
+                    letterSpacing: "-0.02em"
+                  }
+                })
+              }
+            ) : null,
+            description ? /* @__PURE__ */ jsx10(
+              "span",
+              {
+                id: descriptionId,
+                className: cn("text-muted-foreground", descriptionClassName),
+                children: renderTextContent(description, {
+                  as: "span",
+                  className: "text-muted-foreground",
+                  size: "body",
+                  style: {
+                    lineHeight: "20px"
+                  }
+                })
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
 Checkbox.displayName = "Checkbox";
 
 // src/components/dropdown.tsx
 import * as React9 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var dropdownVariantOptions = ["card", "panel", "language", "selected"];
+var dropdownVariantOptions = [
+  "card",
+  "panel",
+  "language",
+  "selected"
+];
 var dropdownLanguageItems = [
   { value: "en-US", label: "English", languageLocale: "en-US" },
   { value: "pt-BR", label: "Portuguese", languageLocale: "pt-BR" },
   { value: "es-ES", label: "Spanish", languageLocale: "es-ES" }
 ];
 var dropdownTriggerClasses = {
-  card: "h-12 rounded-[20px] px-6 py-2 text-[#6B86D6]",
+  card: "h-12 rounded-[20px] px-6 py-2 text-primary",
   panel: "h-12 rounded-[10px] px-6 py-2 text-foreground",
   language: "",
-  selected: "h-10 w-full rounded-[10px] border-[#D9E2FA] px-4 py-2 text-[14px] font-normal leading-[22px] tracking-[-0.02em]"
+  selected: "h-10 w-full rounded-[10px] border-[color:var(--sofya-border-strong)] px-4 py-2 text-[14px] font-normal leading-[22px] tracking-[-0.02em]"
 };
 var dropdownContentClasses = {
-  card: "rounded-[20px] border-[#E3EAFF] text-foreground shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.06)]",
-  panel: "rounded-[10px] border-[#E3EAFF] text-foreground shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.06)]",
-  language: "w-[224px] min-w-[224px] rounded-[10px] border-[#E3EAFF] text-foreground shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.06)]",
-  selected: "w-[var(--radix-dropdown-menu-trigger-width)] min-w-[var(--radix-dropdown-menu-trigger-width)] rounded-[10px] border-[#D9E2FA] text-foreground shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.06)]"
+  card: "rounded-[20px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]",
+  panel: "rounded-[10px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]",
+  language: "w-[224px] min-w-[224px] rounded-[10px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]",
+  selected: "w-[var(--radix-dropdown-menu-trigger-width)] min-w-[var(--radix-dropdown-menu-trigger-width)] rounded-[10px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]"
 };
 var dropdownItemClasses = {
   card: "text-foreground",
@@ -1610,7 +1634,13 @@ function resolveItemLanguageLocale(item) {
 }
 function DefaultDropdownTriggerIcon({ variant }) {
   if (variant === "selected") {
-    return /* @__PURE__ */ jsx11(Icon, { name: "caret-down", className: "h-[6px] w-[11px] text-[#7D87A8]" });
+    return /* @__PURE__ */ jsx11(
+      Icon,
+      {
+        name: "caret-down",
+        className: "h-[6px] w-[11px] text-[color:var(--sofya-text-subtle)]"
+      }
+    );
   }
   return /* @__PURE__ */ jsx11("span", { className: "flex h-8 w-8 items-center justify-center rounded-[6px]", children: /* @__PURE__ */ jsx11(Icon, { name: "caret-down", className: "!h-4 !w-4" }) });
 }
@@ -1658,10 +1688,14 @@ function Dropdown({
     [isLanguageVariant, items]
   );
   const defaultUncontrolledValue = defaultValue ?? (isLanguageVariant ? resolvedItems[0]?.value : void 0);
-  const [internalValue, setInternalValue] = React9.useState(defaultUncontrolledValue);
+  const [internalValue, setInternalValue] = React9.useState(
+    defaultUncontrolledValue
+  );
   const selectedValue = value ?? internalValue;
   const radioValue = selectedValue ?? "";
-  const selectedItem = resolvedItems.find((item) => item.value === selectedValue);
+  const selectedItem = resolvedItems.find(
+    (item) => item.value === selectedValue
+  );
   const hasSelectedItem = selectedItem !== void 0;
   const selectedLanguageLocale = resolveItemLanguageLocale(selectedItem);
   React9.useEffect(() => {
@@ -1675,7 +1709,7 @@ function Dropdown({
   }, [defaultUncontrolledValue, internalValue, resolvedItems, value]);
   const resolvedTriggerIcon = isLanguageVariant ? void 0 : triggerIcon === void 0 ? /* @__PURE__ */ jsx11(DefaultDropdownTriggerIcon, { variant }) : triggerIcon;
   const triggerLabel = selectedItem?.triggerLabel ?? selectedItem?.label ?? placeholder;
-  const selectedTriggerToneClassName = isSelectedVariant ? hasSelectedItem ? "text-foreground" : "text-[#7D87A8]" : void 0;
+  const selectedTriggerToneClassName = isSelectedVariant ? hasSelectedItem ? "text-foreground" : "text-[color:var(--sofya-text-soft)]" : void 0;
   function handleValueChange(nextValue) {
     if (value === void 0) {
       setInternalValue(nextValue);
@@ -1721,7 +1755,7 @@ function Dropdown({
             align,
             sideOffset,
             className: cn(
-              "sofya-dropdown-content z-50 w-auto min-w-[var(--radix-dropdown-menu-trigger-width)] border bg-white p-2 outline-none",
+              "sofya-dropdown-content z-50 w-auto min-w-[var(--radix-dropdown-menu-trigger-width)] border bg-card p-2 outline-none",
               dropdownContentClasses[variant],
               contentClassName
             ),
@@ -1743,7 +1777,7 @@ function Dropdown({
                       disabled: item.disabled,
                       className: cn(
                         "flex w-full cursor-pointer items-center rounded-[4px] text-[14px] font-normal leading-[normal] outline-none transition-colors duration-sofya ease-sofya data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
-                        usesDefaultListStyle ? "px-0 py-0 data-[highlighted]:bg-transparent [&[data-highlighted]_span[data-dropdown-item-body]]:bg-[#F5F4FA]" : "px-2 py-2 data-[highlighted]:bg-[#F5F8FF]",
+                        usesDefaultListStyle ? "px-0 py-0 data-[highlighted]:bg-transparent [&[data-highlighted]_span[data-dropdown-item-body]]:bg-[color:var(--sofya-surface-selected)]" : "px-2 py-2 data-[highlighted]:bg-[color:var(--sofya-surface-hover)]",
                         dropdownItemClasses[variant],
                         itemClassName
                       ),
@@ -1753,7 +1787,7 @@ function Dropdown({
                           "data-dropdown-item-body": true,
                           className: cn(
                             "inline-flex min-w-0 items-center gap-2 rounded-full px-4 py-2 transition-colors duration-sofya ease-sofya",
-                            isSelected ? "bg-[#F5F4FA]" : "bg-transparent"
+                            isSelected ? "bg-[color:var(--sofya-surface-selected)]" : "bg-transparent"
                           ),
                           children: [
                             itemIcon ? /* @__PURE__ */ jsx11("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
@@ -1795,7 +1829,7 @@ function Dropdown({
                             "aria-hidden": "true",
                             className: cn(
                               "flex h-4 w-4 shrink-0 items-center justify-center transition-opacity duration-sofya ease-sofya",
-                              variant === "language" && "text-[#6B86D6]",
+                              variant === "language" && "text-primary",
                               isSelected ? "opacity-100" : "opacity-0"
                             ),
                             children: indicator
@@ -2070,25 +2104,29 @@ var InputOTP = React12.forwardRef(({ className, containerClassName, ...props },
     OTPInput,
     {
       ref,
-      containerClassName: cn("flex items-center gap-4 has-[:disabled]:opacity-50", containerClassName),
+      containerClassName: cn(
+        "flex items-center gap-4 has-[:disabled]:opacity-50",
+        containerClassName
+      ),
       className: cn("disabled:cursor-not-allowed", className),
       ...props
     }
   );
 });
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React12.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx14(
-      "div",
-      {
-        ref,
-        className: cn("flex overflow-hidden rounded-[12px] border border-[#C9D5FF] bg-card", className),
-        ...props
-      }
-    );
-  }
-);
+var InputOTPGroup = React12.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex overflow-hidden rounded-[12px] border border-[color:var(--sofya-border-hover)] bg-card",
+        className
+      ),
+      ...props
+    }
+  );
+});
 InputOTPGroup.displayName = "InputOTPGroup";
 var InputOTPSlot = React12.forwardRef(
   ({ className, index, ...props }, ref) => {
@@ -2100,7 +2138,7 @@ var InputOTPSlot = React12.forwardRef(
         {
           ref,
           className: cn(
-            "relative flex h-[92px] w-[96px] items-center justify-center border-r border-[#D9E2FA] bg-card last:border-r-0",
+            "relative flex h-[92px] w-[96px] items-center justify-center border-r border-[color:var(--sofya-border-strong)] bg-card last:border-r-0",
             className
           ),
           ...props
@@ -2112,39 +2150,45 @@ var InputOTPSlot = React12.forwardRef(
       {
         ref,
         className: cn(
-          "relative flex h-[92px] w-[96px] items-center justify-center border-r border-[#D9E2FA] bg-card text-[40px] font-medium leading-none tracking-[-0.04em] text-[var(--sofya-tag-navy)] transition-[background-color,box-shadow,border-color,color] duration-sofya ease-sofya last:border-r-0",
-          slot.isActive && "z-10 border-transparent bg-[#F7FAFF] text-[#274FC6] shadow-[inset_0_0_0_1px_rgba(201,213,255,0.95),0_16px_32px_-24px_rgba(93,129,236,0.55)] ring-2 ring-inset ring-[#D9E2FA]/95",
+          "relative flex h-[92px] w-[96px] items-center justify-center border-r border-[color:var(--sofya-border-strong)] bg-card text-[40px] font-medium leading-none tracking-[-0.04em] text-[color:var(--sofya-text-default)] transition-[background-color,box-shadow,border-color,color] duration-sofya ease-sofya last:border-r-0",
+          slot.isActive && "z-10 border-transparent bg-[color:var(--sofya-surface-hover)] text-primary shadow-[var(--sofya-shadow-otp-focus)] ring-2 ring-inset ring-[color:var(--sofya-focus-ring-strong)]",
           className
         ),
         ...props,
         children: [
           slot.char ?? null,
-          slot.hasFakeCaret ? /* @__PURE__ */ jsx14("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx14("div", { className: "h-10 w-[2px] animate-pulse rounded-full bg-[#356FD4] shadow-[0_0_14px_rgba(53,111,212,0.32)]" }) }) : null
+          slot.hasFakeCaret ? /* @__PURE__ */ jsx14("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx14("div", { className: "h-10 w-[2px] animate-pulse rounded-full bg-primary shadow-[var(--sofya-shadow-caret-glow)]" }) }) : null
         ]
       }
     );
   }
 );
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React12.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx14(
-      "div",
-      {
-        ref,
-        role: "separator",
-        className: cn("flex items-center justify-center px-2 text-[28px] leading-none text-[#4B5576]", className),
-        ...props,
-        children: /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: "." })
-      }
-    );
-  }
-);
+var InputOTPSeparator = React12.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      ref,
+      role: "separator",
+      className: cn(
+        "flex items-center justify-center px-2 text-[28px] leading-none text-[color:var(--sofya-text-soft)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: "." })
+    }
+  );
+});
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/input.tsx
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
-var inputVariantOptions = ["default", "search", "otp", "upload"];
+var inputVariantOptions = [
+  "default",
+  "search",
+  "otp",
+  "upload"
+];
 var uploadKindOptions = ["document", "image", "video"];
 var uploadAcceptByKind = {
   document: ".pdf,.doc,.docx,.txt,.rtf,.odt,.jpg,.jpeg,.png,.webp,.gif",
@@ -2161,7 +2205,14 @@ var uploadAriaLabelByKind = {
   image: "Upload de imagem",
   video: "Upload de video"
 };
-var uploadDocumentExtensions = /* @__PURE__ */ new Set(["pdf", "doc", "docx", "txt", "rtf", "odt"]);
+var uploadDocumentExtensions = /* @__PURE__ */ new Set([
+  "pdf",
+  "doc",
+  "docx",
+  "txt",
+  "rtf",
+  "odt"
+]);
 var uploadImageExtensions = /* @__PURE__ */ new Set(["jpg", "jpeg", "png", "webp", "gif"]);
 var uploadVideoExtensions = /* @__PURE__ */ new Set(["mp4", "mov", "avi", "webm", "m4v"]);
 function resolveUploadFileExtension(file) {
@@ -2244,11 +2295,14 @@ function InputShell({
     label ? /* @__PURE__ */ jsx15(
       "label",
       {
-        className: cn("text-[var(--sofya-tag-navy)]", labelClassName),
+        className: cn(
+          "text-[color:var(--sofya-text-default)]",
+          labelClassName
+        ),
         htmlFor: resolvedId,
         children: renderTextContent(label, {
           as: "span",
-          className: "block text-[var(--sofya-tag-navy)]",
+          className: "block text-[color:var(--sofya-text-default)]",
           size: "h4",
           style: {
             fontWeight: 500,
@@ -2275,11 +2329,14 @@ function UploadInputShell({
     label || optionalLabel ? /* @__PURE__ */ jsxs10(
       "div",
       {
-        className: cn("text-[#5B6C92]", labelClassName),
+        className: cn(
+          "text-[color:var(--sofya-text-default)]",
+          labelClassName
+        ),
         children: [
           renderTextContent(label, {
             as: "span",
-            className: "text-[#5B6C92]",
+            className: "text-[color:var(--sofya-text-default)]",
             size: "body",
             style: {
               fontWeight: 700,
@@ -2287,9 +2344,9 @@ function UploadInputShell({
               letterSpacing: "-0.02em"
             }
           }),
-          optionalLabel ? /* @__PURE__ */ jsx15("span", { className: "ml-2 text-[#8C99B7]", children: renderTextContent(optionalLabel, {
+          optionalLabel ? /* @__PURE__ */ jsx15("span", { className: "ml-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(optionalLabel, {
             as: "span",
-            className: "text-[#8C99B7]",
+            className: "text-[color:var(--sofya-text-subtle)]",
             size: "tiny",
             style: {
               fontWeight: 400,
@@ -2340,7 +2397,18 @@ function UploadFileTypeGlyph({
         viewBox: "0 0 18 18",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
-          /* @__PURE__ */ jsx15("rect", { x: "2.5", y: "3", width: "13", height: "12", rx: "2.5", stroke: "currentColor", strokeWidth: "1.5" }),
+          /* @__PURE__ */ jsx15(
+            "rect",
+            {
+              x: "2.5",
+              y: "3",
+              width: "13",
+              height: "12",
+              rx: "2.5",
+              stroke: "currentColor",
+              strokeWidth: "1.5"
+            }
+          ),
           /* @__PURE__ */ jsx15("circle", { cx: "6.75", cy: "7.25", r: "1.25", fill: "currentColor" }),
           /* @__PURE__ */ jsx15(
             "path",
@@ -2367,7 +2435,18 @@ function UploadFileTypeGlyph({
         viewBox: "0 0 18 18",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
-          /* @__PURE__ */ jsx15("rect", { x: "2.5", y: "4", width: "13", height: "10", rx: "2.5", stroke: "currentColor", strokeWidth: "1.5" }),
+          /* @__PURE__ */ jsx15(
+            "rect",
+            {
+              x: "2.5",
+              y: "4",
+              width: "13",
+              height: "10",
+              rx: "2.5",
+              stroke: "currentColor",
+              strokeWidth: "1.5"
+            }
+          ),
           /* @__PURE__ */ jsx15(
             "path",
             {
@@ -2421,295 +2500,307 @@ function UploadFileTypeGlyph({
     }
   );
 }
-var UploadInputControl = React13.forwardRef(
-  function UploadInputControl2({
-    accept,
-    "aria-label": ariaLabel,
-    className,
-    disabled,
-    multiple,
-    onChange,
-    onFilesChange,
-    uploadDescription,
-    uploadKind = "document",
-    uploadTitle,
-    resolvedId,
-    ...uploadProps
-  }, ref) {
-    const inputRef = React13.useRef(null);
-    const [isDragActive, setIsDragActive] = React13.useState(false);
-    const [selectedFiles, setSelectedFiles] = React13.useState([]);
-    const resolvedMultiple = multiple ?? true;
-    const prefersReducedMotion = useReducedMotion2();
-    React13.useImperativeHandle(ref, () => inputRef.current);
-    const resolvedAccept = accept ?? uploadAcceptByKind[uploadKind];
-    const resolvedAriaLabel = ariaLabel ?? uploadAriaLabelByKind[uploadKind];
-    const resolvedTitle = uploadTitle ?? "Arraste arquivos aqui ou clique para selecionar";
-    const resolvedDescription = uploadDescription ?? uploadDescriptionByKind[uploadKind];
-    const syncSelectedFiles = React13.useCallback(
-      (files) => {
-        const normalizedFiles = resolvedMultiple ? files : files.slice(0, 1);
-        setSelectedFiles(normalizedFiles);
-        onFilesChange?.(normalizedFiles);
-      },
-      [onFilesChange, resolvedMultiple]
-    );
-    const applyFilesToInput = React13.useCallback((files) => {
-      const inputElement = inputRef.current;
-      if (!inputElement || typeof DataTransfer === "undefined") {
-        return false;
+var UploadInputControl = React13.forwardRef(function UploadInputControl2({
+  accept,
+  "aria-label": ariaLabel,
+  className,
+  disabled,
+  multiple,
+  onChange,
+  onFilesChange,
+  uploadDescription,
+  uploadKind = "document",
+  uploadTitle,
+  resolvedId,
+  ...uploadProps
+}, ref) {
+  const inputRef = React13.useRef(null);
+  const [isDragActive, setIsDragActive] = React13.useState(false);
+  const [selectedFiles, setSelectedFiles] = React13.useState([]);
+  const resolvedMultiple = multiple ?? true;
+  const prefersReducedMotion = useReducedMotion2();
+  React13.useImperativeHandle(ref, () => inputRef.current);
+  const resolvedAccept = accept ?? uploadAcceptByKind[uploadKind];
+  const resolvedAriaLabel = ariaLabel ?? uploadAriaLabelByKind[uploadKind];
+  const resolvedTitle = uploadTitle ?? "Arraste arquivos aqui ou clique para selecionar";
+  const resolvedDescription = uploadDescription ?? uploadDescriptionByKind[uploadKind];
+  const syncSelectedFiles = React13.useCallback(
+    (files) => {
+      const normalizedFiles = resolvedMultiple ? files : files.slice(0, 1);
+      setSelectedFiles(normalizedFiles);
+      onFilesChange?.(normalizedFiles);
+    },
+    [onFilesChange, resolvedMultiple]
+  );
+  const applyFilesToInput = React13.useCallback((files) => {
+    const inputElement = inputRef.current;
+    if (!inputElement || typeof DataTransfer === "undefined") {
+      return false;
+    }
+    try {
+      const transfer = new DataTransfer();
+      files.forEach((file) => {
+        transfer.items.add(file);
+      });
+      inputElement.files = transfer.files;
+      if (!files.length) {
+        inputElement.value = "";
       }
-      try {
-        const transfer = new DataTransfer();
-        files.forEach((file) => {
-          transfer.items.add(file);
-        });
-        inputElement.files = transfer.files;
-        if (!files.length) {
-          inputElement.value = "";
-        }
-        return true;
-      } catch {
-        return false;
+      return true;
+    } catch {
+      return false;
+    }
+  }, []);
+  const handleInputChange = React13.useCallback(
+    (event) => {
+      const nextFiles = mergeUploadFiles(
+        selectedFiles,
+        Array.from(event.currentTarget.files ?? []),
+        resolvedMultiple
+      );
+      applyFilesToInput(nextFiles);
+      onChange?.(event);
+      syncSelectedFiles(nextFiles);
+    },
+    [
+      applyFilesToInput,
+      onChange,
+      resolvedMultiple,
+      selectedFiles,
+      syncSelectedFiles
+    ]
+  );
+  const openPicker = React13.useCallback(() => {
+    if (!disabled) {
+      inputRef.current?.click();
+    }
+  }, [disabled]);
+  const handleKeyDown = React13.useCallback(
+    (event) => {
+      if (disabled) {
+        return;
       }
-    }, []);
-    const handleInputChange = React13.useCallback(
-      (event) => {
-        const nextFiles = mergeUploadFiles(
-          selectedFiles,
-          Array.from(event.currentTarget.files ?? []),
-          resolvedMultiple
-        );
-        applyFilesToInput(nextFiles);
-        onChange?.(event);
-        syncSelectedFiles(nextFiles);
-      },
-      [applyFilesToInput, onChange, resolvedMultiple, selectedFiles, syncSelectedFiles]
-    );
-    const openPicker = React13.useCallback(() => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        openPicker();
+      }
+    },
+    [disabled, openPicker]
+  );
+  const handleDragEnter = React13.useCallback(
+    (event) => {
+      event.preventDefault();
       if (!disabled) {
-        inputRef.current?.click();
+        setIsDragActive(true);
       }
-    }, [disabled]);
-    const handleKeyDown = React13.useCallback(
-      (event) => {
-        if (disabled) {
-          return;
-        }
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          openPicker();
-        }
-      },
-      [disabled, openPicker]
-    );
-    const handleDragEnter = React13.useCallback(
-      (event) => {
-        event.preventDefault();
-        if (!disabled) {
-          setIsDragActive(true);
-        }
-      },
-      [disabled]
-    );
-    const handleDragLeave = React13.useCallback(
-      (event) => {
-        if (disabled) {
-          return;
-        }
-        const relatedTarget = event.relatedTarget;
-        if (relatedTarget instanceof Node && event.currentTarget.contains(relatedTarget)) {
-          return;
-        }
-        setIsDragActive(false);
-      },
-      [disabled]
-    );
-    const handleDragOver = React13.useCallback(
-      (event) => {
-        event.preventDefault();
-        if (disabled) {
-          return;
-        }
-        event.dataTransfer.dropEffect = "copy";
-        setIsDragActive(true);
-      },
-      [disabled]
-    );
-    const handleDrop = React13.useCallback(
-      (event) => {
-        event.preventDefault();
-        if (disabled) {
-          return;
-        }
-        setIsDragActive(false);
-        const droppedFiles = event.dataTransfer.files;
-        if (!droppedFiles?.length) {
-          return;
-        }
-        const nextFiles = mergeUploadFiles(
-          selectedFiles,
-          Array.from(droppedFiles),
-          resolvedMultiple
-        );
-        let dispatchedChangeEvent = false;
-        if (applyFilesToInput(nextFiles)) {
-          inputRef.current?.dispatchEvent(new Event("change", { bubbles: true }));
-          dispatchedChangeEvent = true;
-        }
-        if (!dispatchedChangeEvent) {
-          syncSelectedFiles(nextFiles);
-        }
-      },
-      [applyFilesToInput, disabled, resolvedMultiple, selectedFiles, syncSelectedFiles]
-    );
-    const handleRemoveFile = React13.useCallback(
-      (fileIndex) => {
-        if (disabled) {
-          return;
-        }
-        const nextFiles = selectedFiles.filter((_, index) => index !== fileIndex);
-        applyFilesToInput(nextFiles);
+    },
+    [disabled]
+  );
+  const handleDragLeave = React13.useCallback(
+    (event) => {
+      if (disabled) {
+        return;
+      }
+      const relatedTarget = event.relatedTarget;
+      if (relatedTarget instanceof Node && event.currentTarget.contains(relatedTarget)) {
+        return;
+      }
+      setIsDragActive(false);
+    },
+    [disabled]
+  );
+  const handleDragOver = React13.useCallback(
+    (event) => {
+      event.preventDefault();
+      if (disabled) {
+        return;
+      }
+      event.dataTransfer.dropEffect = "copy";
+      setIsDragActive(true);
+    },
+    [disabled]
+  );
+  const handleDrop = React13.useCallback(
+    (event) => {
+      event.preventDefault();
+      if (disabled) {
+        return;
+      }
+      setIsDragActive(false);
+      const droppedFiles = event.dataTransfer.files;
+      if (!droppedFiles?.length) {
+        return;
+      }
+      const nextFiles = mergeUploadFiles(
+        selectedFiles,
+        Array.from(droppedFiles),
+        resolvedMultiple
+      );
+      let dispatchedChangeEvent = false;
+      if (applyFilesToInput(nextFiles)) {
+        inputRef.current?.dispatchEvent(new Event("change", { bubbles: true }));
+        dispatchedChangeEvent = true;
+      }
+      if (!dispatchedChangeEvent) {
         syncSelectedFiles(nextFiles);
-      },
-      [applyFilesToInput, disabled, selectedFiles, syncSelectedFiles]
-    );
-    return /* @__PURE__ */ jsxs10("div", { className: "grid w-full gap-4", children: [
-      /* @__PURE__ */ jsx15(
-        "input",
-        {
-          ...uploadProps,
-          accept: resolvedAccept,
-          "aria-label": resolvedAriaLabel,
-          className: "sr-only",
-          disabled,
-          id: resolvedId,
-          multiple: resolvedMultiple,
-          ref: inputRef,
-          type: "file",
-          onChange: handleInputChange
-        }
-      ),
-      /* @__PURE__ */ jsxs10(
-        "label",
+      }
+    },
+    [
+      applyFilesToInput,
+      disabled,
+      resolvedMultiple,
+      selectedFiles,
+      syncSelectedFiles
+    ]
+  );
+  const handleRemoveFile = React13.useCallback(
+    (fileIndex) => {
+      if (disabled) {
+        return;
+      }
+      const nextFiles = selectedFiles.filter((_, index) => index !== fileIndex);
+      applyFilesToInput(nextFiles);
+      syncSelectedFiles(nextFiles);
+    },
+    [applyFilesToInput, disabled, selectedFiles, syncSelectedFiles]
+  );
+  return /* @__PURE__ */ jsxs10("div", { className: "grid w-full gap-4", children: [
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        ...uploadProps,
+        accept: resolvedAccept,
+        "aria-label": resolvedAriaLabel,
+        className: "sr-only",
+        disabled,
+        id: resolvedId,
+        multiple: resolvedMultiple,
+        ref: inputRef,
+        type: "file",
+        onChange: handleInputChange
+      }
+    ),
+    /* @__PURE__ */ jsxs10(
+      "label",
+      {
+        "aria-disabled": disabled || void 0,
+        className: cn(
+          "flex w-full flex-col items-center justify-center gap-2 overflow-clip rounded-[20px] border-2 border-dashed border-[color:var(--sofya-border-soft)] bg-[color:var(--sofya-tone-default-background)] px-4 py-4 text-center transition-[border-color,background-color,box-shadow,color] duration-sofya ease-sofya",
+          !disabled && "cursor-pointer hover:border-[color:var(--sofya-border-hover)] hover:bg-[color:var(--sofya-surface-hover)] focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-within:border-transparent focus-within:ring-2 focus-within:ring-[color:var(--sofya-focus-ring-soft)] active:border-transparent active:ring-2 active:ring-[color:var(--sofya-focus-ring-soft)]",
+          isDragActive && "border-[color:var(--sofya-border-hover)] bg-[color:var(--sofya-surface-selected)] shadow-[var(--sofya-shadow-dropzone-focus)]",
+          disabled && "cursor-not-allowed opacity-60",
+          className
+        ),
+        htmlFor: resolvedId,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx15("span", { className: "flex size-10 items-center justify-center rounded-[6px] p-2 text-[color:var(--sofya-text-default)]", children: /* @__PURE__ */ jsx15(UploadGlyph, { className: "size-[18px]" }) }),
+          /* @__PURE__ */ jsx15("span", { className: "text-[color:var(--sofya-text-default)]", children: renderTextContent(resolvedTitle, {
+            as: "span",
+            className: "block text-[color:var(--sofya-text-default)]",
+            size: "body",
+            style: {
+              fontWeight: 500,
+              lineHeight: "normal",
+              letterSpacing: "-0.02em"
+            }
+          }) }),
+          resolvedDescription ? /* @__PURE__ */ jsx15("span", { className: "text-[color:var(--sofya-text-subtle)]", children: renderTextContent(resolvedDescription, {
+            as: "span",
+            className: "block text-[color:var(--sofya-text-subtle)]",
+            size: "tiny",
+            style: {
+              fontWeight: 500,
+              lineHeight: "normal",
+              letterSpacing: "-0.02em"
+            }
+          }) }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx15(motion2.div, { layout: true, role: "list", className: "grid gap-4 overflow-hidden", children: /* @__PURE__ */ jsx15(AnimatePresence, { initial: false, children: selectedFiles.map((file, index) => {
+      const fileKey = resolveUploadFileSignature(file);
+      return /* @__PURE__ */ jsx15(
+        motion2.div,
         {
-          "aria-disabled": disabled || void 0,
-          className: cn(
-            "flex w-full flex-col items-center justify-center gap-2 overflow-clip rounded-[20px] border-2 border-dashed border-[#E3EAFF] bg-[#FBFCFF] px-4 py-4 text-center transition-[border-color,background-color,box-shadow,color] duration-sofya ease-sofya",
-            !disabled && "cursor-pointer hover:border-[#D1DBFF] hover:bg-[#F7F9FF] focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-[#D9E2FA]/60 focus-within:border-transparent focus-within:ring-2 focus-within:ring-[#D9E2FA]/60 active:border-transparent active:ring-2 active:ring-[#D9E2FA]/60",
-            isDragActive && "border-[#C9D5FF] bg-[#F4F7FF] shadow-[0_0_0_4px_rgba(227,234,255,0.45)]",
-            disabled && "cursor-not-allowed opacity-60",
-            className
-          ),
-          htmlFor: resolvedId,
-          role: "button",
-          tabIndex: disabled ? -1 : 0,
-          onDragEnter: handleDragEnter,
-          onDragLeave: handleDragLeave,
-          onDragOver: handleDragOver,
-          onDrop: handleDrop,
-          onKeyDown: handleKeyDown,
-          children: [
-            /* @__PURE__ */ jsx15("span", { className: "flex size-10 items-center justify-center rounded-[6px] p-2 text-black", children: /* @__PURE__ */ jsx15(UploadGlyph, { className: "size-[18px]" }) }),
-            /* @__PURE__ */ jsx15("span", { className: "text-black", children: renderTextContent(resolvedTitle, {
-              as: "span",
-              className: "block text-black",
-              size: "body",
-              style: {
-                fontWeight: 500,
-                lineHeight: "normal",
-                letterSpacing: "-0.02em"
-              }
-            }) }),
-            resolvedDescription ? /* @__PURE__ */ jsx15("span", { className: "text-[#8C99B7]", children: renderTextContent(resolvedDescription, {
-              as: "span",
-              className: "block text-[#8C99B7]",
-              size: "tiny",
-              style: {
-                fontWeight: 500,
-                lineHeight: "normal",
-                letterSpacing: "-0.02em"
+          layout: true,
+          role: "listitem",
+          className: "overflow-hidden",
+          initial: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.98, height: 0 },
+          animate: prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1, height: "auto" },
+          exit: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, scale: 0.98, height: 0 },
+          transition: uploadListItemTransition,
+          children: /* @__PURE__ */ jsxs10(Card, { variant: "panel", className: "flex items-center gap-4 p-4", children: [
+            /* @__PURE__ */ jsx15("span", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-[color:var(--sofya-surface-hover)] text-primary", children: /* @__PURE__ */ jsx15(
+              UploadFileTypeGlyph,
+              {
+                className: "size-[18px]",
+                kind: resolveUploadFileVisualKind(file, uploadKind)
               }
-            }) }) : null
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx15(motion2.div, { layout: true, role: "list", className: "grid gap-4 overflow-hidden", children: /* @__PURE__ */ jsx15(AnimatePresence, { initial: false, children: selectedFiles.map((file, index) => {
-        const fileKey = resolveUploadFileSignature(file);
-        return /* @__PURE__ */ jsx15(
-          motion2.div,
-          {
-            layout: true,
-            role: "listitem",
-            className: "overflow-hidden",
-            initial: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.98, height: 0 },
-            animate: prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1, height: "auto" },
-            exit: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, scale: 0.98, height: 0 },
-            transition: uploadListItemTransition,
-            children: /* @__PURE__ */ jsxs10(Card, { variant: "panel", className: "flex items-center gap-4 p-4", children: [
-              /* @__PURE__ */ jsx15("span", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-[#F4F7FF] text-[#6B86D6]", children: /* @__PURE__ */ jsx15(
-                UploadFileTypeGlyph,
-                {
-                  className: "size-[18px]",
-                  kind: resolveUploadFileVisualKind(file, uploadKind)
+            ) }),
+            /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx15("p", { className: "truncate text-[color:var(--sofya-text-default)]", children: renderTextContent(file.name, {
+                as: "span",
+                className: "block truncate text-[color:var(--sofya-text-default)]",
+                size: "body",
+                style: {
+                  fontWeight: 500,
+                  lineHeight: "normal",
+                  letterSpacing: "-0.02em"
                 }
-              ) }),
-              /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx15("p", { className: "truncate text-black", children: renderTextContent(file.name, {
+              }) }),
+              /* @__PURE__ */ jsx15("p", { className: "mt-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(
+                `${resolveUploadFileBadge(
+                  file
+                )} \xB7 ${formatUploadFileSize(file.size)}`,
+                {
                   as: "span",
-                  className: "block truncate text-black",
-                  size: "body",
+                  className: "block text-[color:var(--sofya-text-subtle)]",
+                  size: "tiny",
                   style: {
                     fontWeight: 500,
                     lineHeight: "normal",
                     letterSpacing: "-0.02em"
                   }
-                }) }),
-                /* @__PURE__ */ jsx15("p", { className: "mt-2 text-[#8C99B7]", children: renderTextContent(
-                  `${resolveUploadFileBadge(file)} \xB7 ${formatUploadFileSize(file.size)}`,
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx15(
+              "button",
+              {
+                "aria-label": `Remover ${file.name}`,
+                className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full text-[color:var(--sofya-text-subtle)] transition-colors duration-sofya ease-sofya hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)]",
+                disabled,
+                type: "button",
+                onClick: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  handleRemoveFile(index);
+                },
+                children: /* @__PURE__ */ jsx15(
+                  Icon,
                   {
-                    as: "span",
-                    className: "block text-[#8C99B7]",
-                    size: "tiny",
-                    style: {
-                      fontWeight: 500,
-                      lineHeight: "normal",
-                      letterSpacing: "-0.02em"
-                    }
+                    "aria-hidden": "true",
+                    color: "current",
+                    name: "x",
+                    size: 14
                   }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsx15(
-                "button",
-                {
-                  "aria-label": `Remover ${file.name}`,
-                  className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full text-[#8C99B7] transition-colors duration-sofya ease-sofya hover:bg-[#F4F7FF] hover:text-[var(--sofya-tag-navy)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D9E2FA]/60",
-                  disabled,
-                  type: "button",
-                  onClick: (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    handleRemoveFile(index);
-                  },
-                  children: /* @__PURE__ */ jsx15(
-                    Icon,
-                    {
-                      "aria-hidden": "true",
-                      color: "current",
-                      name: "x",
-                      size: 14
-                    }
-                  )
-                }
-              )
-            ] })
-          },
-          fileKey
-        );
-      }) }) })
-    ] });
-  }
-);
+                )
+              }
+            )
+          ] })
+        },
+        fileKey
+      );
+    }) }) })
+  ] });
+});
 UploadInputControl.displayName = "UploadInputControl";
 var Input = React13.forwardRef((props, ref) => {
   const generatedId = React13.useId();
@@ -2762,14 +2853,17 @@ var Input = React13.forwardRef((props, ref) => {
             `otp-leading-${index}`
           )) }),
           hasTrailingGroup ? otpSeparator ?? /* @__PURE__ */ jsx15(InputOTPSeparator, { className: otpSeparatorClassName }) : null,
-          hasTrailingGroup ? /* @__PURE__ */ jsx15(InputOTPGroup, { className: otpGroupClassName, children: Array.from({ length: resolvedLength - resolvedSplitIndex }, (_, index) => /* @__PURE__ */ jsx15(
-            InputOTPSlot,
-            {
-              className: otpSlotClassName,
-              index: index + resolvedSplitIndex
-            },
-            `otp-trailing-${index}`
-          )) }) : null
+          hasTrailingGroup ? /* @__PURE__ */ jsx15(InputOTPGroup, { className: otpGroupClassName, children: Array.from(
+            { length: resolvedLength - resolvedSplitIndex },
+            (_, index) => /* @__PURE__ */ jsx15(
+              InputOTPSlot,
+              {
+                className: otpSlotClassName,
+                index: index + resolvedSplitIndex
+              },
+              `otp-trailing-${index}`
+            )
+          ) }) : null
         ]
       }
     );
@@ -2824,12 +2918,12 @@ var Input = React13.forwardRef((props, ref) => {
   const isSearch = variant === "search";
   const resolvedType = type ?? (isSearch ? "search" : void 0);
   const ariaLabel = nativeProps["aria-label"] ?? (typeof label === "string" ? label : isSearch ? "Search" : void 0);
-  const nativeControl = isSearch ? /* @__PURE__ */ jsxs10("div", { className: "flex h-[88px] w-full items-center gap-6 rounded-full border border-[#D9E2FA] bg-white px-8 shadow-none transition-[border-color,box-shadow,background-color] duration-sofya ease-sofya hover:border-[#C9D5FF] hover:ring-2 hover:ring-[#D9E2FA]/35 focus-within:border-transparent focus-within:ring-2 focus-within:ring-[#D9E2FA]/60 has-[:active]:border-transparent has-[:active]:ring-2 has-[:active]:ring-[#D9E2FA]/60", children: [
+  const nativeControl = isSearch ? /* @__PURE__ */ jsxs10("div", { className: "flex h-[88px] w-full items-center gap-6 rounded-full border border-[color:var(--sofya-border-strong)] bg-card px-8 shadow-none transition-[border-color,box-shadow,background-color] duration-sofya ease-sofya hover:border-[color:var(--sofya-border-hover)] hover:ring-2 hover:ring-[color:var(--sofya-focus-ring-soft)] focus-within:border-transparent focus-within:ring-2 focus-within:ring-[color:var(--sofya-focus-ring-soft)] has-[:active]:border-transparent has-[:active]:ring-2 has-[:active]:ring-[color:var(--sofya-focus-ring-soft)]", children: [
     /* @__PURE__ */ jsx15(
       Icon,
       {
         "aria-hidden": "true",
-        className: "shrink-0 text-[#7C86A8]",
+        className: "shrink-0 text-[color:var(--sofya-text-subtle)]",
         name: "search",
         size: 32
       }
@@ -2841,7 +2935,7 @@ var Input = React13.forwardRef((props, ref) => {
         ref,
         type: resolvedType,
         className: cn(
-          "h-full w-full appearance-none border-0 bg-transparent p-0 text-[23px] font-semibold leading-none tracking-[-0.03em] text-[#5B6C92] shadow-none outline-none transition-colors duration-sofya ease-sofya placeholder:font-semibold placeholder:text-[#7C86A8] placeholder:opacity-100 disabled:cursor-not-allowed disabled:opacity-50",
+          "h-full w-full appearance-none border-0 bg-transparent p-0 text-[23px] font-semibold leading-none tracking-[-0.03em] text-[color:var(--sofya-text-default)] shadow-none outline-none transition-colors duration-sofya ease-sofya placeholder:font-semibold placeholder:text-[color:var(--sofya-text-subtle)] placeholder:opacity-100 disabled:cursor-not-allowed disabled:opacity-50",
           "[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
           className
         ),
@@ -2857,7 +2951,7 @@ var Input = React13.forwardRef((props, ref) => {
       ref,
       type: resolvedType,
       className: cn(
-        "flex h-10 w-full rounded-[10px] border border-[#D9E2FA] bg-card px-4 py-2 text-[16px] font-normal leading-[22px] tracking-[-0.02em] text-[var(--sofya-tag-navy)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya placeholder:text-[color:var(--sofya-tag-navy)]/50 hover:border-[#C9D5FF] focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[#D9E2FA]/60 focus:ring-offset-0 active:border-transparent active:ring-2 active:ring-[#D9E2FA]/60 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50",
+        "flex h-10 w-full rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 py-2 text-[16px] font-normal leading-[22px] tracking-[-0.02em] text-[color:var(--sofya-text-default)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya placeholder:text-[color:var(--sofya-text-placeholder)] hover:border-[color:var(--sofya-border-hover)] focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[color:var(--sofya-focus-ring-soft)] focus:ring-offset-0 active:border-transparent active:ring-2 active:ring-[color:var(--sofya-focus-ring-soft)] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50",
         className
       ),
       ...nativeProps,
@@ -2910,17 +3004,30 @@ Label.displayName = "Label";
 // src/components/link.tsx
 import * as React15 from "react";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { cva as cva6 } from "class-variance-authority";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var Link = React15.forwardRef(function Link2({ asChild = false, className, ...props }, ref) {
+var linkVariants = cva6(
+  "inline bg-[linear-gradient(currentColor,currentColor)] bg-[position:0_100%] bg-no-repeat pb-0 text-primary no-underline transition-[color,background-size,box-shadow] duration-sofya ease-sofya hover:text-[color:var(--sofya-link-hover)] focus-visible:rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-[length:0%_1.5px] hover:bg-[length:100%_1.5px]",
+        underlined: "bg-[length:100%_1.5px] hover:bg-[length:100%_1.5px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Link = React15.forwardRef(function Link2({ asChild = false, className, variant = "default", ...props }, ref) {
   const Component = asChild ? Slot3 : "a";
   return /* @__PURE__ */ jsx17(
     Component,
     {
       ref,
-      className: cn(
-        "inline bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1.5px] bg-[position:0_100%] bg-no-repeat pb-0 text-primary no-underline transition-[color,background-size,box-shadow] duration-sofya ease-sofya hover:bg-[length:100%_1.5px] hover:text-[#274FC6] focus-visible:rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D9E2FA]/60 focus-visible:ring-offset-0",
-        className
-      ),
+      "data-link-variant": variant,
+      className: cn(linkVariants({ variant }), className),
       ...props
     }
   );
@@ -2932,93 +3039,93 @@ import * as React16 from "react";
 
 // src/components/logo-data.ts
 var logoAssets = {
-  "mono": {
+  mono: {
     width: 16,
     height: 23,
     viewBox: "0 0 16 23",
     paths: [
       {
         d: "M8.07721 0.0486377C9.76297 -0.255788 11.3766 0.900674 11.6739 2.62676C11.9711 4.35326 10.8412 6.00592 9.15533 6.31036C7.49248 6.61085 6.28577 8.0157 6.12701 9.65801C7.52712 10.4447 9.32387 10.2329 10.5088 9.01934C11.7191 7.7799 13.6883 7.7799 14.8985 9.01934C15.596 9.73391 15.8888 10.7063 15.7823 11.6395C15.7775 11.6847 15.7694 11.7294 15.7628 11.7742C15.7546 11.8265 15.7461 11.8786 15.7354 11.9305C15.7226 11.9944 15.707 12.0573 15.6905 12.1199C15.6838 12.1446 15.6782 12.1696 15.671 12.1941C15.6698 12.198 15.6692 12.202 15.668 12.2059C15.6667 12.2102 15.6645 12.2143 15.6631 12.2186C15.3329 13.3273 14.4244 14.2138 13.2354 14.4285C11.2336 14.7902 9.89219 16.7523 10.2452 18.8025C10.5423 20.5287 9.41297 22.1807 7.7276 22.4852C6.04189 22.7896 4.42828 21.633 4.13092 19.907C3.83372 18.1808 4.96365 16.5289 6.64947 16.2244C8.31218 15.9242 9.51766 14.519 9.67682 12.8768C8.27658 12.0893 6.47907 12.3017 5.29401 13.5154C4.08377 14.7545 2.11445 14.7548 0.904357 13.5154C0.194345 12.7883 -0.0954398 11.7937 0.0274038 10.8455C0.028594 10.8357 0.0300316 10.826 0.0313101 10.8162C0.0427579 10.7337 0.0565126 10.6517 0.0742788 10.5701C0.0818187 10.5344 0.0909471 10.4991 0.0996694 10.4637C0.113772 10.408 0.128483 10.3526 0.145568 10.2977C0.165244 10.2329 0.187408 10.1693 0.210998 10.1063C0.219654 10.0836 0.227204 10.0604 0.236388 10.0379C0.62699 9.06106 1.48137 8.30278 2.5694 8.10625C4.57137 7.74472 5.91263 5.78194 5.55963 3.73125C5.26246 2.00522 6.39199 0.353249 8.07721 0.0486377Z",
-        fill: "#9CB1F0",
+        fill: "var(--sofya-logo-soft)",
         fillRule: "evenodd",
         clipRule: "evenodd"
       }
     ]
   },
-  "default": {
+  default: {
     width: 73,
     height: 87,
     viewBox: "0 0 73 87",
     paths: [
       {
         d: "M20.0784 54.8299C18.5629 55.0977 17.0094 55.0642 15.5068 54.7316C14.0041 54.399 12.5817 53.7736 11.3208 52.8913C10.0598 52.0089 8.98496 50.8869 8.15764 49.5891C7.33032 48.2914 6.76671 46.8434 6.49899 45.3278C6.23127 43.8123 6.26468 42.2588 6.59731 40.7562C6.92994 39.2536 7.55529 37.8312 8.43764 36.5702C9.31999 35.3092 10.4421 34.2344 11.7398 33.4071C13.0375 32.5798 14.4855 32.0161 16.0011 31.7484C19.635 31.1022 22.8643 29.0408 24.9802 26.0165C27.0961 22.9922 27.9258 19.252 27.2874 15.6166C26.8846 13.334 27.1677 10.9831 28.1009 8.86134C29.0341 6.73956 30.5755 4.94215 32.5303 3.6964C34.485 2.45065 36.7652 1.81251 39.0826 1.86267C41.4 1.91283 43.6505 2.64904 45.5495 3.97821C47.4485 5.30737 48.9107 7.1698 49.7512 9.32997C50.5918 11.4902 50.7729 13.8511 50.2716 16.1142C49.7704 18.3773 48.6094 20.4409 46.9353 22.0442C45.2613 23.6474 43.1494 24.7183 40.8668 25.1213C37.2334 25.7674 34.0047 27.8284 31.8889 30.852C29.7731 33.8757 28.9431 37.6151 29.5809 41.2499C30.118 44.3104 29.4192 47.459 27.6378 50.0049C25.8563 52.5508 23.1377 54.286 20.0784 54.8299Z",
-        fill: "#365FD7"
+        fill: "var(--sofya-logo-primary)"
       },
       {
         d: "M9.71176 51.685C8.62379 50.597 7.76075 49.3054 7.17195 47.8839C6.58314 46.4624 6.28008 44.9388 6.28008 43.4002C6.28008 41.8616 6.58314 40.338 7.17195 38.9165C7.76076 37.495 8.62379 36.2034 9.71176 35.1154C10.7997 34.0274 12.0914 33.1644 13.5129 32.5756C14.9344 31.9868 16.4579 31.6837 17.9966 31.6837C19.5352 31.6837 21.0588 31.9868 22.4803 32.5756C23.9018 33.1644 25.1934 34.0274 26.2814 35.1154C28.8937 37.7213 32.4331 39.1847 36.123 39.1843C39.8129 39.1839 43.3519 37.7198 45.9637 35.1133C47.6026 33.4749 49.6905 32.3594 51.9634 31.9076C54.2363 31.4559 56.5922 31.6883 58.733 32.5754C60.8738 33.4626 62.7035 34.9646 63.9907 36.8916C65.2779 38.8186 65.9648 41.084 65.9645 43.4013C65.9642 45.7187 65.2767 47.9839 63.989 49.9106C62.7014 51.8373 60.8713 53.3388 58.7302 54.2254C56.5892 55.112 54.2333 55.3438 51.9605 54.8915C49.6877 54.4392 47.6001 53.3231 45.9616 51.6843C43.3498 49.0785 39.8109 47.615 36.1215 47.615C32.432 47.615 28.8932 49.0785 26.2814 51.6843C24.0825 53.8784 21.103 55.1106 17.9967 55.1108C14.8904 55.1109 11.9109 53.8789 9.71176 51.685Z",
-        fill: "#35D3C7"
+        fill: "var(--sofya-logo-highlight)"
       },
       {
         d: "M35.4804 84.7533C33.9649 85.021 32.4114 84.9876 30.9088 84.6549C29.4061 84.3223 27.9837 83.697 26.7228 82.8146C25.4618 81.9323 24.387 80.8102 23.5596 79.5125C22.7323 78.2147 22.1687 76.7667 21.901 75.2512C21.6333 73.7356 21.6667 72.1822 21.9993 70.6795C22.3319 69.1769 22.9573 67.7545 23.8396 66.4935C24.722 65.2326 25.8441 64.1577 27.1418 63.3304C28.4395 62.5031 29.8875 61.9395 31.4031 61.6718C35.037 61.0255 38.2663 58.9641 40.3822 55.9398C42.4981 52.9155 43.3278 49.1753 42.6894 45.54C42.2866 43.2573 42.5697 40.9065 43.5029 38.7847C44.4361 36.6629 45.9775 34.8655 47.9323 33.6197C49.887 32.374 52.1672 31.7358 54.4846 31.786C56.802 31.8362 59.0525 32.5724 60.9515 33.9015C62.8505 35.2307 64.3127 37.0931 65.1532 39.2533C65.9938 41.4135 66.1749 43.7744 65.6737 46.0375C65.1724 48.3006 64.0114 50.3643 62.3373 51.9675C60.6633 53.5707 58.5514 54.6416 56.2688 55.0446C52.6354 55.6908 49.4067 57.7517 47.2909 60.7754C45.1751 63.799 44.3451 67.5384 44.9829 71.1733C45.52 74.2338 44.8212 77.3823 43.0398 79.9282C41.2583 82.4741 38.5397 84.2093 35.4804 84.7533Z",
-        fill: "#B55CAF"
+        fill: "var(--sofya-logo-accent)"
       }
     ]
   },
-  "text": {
+  text: {
     width: 143,
     height: 47,
     viewBox: "0 0 143 47",
     paths: [
       {
         d: "M15.093 36.7303C10.101 36.7303 6.33667 35.6353 3.80001 33.4453C1.26334 31.2553 -0.00332677 28.1886 6.56168e-06 24.2453H7.47001C7.39794 25.1747 7.55775 26.1075 7.9351 26.9599C8.31244 27.8124 8.89552 28.5578 9.63201 29.1293C11.3436 30.2547 13.3692 30.8053 15.415 30.7013C17.1692 30.8096 18.9188 30.4262 20.467 29.5943C21.0345 29.2318 21.4945 28.7238 21.7991 28.1232C22.1037 27.5226 22.2418 26.8514 22.199 26.1793C22.2397 25.276 21.9532 24.3883 21.392 23.6793C20.7394 22.9613 19.9224 22.4123 19.011 22.0793C17.5132 21.5107 15.9808 21.0378 14.423 20.6633C14.0897 20.5913 13.6943 20.4966 13.237 20.3793C10.9588 19.8608 8.73206 19.1375 6.58401 18.2183C5.01143 17.5343 3.65165 16.4401 2.64701 15.0503C1.6259 13.4711 1.12512 11.6117 1.21501 9.73329C1.13943 8.30544 1.44001 6.88276 2.08668 5.6075C2.73335 4.33223 3.70345 3.24906 4.90001 2.46629C7.35534 0.828956 10.5937 0.0102922 14.615 0.0102922C17.2654 -0.0769963 19.9047 0.39173 22.363 1.38629C24.2275 2.14967 25.8078 3.47511 26.884 5.17829C27.8735 6.86944 28.3761 8.80132 28.336 10.7603H21.056C21.0796 10.0753 20.9329 9.39523 20.6291 8.78091C20.3252 8.16659 19.8737 7.63724 19.315 7.24029C17.8412 6.29435 16.1039 5.84347 14.356 5.95329C12.9203 5.88122 11.4902 6.17834 10.202 6.81629C9.70718 7.09854 9.30244 7.51519 9.03467 8.018C8.76689 8.5208 8.64705 9.08918 8.68901 9.65729C8.6508 10.4918 8.92256 11.311 9.45201 11.9573C10.0677 12.6165 10.8364 13.1138 11.69 13.4053C13.0793 13.9054 14.4951 14.3284 15.931 14.6723H16.011C16.2374 14.7071 16.461 14.7582 16.68 14.8253C19.1301 15.388 21.5363 16.127 23.88 17.0363C25.5247 17.682 26.9723 18.7457 28.08 20.1223C29.1995 21.687 29.7535 23.586 29.651 25.5073C29.7141 27.077 29.4043 28.6393 28.7471 30.0662C28.0899 31.4931 27.1039 32.744 25.87 33.7163C23.35 35.7256 19.7577 36.7303 15.093 36.7303ZM46.693 36.6633C44.0926 36.7407 41.5152 36.1557 39.203 34.9633C37.2011 33.8919 35.5677 32.2431 34.515 30.2313C33.4165 28.0642 32.8671 25.6604 32.915 23.2313C32.8688 20.8266 33.4184 18.4479 34.515 16.3073C35.5697 14.307 37.2008 12.6696 39.197 11.6073C41.5117 10.4231 44.0882 9.84318 46.687 9.92129C49.294 9.84535 51.8783 10.4251 54.203 11.6073C56.2102 12.6636 57.8512 14.3019 58.911 16.3073C60.0076 18.4479 60.5573 20.8266 60.511 23.2313C60.5589 25.6604 60.0095 28.0642 58.911 30.2313C57.8559 32.2482 56.2154 33.8988 54.205 34.9663C51.8825 36.1556 49.2972 36.7393 46.689 36.6633H46.693ZM46.671 30.7963C47.5924 30.8531 48.515 30.7061 49.3732 30.3657C50.2313 30.0254 51.0039 29.5001 51.636 28.8273C52.8904 27.2408 53.5119 25.2455 53.38 23.2273C53.4174 21.8449 53.1473 20.4715 52.589 19.2063C52.1029 18.1379 51.2999 17.2448 50.289 16.6483C49.1838 16.0323 47.9327 15.7265 46.668 15.7633C45.7575 15.706 44.8457 15.8516 43.9984 16.1895C43.151 16.5274 42.3892 17.0492 41.768 17.7173C40.5429 19.2827 39.9354 21.2435 40.061 23.2273C40.0213 24.6352 40.2824 26.0354 40.827 27.3343C41.2902 28.4048 42.0761 29.304 43.075 29.9063C44.1688 30.5248 45.4109 30.8325 46.667 30.7963H46.671ZM68.511 29.9963V11.3733C68.4266 9.21075 68.7934 7.05433 69.588 5.04129C70.2229 3.53621 71.3779 2.3096 72.842 1.58529C74.5953 0.813695 76.5007 0.449569 78.415 0.52029H82.567V6.15129H79.501C78.6675 6.10729 77.8362 6.27265 77.083 6.63229C76.5183 6.94591 76.0905 7.45853 75.883 8.07029C75.6274 8.88943 75.5111 9.74566 75.539 10.6033V36.2203H68.507L68.511 29.9963ZM62.901 11.4583H82.964V17.5713H62.897L62.901 11.4583ZM91.215 40.8793H96.525C98.4213 41.0066 100.296 40.4122 101.772 39.2153C102.991 38.106 103.601 36.2376 103.601 33.6103V29.9923L104.395 31.0123C103.666 32.4581 102.529 33.6586 101.125 34.4653C99.6198 35.2812 97.9266 35.6874 96.215 35.6433C92.9257 35.6433 90.5313 34.6716 89.032 32.7283C87.5327 30.785 86.7833 27.8776 86.784 24.0063V10.3653H93.815V23.3773C93.6797 25.087 94.09 26.7955 94.987 28.2573C95.4182 28.7856 95.9708 29.2017 96.5977 29.4702C97.2246 29.7388 97.9071 29.8516 98.587 29.7993C99.3047 29.8602 100.026 29.7459 100.69 29.4663C101.354 29.1868 101.94 28.7503 102.398 28.1943C103.302 26.7418 103.723 25.0398 103.598 23.3333V10.3653H110.607V31.6123C110.754 34.6867 110.121 37.7483 108.767 40.5123C107.693 42.562 105.953 44.1845 103.833 45.1123C101.501 46.0357 99.008 46.4805 96.501 46.4203H91.215V40.8793ZM126.663 36.6633C124.47 36.7225 122.307 36.1415 120.438 34.9913C118.678 33.8538 117.302 32.2125 116.489 30.2813C115.556 28.0499 115.101 25.6482 115.151 23.2303C115.103 20.8443 115.559 18.4752 116.489 16.2773C117.308 14.3564 118.683 12.7248 120.438 11.5933C122.307 10.4431 124.47 9.86205 126.663 9.92129C128.689 9.86752 130.688 10.3935 132.425 11.4373C134.097 12.5171 135.393 14.0894 136.134 15.9373C137.053 18.2552 137.491 20.7358 137.422 23.2283C137.422 23.9576 137.398 24.6396 137.349 25.2743C137.243 27.4422 136.68 29.5631 135.697 31.4983C134.865 33.1031 133.596 34.4392 132.035 35.3513C130.392 36.2557 128.538 36.7084 126.663 36.6633ZM128.604 30.8203C129.486 30.8692 130.368 30.7162 131.183 30.3731C131.997 30.0301 132.723 29.5058 133.304 28.8403C134.513 27.2303 135.106 25.2414 134.978 23.2323C135.103 21.2538 134.508 19.2969 133.304 17.7223C132.718 17.0636 131.992 16.5457 131.178 16.2073C130.364 15.869 129.484 15.7189 128.604 15.7683C127.73 15.7199 126.856 15.8706 126.049 16.2091C125.242 16.5476 124.522 17.065 123.944 17.7223C122.749 19.301 122.16 21.2562 122.285 23.2323C122.247 24.6418 122.499 26.0441 123.028 27.3513C123.466 28.4146 124.222 29.3167 125.192 29.9343C126.222 30.5473 127.406 30.8545 128.604 30.8203ZM134.974 30.4563V15.9963L135.968 10.3673H142.005V30.6323L142.771 36.2203H136.147L134.974 30.4563Z",
-        fill: "#08194D"
+        fill: "var(--sofya-logo-ink)"
       }
     ]
   },
-  "full": {
+  full: {
     width: 902,
     height: 333,
     viewBox: "0 0 902 333",
     paths: [
       {
         d: "M126.1,325.2c-24.4,4.3-47.8-12.1-52.1-36.5-4.3-24.4,12.1-47.8,36.5-52.1,29-5.1,48.4-32.9,43.3-61.9-4.3-24.4,12.1-47.8,36.5-52.1,24.4-4.3,47.8,12.1,52.1,36.5,4.3,24.4-12.1,47.8-36.5,52.1-29,5.1-48.4,32.9-43.3,61.9,4.3,24.4-12.1,47.8-36.5,52.1",
-        fill: "#B55CAF"
+        fill: "var(--sofya-logo-accent)"
       },
       {
         d: "M27.3,198.3c-17.5-17.5-17.5-46.1,0-63.6,17.5-17.5,46.1-17.5,63.6,0,20.8,20.8,54.7,20.8,75.5,0,17.5-17.5,46.1-17.5,63.6,0,17.5,17.5,17.5,46.1,0,63.6-17.5,17.5-46.1,17.5-63.6,0-20.8-20.8-54.7-20.8-75.5,0-17.5,17.5-46.1,17.5-63.6,0",
-        fill: "#35D3C7"
+        fill: "var(--sofya-logo-highlight)"
       },
       {
         d: "M67,210.3c-24.4,4.3-47.8-12.1-52.1-36.5-4.3-24.4,12.1-47.8,36.5-52.1,29-5.1,48.4-32.9,43.3-61.9-4.3-24.4,12.1-47.8,36.5-52.1,24.4-4.3,47.8,12.1,52.1,36.5,4.3,24.4-12.1,47.8-36.5,52.1-29,5.1-48.4,32.9-43.3,61.9,4.3,24.4-12.1,47.8-36.5,52.1",
-        fill: "#365FD7"
+        fill: "var(--sofya-logo-primary)"
       },
       {
         d: "M14.9,173.9c-1.1-6-.9-11.9.4-17.5,1.8-8,5.8-15.5,12-21.7,17.5-17.5,46.1-17.5,63.6,0,3.7,3.7,7.7,6.7,12,9-.5,4.7-.3,9.6.6,14.5,4.3,24.4-12.1,47.8-36.5,52.1-2.6.5-5.2.7-7.8.7-21.4,0-40.4-15.4-44.3-37.2Z",
-        fill: "#0B4796"
+        fill: "var(--sofya-logo-primary)"
       },
       {
         d: "M166.4,198.3c-3.7-3.7-7.7-6.7-12-9,.5-4.7.3-9.6-.6-14.5-4.3-24.4,12.1-47.8,36.5-52.1,24.4-4.3,47.8,12.1,52.1,36.5,1,5.8.9,11.6-.3,17-1.8,8.1-5.8,15.8-12.1,22.1-8.8,8.8-20.3,13.2-31.8,13.2s-23-4.4-31.8-13.2Z",
-        fill: "#0B4796"
+        fill: "var(--sofya-logo-primary)"
       },
       {
         d: "M422.5,151.7c-6.9-2.9-16.4-5.8-28.4-8.7-.8-.3-1.7-.5-2.6-.6h-.4c-7.2-1.7-12.8-3.4-16.7-4.9-3.9-1.5-6.8-3.4-8.8-5.7-2-2.3-3-5.3-3-9s2-8.9,6-11.1c4-2.2,9.5-3.3,16.5-3.3s14.9,1.7,19.5,5c4.5,3.3,6.8,8,6.8,13.9h28.7c0-8.3-1.9-15.6-5.7-22-3.8-6.4-9.8-11.3-17.9-15-8.1-3.6-18.2-5.4-30.4-5.4s-28.7,3.2-38.3,9.6c-9.6,6.4-14.5,16-14.5,28.7s1.9,15.5,5.6,20.9c3.7,5.4,8.9,9.5,15.5,12.4,6.6,2.9,15.3,5.8,26.3,8.4,1.7.5,3.3.9,4.6,1.2,7.9,2,13.9,3.8,18.1,5.5,4.1,1.7,7.3,3.8,9.3,6.3,2.1,2.5,3.1,5.8,3.1,9.8,0,6-2.3,10.5-6.8,13.5-4.6,2.9-11.2,4.4-19.9,4.4s-17.1-2.1-22.7-6.2c-5.6-4.1-8.4-10.6-8.4-19.3h-29.5c0,15.5,5,27.6,15,36.2,10,8.6,24.8,12.9,44.5,12.9s32.5-3.9,42.4-11.8c9.9-7.9,14.9-18.7,14.9-32.3s-2-16.1-6.1-21.3c-4.1-5.2-9.6-9.3-16.5-12.1Z",
-        fill: "#08194D"
+        fill: "var(--sofya-logo-ink)"
       },
       {
         d: "M541.9,130.3c-8.2-4.4-18-6.6-29.5-6.6s-21.5,2.2-29.6,6.6c-8.1,4.4-14.2,10.6-18.4,18.6-4.2,8-6.2,17-6.2,27.2s2.1,19.6,6.2,27.6c4.1,8,10.3,14.2,18.4,18.7,8.1,4.5,18,6.7,29.6,6.7s21.3-2.2,29.5-6.7c8.2-4.5,14.4-10.7,18.6-18.7,4.2-8,6.3-17.2,6.3-27.6s-2.1-19.2-6.3-27.2c-4.2-8-10.4-14.2-18.6-18.6ZM531.8,198.1c-4.6,5.2-11.1,7.8-19.7,7.8s-10.2-1.2-14.1-3.5c-3.9-2.3-6.8-5.7-8.8-10.1-2-4.4-3-9.8-3-16.3,0-9.2,2.2-16.4,6.7-21.6,4.5-5.2,10.9-7.7,19.2-7.7s10.4,1.2,14.4,3.5c3.9,2.3,7,5.7,9,10,2.1,4.4,3.1,9.6,3.1,15.8,0,9.5-2.3,16.9-6.8,22.1Z",
-        fill: "#08194D"
+        fill: "var(--sofya-logo-ink)"
       },
       {
         d: "M625.8,126.5c0-4.1.5-7.5,1.4-10,.9-2.5,2.5-4.4,4.8-5.7,2.3-1.3,5.4-1.9,9.4-1.9h12v-22.1h-16.3c-9,0-16.3,1.4-22,4.2-5.7,2.8-9.9,7.4-12.7,13.7-2.8,6.3-4.2,14.6-4.2,24.9v.2h-22.1v24.1h22.1v73.5h27.5v-73.5h29.3v-24.1h-29.3v-3.2Z",
-        fill: "#08194D"
+        fill: "var(--sofya-logo-ink)"
       },
       {
         d: "M736.2,176.5c0,8.6-1.6,15-4.7,19.2-3.1,4.2-8.1,6.3-15,6.3s-11.1-2-14.2-6c-3-4-4.5-10.4-4.5-19.3v-51.2h-27.7v53.8c0,15.1,2.9,26.5,8.8,34.2,5.9,7.7,15.3,11.5,28.3,11.5s13.8-1.5,19.2-4.6c3.8-2.2,7-5,9.7-8.6v5.2c0,10.3-2.4,17.6-7.1,22-4.8,4.3-11.6,6.5-20.6,6.5h-21.1v21.9h20.9c11.1,0,20.7-1.7,28.9-5.1,8.2-3.4,14.7-9.4,19.5-18.1s7.2-20.3,7.2-35v-83.7h-27.7v51Z",
-        fill: "#08194D"
+        fill: "var(--sofya-logo-ink)"
       },
       {
         d: "M890.4,227.2l-3-22.1v-79.7h-23.7l-2.7,15.6c-3-4.7-6.8-8.6-11.3-11.4-6.4-4-13.9-6-22.6-6s-17.7,2.2-24.6,6.6c-6.9,4.4-12.1,10.6-15.6,18.5-3.5,7.9-5.2,17-5.2,27.3s1.7,19.8,5.2,27.8c3.5,8,8.7,14.2,15.6,18.6,6.9,4.4,15.1,6.6,24.6,6.6s15.1-1.7,21.1-5.2c5.2-3,9.6-7.3,13-12.7l3.3,16.1h25.9ZM853.2,198.1c-4.4,5.2-10.6,7.8-18.5,7.8s-9.7-1.2-13.5-3.5c-3.7-2.3-6.6-5.7-8.5-10.1-1.9-4.4-2.9-9.8-2.9-16.3,0-9.2,2.2-16.4,6.5-21.6,4.3-5.2,10.5-7.7,18.4-7.7s14.1,2.6,18.5,7.7c4.4,5.2,6.6,12.3,6.6,21.6s-2.2,16.9-6.6,22.1Z",
-        fill: "#08194D"
+        fill: "var(--sofya-logo-ink)"
       }
     ]
   }
@@ -3109,15 +3216,15 @@ Logo.displayName = "Logo";
 
 // src/components/pagination.tsx
 import { Slot as Slot4 } from "@radix-ui/react-slot";
-import { cva as cva6 } from "class-variance-authority";
+import { cva as cva7 } from "class-variance-authority";
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
-var paginationLinkVariants = cva6(
-  "inline-flex h-10 min-w-10 items-center justify-center rounded-full border border-transparent px-4 text-[14px] font-medium leading-none tracking-[0.01em] text-[#4B5576] no-underline transition-[transform,background-color,border-color,color,box-shadow] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--sofya-focus)/0.14)] focus-visible:ring-offset-0",
+var paginationLinkVariants = cva7(
+  "inline-flex h-10 min-w-10 items-center justify-center rounded-full border border-transparent px-4 text-[14px] font-medium leading-none tracking-[0.01em] text-[color:var(--sofya-text-soft)] no-underline transition-[transform,background-color,border-color,color,box-shadow] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
   {
     variants: {
       isActive: {
-        true: "border-[#D9E2FA] bg-white text-primary shadow-sofya-sm",
-        false: "hover:border-[#E3EAFF] hover:bg-white hover:text-primary"
+        true: "border-[color:var(--sofya-border-strong)] bg-card text-primary shadow-sofya-sm",
+        false: "hover:border-[color:var(--sofya-border-soft)] hover:bg-card hover:text-primary"
       },
       size: {
         default: "px-4",
@@ -3130,10 +3237,7 @@ var paginationLinkVariants = cva6(
     }
   }
 );
-function Pagination({
-  className,
-  ...props
-}) {
+function Pagination({ className, ...props }) {
   return /* @__PURE__ */ jsx19(
     "nav",
     {
@@ -3150,15 +3254,15 @@ function PaginationContent({
   return /* @__PURE__ */ jsx19(
     "ul",
     {
-      className: cn("flex flex-wrap items-center justify-center gap-2", className),
+      className: cn(
+        "flex flex-wrap items-center justify-center gap-2",
+        className
+      ),
       ...props
     }
   );
 }
-function PaginationItem({
-  className,
-  ...props
-}) {
+function PaginationItem({ className, ...props }) {
   return /* @__PURE__ */ jsx19("li", { className: cn("list-none", className), ...props });
 }
 function PaginationLink({
@@ -3285,7 +3389,7 @@ function PaginationEllipsis({
     {
       "aria-hidden": "true",
       className: cn(
-        "flex h-10 w-10 items-center justify-center rounded-full text-[18px] leading-none text-[#7A8299]",
+        "flex h-10 w-10 items-center justify-center rounded-full text-[18px] leading-none text-[color:var(--sofya-text-subtle)]",
         className
       ),
       ...props,
@@ -3315,7 +3419,13 @@ var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverPortal = PopoverPrimitive.Portal;
 var PopoverClose = PopoverPrimitive.Close;
-var PopoverContent = React17.forwardRef(function PopoverContent2({ align = "center", className, collisionPadding = 8, sideOffset = 8, ...props }, ref) {
+var PopoverContent = React17.forwardRef(function PopoverContent2({
+  align = "center",
+  className,
+  collisionPadding = 8,
+  sideOffset = 8,
+  ...props
+}, ref) {
   return /* @__PURE__ */ jsx20(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx20(
     PopoverPrimitive.Content,
     {
@@ -3325,7 +3435,7 @@ var PopoverContent = React17.forwardRef(function PopoverContent2({ align = "cent
       sideOffset,
       "data-slot": "popover-content",
       className: cn(
-        "sofya-dropdown-content z-50 w-72 max-w-[min(24rem,calc(100vw-1rem))] rounded-[14px] border border-[#D9E2FA] bg-[hsl(var(--sofya-popover))] p-4 text-[hsl(var(--sofya-popover-foreground))] shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.06)] outline-none",
+        "sofya-dropdown-content z-50 w-72 max-w-[min(24rem,calc(100vw-1rem))] rounded-[14px] border border-[color:var(--sofya-border-strong)] bg-[hsl(var(--sofya-popover))] p-4 text-[hsl(var(--sofya-popover-foreground))] shadow-[var(--sofya-shadow-soft)] outline-none",
         className
       ),
       ...props
@@ -3387,7 +3497,14 @@ function clampProgressValue(value, max) {
   }
   return Math.min(Math.max(value, 0), max);
 }
-var Progress = React18.forwardRef(function Progress2({ className, indicatorClassName, max = 100, size = "default", value, ...props }, ref) {
+var Progress = React18.forwardRef(function Progress2({
+  className,
+  indicatorClassName,
+  max = 100,
+  size = "default",
+  value,
+  ...props
+}, ref) {
   const safeMax = max > 0 ? max : 100;
   const resolvedValue = typeof value === "number" ? clampProgressValue(value, safeMax) : null;
   const progressScale = resolvedValue === null ? void 0 : Number((resolvedValue / safeMax).toFixed(4));
@@ -3400,7 +3517,7 @@ var Progress = React18.forwardRef(function Progress2({ className, indicatorClass
       max: safeMax,
       value: resolvedValue,
       className: cn(
-        "relative h-2 w-full overflow-hidden rounded-full bg-[#E3EAFF] data-[size=sm]:h-1.5 data-[size=default]:h-2 data-[size=lg]:h-3",
+        "relative h-2 w-full overflow-hidden rounded-full bg-[color:var(--sofya-tone-default-background)] data-[size=sm]:h-1.5 data-[size=default]:h-2 data-[size=lg]:h-3",
         className
       ),
       ...props,
@@ -3409,7 +3526,7 @@ var Progress = React18.forwardRef(function Progress2({ className, indicatorClass
         {
           "data-slot": "progress-indicator",
           className: cn(
-            "h-full w-full origin-left rounded-full bg-[linear-gradient(90deg,#C075BF_0%,#8F74CC_50%,#5B76D9_100%)] transition-[transform,opacity] duration-sofya ease-sofya data-[state=indeterminate]:w-1/2 data-[state=indeterminate]:animate-pulse",
+            "h-full w-full origin-left rounded-full bg-[image:var(--sofya-gradient-brand)] transition-[transform,opacity] duration-sofya ease-sofya data-[state=indeterminate]:w-1/2 data-[state=indeterminate]:animate-pulse",
             indicatorClassName
           ),
           style: progressScale === void 0 ? void 0 : { transform: `scaleX(${progressScale})` }
@@ -3477,7 +3594,7 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
             "aria-describedby": descriptionId,
             "data-slot": "radio-group-item",
             className: cn(
-              "peer mt-0 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-[#D9E2FA] bg-card text-primary-foreground outline-none transition-[background-color,border-color,box-shadow] duration-sofya ease-sofya focus-visible:ring-2 focus-visible:ring-[#D9E2FA]/60 focus-visible:ring-offset-0 data-[state=checked]:border-primary data-[state=checked]:bg-primary aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50",
+              "peer mt-0 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-[color:var(--sofya-border-strong)] bg-card text-primary-foreground outline-none transition-[background-color,border-color,box-shadow] duration-sofya ease-sofya focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 data-[state=checked]:border-primary data-[state=checked]:bg-primary aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50",
               controlClassName
             ),
             ...props,
@@ -3485,7 +3602,10 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
               "span",
               {
                 "data-slot": "radio-group-indicator",
-                className: cn("h-2.5 w-2.5 rounded-full bg-card", indicatorClassName)
+                className: cn(
+                  "h-2.5 w-2.5 rounded-full bg-card",
+                  indicatorClassName
+                )
               }
             ) })
           }
@@ -3496,12 +3616,12 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
             {
               id: labelId,
               className: cn(
-                "text-[var(--sofya-tag-navy)]",
+                "text-[color:var(--sofya-text-default)]",
                 labelClassName
               ),
               children: renderTextContent(label, {
                 as: "span",
-                className: "text-[var(--sofya-tag-navy)]",
+                className: "text-[color:var(--sofya-text-default)]",
                 size: "h4",
                 style: {
                   fontWeight: 400,
@@ -3515,10 +3635,7 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
             "span",
             {
               id: descriptionId,
-              className: cn(
-                "text-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("text-muted-foreground", descriptionClassName),
               children: renderTextContent(description, {
                 as: "span",
                 className: "text-muted-foreground",
@@ -3560,7 +3677,7 @@ var ScrollAreaViewport = React20.forwardRef(function ScrollAreaViewport2({ class
       ref,
       "data-slot": "scroll-area-viewport",
       className: cn(
-        "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-[#D9E2FA]/60 focus-visible:ring-offset-0",
+        "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
         className
       ),
       ...props
@@ -3584,7 +3701,10 @@ var ScrollAreaScrollbar = React20.forwardRef(function ScrollAreaScrollbar2({ cla
         ScrollAreaPrimitive.Thumb,
         {
           "data-slot": "scroll-area-thumb",
-          className: cn("relative flex-1 rounded-full bg-[#D9E2FA]", thumbClassName)
+          className: cn(
+            "relative flex-1 rounded-full bg-[color:var(--sofya-border-strong)]",
+            thumbClassName
+          )
         }
       )
     }
@@ -3641,7 +3761,7 @@ var SelectTrigger = React21.forwardRef(function SelectTrigger2({ className, chil
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "flex w-full items-center justify-between gap-4 rounded-[10px] border border-[#D9E2FA] bg-card px-4 text-left text-[16px] font-normal leading-[22px] tracking-[-0.02em] text-[var(--sofya-tag-navy)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya hover:border-[#C9D5FF] focus:outline-none focus:ring-2 focus:ring-[#D9E2FA]/60 focus:ring-offset-0 active:border-transparent active:ring-2 active:ring-[#D9E2FA]/60 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus:ring-destructive/20 data-[placeholder]:text-[color:var(--sofya-tag-navy)]/50 data-[size=default]:h-10 data-[size=default]:py-2 data-[size=sm]:h-9 data-[size=sm]:px-2 data-[size=sm]:text-[14px] data-[size=sm]:leading-5 [&>span]:line-clamp-1 [&>span]:flex-1",
+        "flex w-full items-center justify-between gap-4 rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 text-left text-[16px] font-normal leading-[22px] tracking-[-0.02em] text-[color:var(--sofya-text-default)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya hover:border-[color:var(--sofya-border-hover)] focus:outline-none focus:ring-2 focus:ring-[color:var(--sofya-focus-ring-soft)] focus:ring-offset-0 active:border-transparent active:ring-2 active:ring-[color:var(--sofya-focus-ring-soft)] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus:ring-destructive/20 data-[placeholder]:text-[color:var(--sofya-text-placeholder)] data-[size=default]:h-10 data-[size=default]:py-2 data-[size=sm]:h-9 data-[size=sm]:px-2 data-[size=sm]:text-[14px] data-[size=sm]:leading-5 [&>span]:line-clamp-1 [&>span]:flex-1",
         className
       ),
       ...props,
@@ -3652,7 +3772,7 @@ var SelectTrigger = React21.forwardRef(function SelectTrigger2({ className, chil
           {
             name: "caret-down",
             size: size === "sm" ? 12 : 14,
-            className: "shrink-0 text-[#7D87A8]"
+            className: "shrink-0 text-[color:var(--sofya-text-subtle)]"
           }
         ) })
       ]
@@ -3700,7 +3820,7 @@ var SelectContent = React21.forwardRef(function SelectContent2({ className, chil
       "data-slot": "select-content",
       position,
       className: cn(
-        "sofya-dropdown-content sofya-select-content z-50 max-h-80 min-w-[8rem] overflow-hidden rounded-[14px] border border-[#D9E2FA] bg-card p-2 text-foreground shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.06)] outline-none",
+        "sofya-dropdown-content sofya-select-content z-50 max-h-80 min-w-[8rem] overflow-hidden rounded-[14px] border border-[color:var(--sofya-border-strong)] bg-card p-2 text-foreground shadow-[var(--sofya-shadow-soft)] outline-none",
         position === "popper" && "w-[var(--radix-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -3751,14 +3871,14 @@ var SelectItem = React21.forwardRef(function SelectItem2({ className, children,
       ref,
       "data-slot": "select-item",
       className: cn(
-        "relative flex min-w-0 cursor-pointer select-none items-center self-stretch rounded-[8px] px-4 py-2 pr-8 text-[14px] font-normal leading-5 text-[var(--sofya-tag-navy)] outline-none transition-colors duration-sofya ease-sofya data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-[#F5F8FF] data-[highlighted]:text-[var(--sofya-tag-navy)] data-[state=checked]:bg-[#F5F4FA]",
+        "relative flex min-w-0 cursor-pointer select-none items-center self-stretch rounded-[8px] px-4 py-2 pr-8 text-[14px] font-normal leading-5 text-[color:var(--sofya-text-default)] outline-none transition-colors duration-sofya ease-sofya data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-[color:var(--sofya-surface-hover)] data-[highlighted]:text-[color:var(--sofya-text-default)] data-[state=checked]:bg-[color:var(--sofya-surface-selected)]",
         className
       ),
       ...props,
       children: [
         /* @__PURE__ */ jsx24(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
           as: "span",
-          className: "block truncate text-[var(--sofya-tag-navy)]",
+          className: "block truncate text-[color:var(--sofya-text-default)]",
           size: "body",
           style: {
             lineHeight: "20px"
@@ -3776,7 +3896,7 @@ var SelectSeparator = React21.forwardRef(function SelectSeparator2({ className,
     {
       ref,
       "data-slot": "select-separator",
-      className: cn("my-2 h-px bg-[#E3EAFF]", className),
+      className: cn("my-2 h-px bg-[color:var(--sofya-border-soft)]", className),
       ...props
     }
   );
@@ -4015,20 +4135,24 @@ var Switch = React26.forwardRef(({ className, ...props }, ref) => {
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table.tsx
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva8 } from "class-variance-authority";
 import * as React27 from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var tableCellVariantOptions = ["default", "primary", "muted"];
-var tableStatusToneOptions = ["active", "inactive", "warning"];
+var tableStatusToneOptions = [
+  "active",
+  "inactive",
+  "warning"
+];
 var tableActionToneOptions = ["primary", "neutral", "danger"];
-var tableCellVariants = cva7(
+var tableCellVariants = cva8(
   "px-8 py-6 align-middle [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-normal leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)]",
   {
     variants: {
       variant: {
-        default: "text-[#4B5576]",
-        primary: "font-medium text-[var(--sofya-tag-navy)]",
-        muted: "text-[#7D87A8]"
+        default: "text-[color:var(--sofya-text-soft)]",
+        primary: "font-medium text-[color:var(--sofya-text-default)]",
+        muted: "text-[color:var(--sofya-text-subtle)]"
       }
     },
     defaultVariants: {
@@ -4036,29 +4160,26 @@ var tableCellVariants = cva7(
     }
   }
 );
-var tableStatusBadgeVariants = cva7(
-  "normal-case",
-  {
-    variants: {
-      tone: {
-        active: "border-[#A6EEBF] bg-[#F1FFF6] text-[#123B57]",
-        inactive: "border-[#D9E2FA] bg-[#FBFCFF] text-[#7D87A8]",
-        warning: "border-[#F7D7A4] bg-[#FFF8EC] text-[#9A5B00]"
-      }
-    },
-    defaultVariants: {
-      tone: "active"
+var tableStatusBadgeVariants = cva8("normal-case", {
+  variants: {
+    tone: {
+      active: "border-[color:var(--sofya-tone-success-border)] bg-[color:var(--sofya-tone-success-background)] text-[color:var(--sofya-tone-success-foreground)]",
+      inactive: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-text-subtle)]",
+      warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-[color:var(--sofya-tone-warning-foreground)]"
     }
+  },
+  defaultVariants: {
+    tone: "active"
   }
-);
-var tableActionButtonVariants = cva7(
-  "text-[length:var(--sofya-text-body-font-size)] leading-[var(--sofya-text-body-line-height)] shadow-none motion-safe:active:scale-[0.97] focus-visible:ring-[#D9E2FA]/60 focus-visible:ring-offset-0 disabled:opacity-40 [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+});
+var tableActionButtonVariants = cva8(
+  "text-[length:var(--sofya-text-body-font-size)] leading-[var(--sofya-text-body-line-height)] shadow-none motion-safe:active:scale-[0.97] focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 disabled:opacity-40 [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
   {
     variants: {
       tone: {
-        primary: "!bg-transparent text-[#3A63E0] hover:!bg-[#F5F8FF]",
-        neutral: "!bg-transparent text-[#4B5D8A] hover:!bg-[#F5F8FF]",
-        danger: "!bg-transparent text-[#4B5D8A] hover:!bg-[#FFF3F3] hover:text-[#D74F36]"
+        primary: "!bg-transparent text-primary hover:!bg-[color:var(--sofya-surface-hover)]",
+        neutral: "!bg-transparent text-[color:var(--sofya-text-soft)] hover:!bg-[color:var(--sofya-surface-hover)]",
+        danger: "!bg-transparent text-[color:var(--sofya-text-soft)] hover:!bg-[color:var(--sofya-surface-destructive)] hover:text-destructive"
       }
     },
     defaultVariants: {
@@ -4074,26 +4195,37 @@ var inheritedTextStyle = {
   letterSpacing: "inherit",
   color: "inherit"
 };
-var Table = React27.forwardRef(
-  function Table2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx30("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ jsx30(
-      "table",
-      {
-        "data-slot": "table",
-        ref,
-        className: cn("w-full min-w-[1040px] caption-bottom border-collapse bg-white", className),
-        ...props
-      }
-    ) });
-  }
-);
+var Table = React27.forwardRef(function Table2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx30(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ jsx30(
+        "table",
+        {
+          "data-slot": "table",
+          ref,
+          className: cn(
+            "w-full min-w-[1040px] caption-bottom border-collapse bg-card",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+});
 var TableHeader = React27.forwardRef(function TableHeader2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx30(
     "thead",
     {
       "data-slot": "table-header",
       ref,
-      className: cn("[&_tr]:border-b [&_tr]:border-[#D9E2FA] [&_tr:hover]:bg-transparent", className),
+      className: cn(
+        "[&_tr]:border-b [&_tr]:border-[color:var(--sofya-border-strong)] [&_tr:hover]:bg-transparent",
+        className
+      ),
       ...props
     }
   );
@@ -4115,27 +4247,28 @@ var TableFooter = React27.forwardRef(function TableFooter2({ className, ...props
     {
       "data-slot": "table-footer",
       ref,
-      className: cn("border-t border-[#D9E2FA] bg-[#FBFCFF] font-medium [&>tr:last-child]:border-0", className),
+      className: cn(
+        "border-t border-[color:var(--sofya-border-strong)] bg-[color:var(--sofya-tone-default-background)] font-medium [&>tr:last-child]:border-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TableRow = React27.forwardRef(function TableRow2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx30(
+    "tr",
+    {
+      "data-slot": "table-row",
+      ref,
+      className: cn(
+        "border-b border-[color:var(--sofya-border-soft)] transition-colors duration-sofya ease-sofya hover:bg-[color:var(--sofya-tone-default-background)] data-[state=selected]:bg-[color:var(--sofya-tone-default-background)]",
+        className
+      ),
       ...props
     }
   );
 });
-var TableRow = React27.forwardRef(
-  function TableRow2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx30(
-      "tr",
-      {
-        "data-slot": "table-row",
-        ref,
-        className: cn(
-          "border-b border-[#EEF2FF] transition-colors duration-sofya ease-sofya hover:bg-[#FBFCFF] data-[state=selected]:bg-[#FBFCFF]",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
 var TableHead = React27.forwardRef(function TableHead2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsx30(
     "th",
@@ -4143,7 +4276,7 @@ var TableHead = React27.forwardRef(function TableHead2({ className, children, ..
       "data-slot": "table-head",
       ref,
       className: cn(
-        "whitespace-nowrap px-8 py-8 text-left align-middle [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-medium uppercase leading-4 tracking-[0.12em] text-black [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+        "whitespace-nowrap px-8 py-8 text-left align-middle [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-medium uppercase leading-4 tracking-[0.12em] text-[color:var(--sofya-text-default)] [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
         className
       ),
       ...props,
@@ -4156,77 +4289,95 @@ var TableHead = React27.forwardRef(function TableHead2({ className, children, ..
     }
   );
 });
-var TableCell = React27.forwardRef(function TableCell2({ className, variant, children, ...props }, ref) {
+var TableCell = React27.forwardRef(
+  function TableCell2({ className, variant, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx30(
+      "td",
+      {
+        "data-slot": "table-cell",
+        ref,
+        className: cn(tableCellVariants({ variant }), className),
+        ...props,
+        children: renderTextContent(children, {
+          as: "span",
+          className: "block text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+          size: "body",
+          style: inheritedTextStyle
+        })
+      }
+    );
+  }
+);
+var TableCaption = React27.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsx30(
-    "td",
+    "caption",
     {
-      "data-slot": "table-cell",
+      "data-slot": "table-caption",
       ref,
-      className: cn(tableCellVariants({ variant }), className),
+      className: cn(
+        "mt-4 text-left [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-[color:var(--sofya-text-subtle)]",
+        className
+      ),
       ...props,
       children: renderTextContent(children, {
         as: "span",
-        className: "block text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+        className: "block text-inherit",
         size: "body",
         style: inheritedTextStyle
       })
     }
   );
 });
-var TableCaption = React27.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
+function TableStatusBadge({
+  className,
+  tone,
+  children,
+  ...props
+}) {
   return /* @__PURE__ */ jsx30(
-    "caption",
+    Badge,
+    {
+      variant: "pill",
+      className: cn(tableStatusBadgeVariants({ tone }), className),
+      ...props,
+      children: renderTextContent(children, {
+        as: "span",
+        className: "inline-flex items-center gap-2 text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+        size: "tiny",
+        style: inheritedTextStyle
+      })
+    }
+  );
+}
+var TableActionButton = React27.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
+  return /* @__PURE__ */ jsx30(
+    Button,
     {
-      "data-slot": "table-caption",
       ref,
-      className: cn(
-        "mt-4 text-left [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-[#7D87A8]",
-        className
-      ),
+      type,
+      variant: "ghost",
+      size: "icon",
+      className: cn(tableActionButtonVariants({ tone }), className),
       ...props,
       children: renderTextContent(children, {
         as: "span",
-        className: "block text-inherit",
+        className: "inline-flex items-center justify-center text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
         size: "body",
         style: inheritedTextStyle
       })
     }
   );
 });
-function TableStatusBadge({ className, tone, children, ...props }) {
-  return /* @__PURE__ */ jsx30(Badge, { variant: "pill", className: cn(tableStatusBadgeVariants({ tone }), className), ...props, children: renderTextContent(children, {
-    as: "span",
-    className: "inline-flex items-center gap-2 text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
-    size: "tiny",
-    style: inheritedTextStyle
-  }) });
-}
-var TableActionButton = React27.forwardRef(
-  function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx30(
-      Button,
-      {
-        ref,
-        type,
-        variant: "ghost",
-        size: "icon",
-        className: cn(tableActionButtonVariants({ tone }), className),
-        ...props,
-        children: renderTextContent(children, {
-          as: "span",
-          className: "inline-flex items-center justify-center text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
-          size: "body",
-          style: inheritedTextStyle
-        })
-      }
-    );
-  }
-);
-var TableActions = React27.forwardRef(
-  function TableActions2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx30("div", { ref, className: cn("flex items-center gap-6", className), ...props });
-  }
-);
+var TableActions = React27.forwardRef(function TableActions2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx30(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center gap-6", className),
+      ...props
+    }
+  );
+});
 Table.displayName = "Table";
 TableHeader.displayName = "TableHeader";
 TableBody.displayName = "TableBody";
@@ -4291,7 +4442,10 @@ function Tabs({
           TabsPrimitive.List,
           {
             "aria-label": "Subtelas navegaveis",
-            className: cn("flex w-full items-center border-b border-[#D9E2FA]", listClassName),
+            className: cn(
+              "flex w-full items-center border-b border-[color:var(--sofya-border-strong)]",
+              listClassName
+            ),
             children: items.map((item) => {
               const isUnavailable = item.disabled || item.loading;
               const isActive = item.value === currentValue;
@@ -4301,8 +4455,8 @@ function Tabs({
                   value: item.value,
                   disabled: isUnavailable,
                   className: cn(
-                    "relative inline-flex min-h-[76px] shrink-0 items-center justify-center px-8 pb-4 pt-6 text-[18px] font-semibold leading-none tracking-[-0.01em] text-[#94A3B8] transition-[color,opacity] duration-sofya ease-sofya focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D9E2FA]/60 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:text-[#CBD5E1] data-[state=active]:text-primary",
-                    item.loading && "disabled:text-[#A8B4C8]",
+                    "relative inline-flex min-h-[76px] shrink-0 items-center justify-center px-8 pb-4 pt-6 text-[18px] font-semibold leading-none tracking-[-0.01em] text-[color:var(--sofya-text-subtle)] transition-[color,opacity] duration-sofya ease-sofya focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 disabled:pointer-events-none disabled:text-[color:var(--sofya-text-placeholder)] data-[state=active]:text-primary",
+                    item.loading && "disabled:text-[color:var(--sofya-text-soft)]",
                     triggerClassName,
                     item.triggerClassName
                   ),
@@ -4349,7 +4503,11 @@ function Tabs({
             TabsPrimitive.Content,
             {
               value: item.value,
-              className: cn("pt-6 focus:outline-none", contentClassName, item.contentClassName),
+              className: cn(
+                "pt-6 focus:outline-none",
+                contentClassName,
+                item.contentClassName
+              ),
               children: renderTextContent(item.content, {
                 as: "span"
               })
@@ -4367,7 +4525,15 @@ Tabs.displayName = "Tabs";
 import * as React29 from "react";
 import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 var Textarea = React29.forwardRef(
-  ({ className, containerClassName, id, label, labelClassName, rows = 5, ...props }, ref) => {
+  ({
+    className,
+    containerClassName,
+    id,
+    label,
+    labelClassName,
+    rows = 5,
+    ...props
+  }, ref) => {
     const generatedId = React29.useId();
     const resolvedId = id ?? generatedId;
     const ariaLabel = props["aria-label"] ?? (typeof label === "string" ? label : void 0);
@@ -4375,7 +4541,7 @@ var Textarea = React29.forwardRef(
       "textarea",
       {
         className: cn(
-          "flex min-h-[120px] w-full resize-y rounded-[10px] border border-[#D9E2FA] bg-card px-4 py-2 text-[16px] font-normal leading-[22px] tracking-[-0.02em] text-[var(--sofya-tag-navy)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya placeholder:text-[color:var(--sofya-tag-navy)]/50 hover:border-[#C9D5FF] focus:border-[#C9D5FF] focus:outline-none focus:ring-2 focus:ring-[#D9E2FA]/60 focus:ring-offset-0 active:border-[#C9D5FF] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50",
+          "flex min-h-[120px] w-full resize-y rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 py-2 text-[16px] font-normal leading-[22px] tracking-[-0.02em] text-[color:var(--sofya-text-default)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya placeholder:text-[color:var(--sofya-text-placeholder)] hover:border-[color:var(--sofya-border-hover)] focus:border-[color:var(--sofya-border-hover)] focus:outline-none focus:ring-2 focus:ring-[color:var(--sofya-focus-ring-soft)] focus:ring-offset-0 active:border-[color:var(--sofya-border-hover)] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50",
           className
         ),
         id: resolvedId,
@@ -4392,11 +4558,14 @@ var Textarea = React29.forwardRef(
       label ? /* @__PURE__ */ jsx32(
         "label",
         {
-          className: cn("text-[var(--sofya-tag-navy)]", labelClassName),
+          className: cn(
+            "text-[color:var(--sofya-text-default)]",
+            labelClassName
+          ),
           htmlFor: resolvedId,
           children: renderTextContent(label, {
             as: "span",
-            className: "block text-[var(--sofya-tag-navy)]",
+            className: "block text-[color:var(--sofya-text-default)]",
             size: "h4",
             style: {
               fontWeight: 500,
@@ -4426,13 +4595,13 @@ var TooltipContent = React30.forwardRef(function TooltipContent2({ className, si
       ref,
       sideOffset,
       className: cn(
-        "sofya-tooltip-content z-50 max-w-[260px] overflow-hidden rounded-[12px] border border-[#D9E2FA] bg-[#222B4C] px-4 py-2 text-white shadow-[0px_16px_32px_-18px_rgba(34,43,76,0.55)]",
+        "sofya-tooltip-content z-50 max-w-[260px] overflow-hidden rounded-[12px] border border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tooltip-background)] px-4 py-2 text-[color:var(--sofya-tooltip-foreground)] shadow-[var(--sofya-shadow-tooltip)]",
         className
       ),
       ...props,
       children: renderTextContent(props.children, {
         as: "span",
-        className: "block text-white",
+        className: "block text-[color:var(--sofya-tooltip-foreground)]",
         size: "tiny",
         style: {
           fontWeight: 500,