@altruist03/ui 0.0.0-stage → 0.2.0

package/src/tokens/index.ts

@@ -0,0 +1,3665 @@
+// Foundation tokens
+import foundationSize from './foundation/size.json';
+import foundationSpacing from './foundation/spacing.json';
+import foundationRadius from './foundation/radius.json';
+import foundationColors from './foundation/colors.json';
+import foundationTypography from './foundation/typography.json';
+import foundationOpacity from './foundation/opacity.json';
+import foundationBreakpoints from './foundation/breakpoints.json';
+
+// Semantic tokens
+import semanticColor from './semantic/color.json';
+import semanticSpacing from './semantic/spacing.json';
+import semanticTypography from './semantic/typography.json';
+import semanticField from './semantic/field.json';
+import semanticSize from './semantic/size.json';
+import semanticOpacity from './semantic/opacity.json';
+
+// Component tokens
+import componentButton from './components/button.json';
+import componentInput from './components/input.json';
+import componentTextfield from './components/textfield.json';
+import componentCard from './components/card.json';
+import componentCheckbox from './components/checkbox.json';
+import componentSelectScroll from './components/selectscroll.json';
+import componentSelector from './components/selector.json';
+import componentDatePicker from './components/datepicker.json';
+import componentField from './components/field.json';
+import componentRadio from './components/radio.json';
+import componentPagination from './components/pagination.json';
+import componentCloseButton from './components/closebutton.json';
+import componentAvatar from './components/avatar.json';
+import componentTabs from './components/tabs.json';
+import componentSubTabs from './components/subtabs.json';
+import componentMenu from './components/menu.json';
+import componentFileUpload from './components/fileupload.json';
+import componentUploadDropzone from './components/uploaddropzone.json';
+import componentPhonefield from './components/phonefield.json';
+import componentBadge from './components/badge.json';
+import componentFilterPopover from './components/filterpopover.json';
+import componentToggleButton from './components/togglebutton.json';
+import componentSwitch from './components/switch.json';
+import componentBreadcrumb from './components/breadcrumb.json';
+import componentLoader from './components/loader.json';
+import componentDataTable from './components/datatable.json';
+import componentModal from './components/modal.json';
+import componentDrawer from './components/drawer.json';
+import componentProgress from './components/progress.json';
+import componentSkeleton from './components/skeleton.json';
+import componentIpWhitelistField from './components/ipwhitelistfield.json';
+import componentStepper from './components/stepper.json';
+import componentAccordion from './components/accordion.json';
+import componentReportCard from './components/reportcard.json';
+
+// Brand theme tokens (per-brand, per-mode)
+import firebirdLight from './brands/firebird/themes/light.json';
+import firebirdDark from './brands/firebird/themes/dark.json';
+import cpcLight from './brands/cpc/themes/light.json';
+import cpcDark from './brands/cpc/themes/dark.json';
+
+import type {
+  ButtonVariant,
+  ButtonSize,
+  ButtonShape,
+  ButtonColorToken,
+  ButtonSizeToken,
+} from './button';
+
+export type BrandKey = 'firebird' | 'cpc';
+export type ThemeMode = 'light' | 'dark';
+
+export type ScreenKey = 'mobile' | 'tablet' | 'laptop' | 'desktop' | 'wide' | 'ultra';
+
+export interface GetTokensOptions {
+  brand?: BrandKey;
+  mode?: ThemeMode;
+  /** Current screen for responsive size resolution. If omitted, detected from window (client) or "desktop" (SSR). */
+  screen?: ScreenKey;
+}
+
+export interface ResolvedTokens {
+  foundation: Record<string, any>;
+  semantic: Record<string, any>;
+  components: Record<string, any>;
+  brands: Record<BrandKey, Record<ThemeMode, any>>;
+}
+
+/* ---------------------------------- */
+/* Utilities */
+/* ---------------------------------- */
+
+function resolveTokenReferences(obj: any, tokens: any): any {
+  if (typeof obj === 'string') {
+    return obj.replace(/\{([^}]+)\}/g, (match, path) => {
+      const keys = path.split('.');
+      let value: any = tokens;
+      for (const key of keys) {
+        value = value?.[key];
+        if (value === undefined) break;
+      }
+      return value !== undefined ? value : match;
+    });
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => resolveTokenReferences(item, tokens));
+  }
+
+  if (obj && typeof obj === 'object') {
+    const resolved: any = {};
+    for (const key in obj) {
+      resolved[key] = resolveTokenReferences(obj[key], tokens);
+    }
+    return resolved;
+  }
+
+  return obj;
+}
+
+function deepMerge(base: any, override: any): any {
+  if (!override) return base;
+
+  const result = { ...base };
+
+  for (const key in override) {
+    const baseValue = base[key];
+    const overrideValue = override[key];
+
+    if (
+      baseValue &&
+      typeof baseValue === 'object' &&
+      !Array.isArray(baseValue) &&
+      overrideValue &&
+      typeof overrideValue === 'object' &&
+      !Array.isArray(overrideValue)
+    ) {
+      result[key] = deepMerge(baseValue, overrideValue);
+    } else {
+      result[key] = overrideValue;
+    }
+  }
+
+  return result;
+}
+
+export function getScreen(breakpoints: Record<string, number>): ScreenKey {
+  if (typeof window === 'undefined') return 'desktop';
+
+  const width = window.innerWidth;
+
+  if (width >= breakpoints.ultra) return 'ultra';
+  if (width >= breakpoints.wide) return 'wide';
+  if (width >= breakpoints.desktop) return 'desktop';
+  if (width >= breakpoints.laptop) return 'laptop';
+  if (width >= breakpoints.tablet) return 'tablet';
+  return 'mobile';
+}
+
+const DEFAULT_BREAKPOINTS: Record<string, number> = {
+  mobile: 0,
+  tablet: 768,
+  laptop: 1024,
+  desktop: 1440,
+  wide: 1920,
+  ultra: 2560,
+};
+
+/** Breakpoints used for responsive size resolution. Use with getScreen() and getTokens({ screen }). */
+export function getBreakpoints(): Record<string, number> {
+  return (foundationBreakpoints as any)?.breakpoints ?
+      { ...(foundationBreakpoints as any).breakpoints }
+    : { ...DEFAULT_BREAKPOINTS };
+}
+
+const BREAKPOINT_KEYS = ['mobile', 'tablet', 'laptop', 'desktop', 'wide', 'ultra'];
+
+function parsePxToNumber(value: unknown): number | undefined {
+  if (typeof value === 'number' && !Number.isNaN(value)) return value;
+  if (typeof value === 'string') {
+    const num = parseInt(value.replace(/px$/i, ''), 10);
+    return Number.isNaN(num) ? undefined : num;
+  }
+  return undefined;
+}
+
+function pickBreakpoint(obj: any, screen: ScreenKey): any {
+  const chosen = obj?.[screen];
+  if (chosen !== undefined) return chosen;
+  for (const bp of BREAKPOINT_KEYS) {
+    if (obj?.[bp] !== undefined) return obj[bp];
+  }
+  return undefined;
+}
+
+function resolveResponsiveSizes(rawSizes: any, screen: ScreenKey): any {
+  const resolved: any = {};
+
+  for (const sizeKey in rawSizes) {
+    const sizeToken = rawSizes[sizeKey];
+
+    // Non-responsive tokens (like control.radius)
+    if (!sizeToken.mobile && typeof sizeToken !== 'object') {
+      resolved[sizeKey] = sizeToken;
+      continue;
+    }
+
+    // Top-level breakpoint keys: pick one for current screen
+    const hasBreakpoint = BREAKPOINT_KEYS.some((bp) => sizeToken[bp]);
+    if (hasBreakpoint) {
+      resolved[sizeKey] = pickBreakpoint(sizeToken, screen);
+      continue;
+    }
+
+    // Nested responsive (e.g. radio: { sm: { mobile, tablet, ... }, md: {...}, lg: {...} })
+    const firstVal = sizeToken?.sm ?? sizeToken?.md ?? sizeToken?.lg;
+    const nestedHasBreakpoint =
+      firstVal && typeof firstVal === 'object' && BREAKPOINT_KEYS.some((bp) => firstVal[bp]);
+    if (nestedHasBreakpoint && sizeToken && typeof sizeToken === 'object') {
+      resolved[sizeKey] = {};
+      for (const variantKey of Object.keys(sizeToken)) {
+        const chosen = pickBreakpoint(sizeToken[variantKey], screen);
+        if (chosen !== undefined) resolved[sizeKey][variantKey] = chosen;
+      }
+      continue;
+    }
+
+    // Variant-only, no breakpoints — keep as-is
+    resolved[sizeKey] = sizeToken;
+  }
+
+  return resolved;
+}
+
+/* ---------------------------------- */
+/* Foundation tokens */
+/* ---------------------------------- */
+
+const foundation = {
+  size: foundationSize.size,
+  spacing: foundationSpacing.spacing,
+  radius: foundationRadius.radius,
+  colors: foundationColors.colors,
+  typography: foundationTypography.typography,
+  opacity: foundationOpacity.opacity,
+};
+
+const allTokens = { ...foundation };
+
+/* ---------------------------------- */
+/* Semantic base */
+/* ---------------------------------- */
+
+const semanticBase = {
+  color: resolveTokenReferences(semanticColor.color, allTokens),
+  spacing: resolveTokenReferences(semanticSpacing.spacing, allTokens),
+  typography: resolveTokenReferences(semanticTypography.typography, allTokens),
+  opacity: resolveTokenReferences(semanticOpacity.opacity, allTokens),
+};
+
+/* ---------------------------------- */
+/* Brand theme resolution (brand + mode) */
+/* ---------------------------------- */
+
+const resolvedBrandThemes = {
+  firebird: {
+    light: {
+      color: resolveTokenReferences(firebirdLight.color || {}, allTokens),
+      spacing: resolveTokenReferences((firebirdLight as any).spacing || {}, allTokens),
+      typography: resolveTokenReferences((firebirdLight as any).typography || {}, allTokens),
+    },
+    dark: {
+      color: resolveTokenReferences(firebirdDark.color || {}, allTokens),
+      spacing: resolveTokenReferences((firebirdDark as any).spacing || {}, allTokens),
+      typography: resolveTokenReferences((firebirdDark as any).typography || {}, allTokens),
+    },
+  },
+  cpc: {
+    light: {
+      color: resolveTokenReferences((cpcLight as any).color || {}, allTokens),
+      spacing: resolveTokenReferences((cpcLight as any).spacing || {}, allTokens),
+      typography: resolveTokenReferences((cpcLight as any).typography || {}, allTokens),
+    },
+    dark: {
+      color: resolveTokenReferences(cpcDark.color || {}, allTokens),
+      spacing: resolveTokenReferences((cpcDark as any).spacing || {}, allTokens),
+      typography: resolveTokenReferences((cpcDark as any).typography || {}, allTokens),
+    },
+  },
+};
+
+/* ---------------------------------- */
+/* Active brand */
+/* ---------------------------------- */
+
+export const activeBrandKey: BrandKey =
+  (typeof process !== 'undefined' &&
+    (process as any).env?.DESIGN_SYSTEM_BRAND === 'firebird' &&
+    'firebird') ||
+  'cpc';
+
+/* ---------------------------------- */
+/* Main resolver */
+/* ---------------------------------- */
+
+export function getTokens(options: GetTokensOptions = {}): ResolvedTokens {
+  const brand: BrandKey = options.brand ?? activeBrandKey;
+  const mode: ThemeMode = options.mode ?? 'light';
+
+  // Step 1: semantic base
+  let mergedSemanticColor = { ...semanticBase.color };
+  let mergedSemanticSpacing = { ...semanticBase.spacing };
+  let mergedSemanticTypography = { ...semanticBase.typography };
+
+  // Step 2: apply brand-specific theme (brand + mode)
+  const brandTheme = resolvedBrandThemes[brand]?.[mode] || {};
+  mergedSemanticColor = deepMerge(mergedSemanticColor, brandTheme.color || {});
+  mergedSemanticSpacing = deepMerge(mergedSemanticSpacing, brandTheme.spacing || {});
+  mergedSemanticTypography = deepMerge(mergedSemanticTypography, brandTheme.typography || {});
+
+  const mergedSemanticOpacity = semanticBase.opacity;
+
+  const mergedSemantic = {
+    color: mergedSemanticColor,
+    spacing: mergedSemanticSpacing,
+    typography: mergedSemanticTypography,
+    opacity: mergedSemanticOpacity,
+  };
+
+  /* ---------- resolve semantic size ---------- */
+
+  const semanticContext = {
+    ...allTokens,
+    ...mergedSemantic,
+    spacing: {
+      ...(allTokens.spacing || {}),
+      ...(mergedSemantic.spacing || {}),
+    },
+  };
+
+  // Resolve raw semantic size tokens
+  const rawSemanticSize = resolveTokenReferences(semanticSize.size, semanticContext);
+
+  // Get breakpoints
+  const breakpoints = (foundationBreakpoints as any)?.breakpoints || {
+    mobile: 0,
+    tablet: 768,
+    laptop: 1024,
+    desktop: 1440,
+    wide: 1920,
+    ultra: 2560,
+  };
+
+  // Use provided screen or detect from window (client-only; SSR falls back to "desktop")
+  const screen = options.screen ?? getScreen(breakpoints);
+
+  // Resolve responsive sizes
+  const resolvedSemanticSize = resolveResponsiveSizes(rawSemanticSize, screen);
+
+  const resolvedSemanticField = resolveTokenReferences(semanticField.field, {
+    ...semanticContext,
+    semantic: {
+      ...mergedSemantic,
+      size: resolvedSemanticSize,
+    },
+  });
+
+  const finalSemantic = {
+    ...mergedSemantic,
+    size: resolvedSemanticSize,
+    field: resolvedSemanticField,
+  };
+
+  /* ---------- resolve components ---------- */
+
+  const componentContext = {
+    ...allTokens,
+    ...finalSemantic,
+    typography: {
+      ...(allTokens.typography || {}),
+      ...(finalSemantic.typography || {}),
+    },
+    semantic: finalSemantic,
+    spacing: {
+      ...(allTokens.spacing || {}),
+      ...(finalSemantic.spacing || {}),
+    },
+    size: {
+      ...(allTokens.size || {}),
+      ...(finalSemantic.size || {}),
+    },
+  };
+
+  const resolvedComponents = {
+    button: resolveTokenReferences(componentButton.button, componentContext),
+    input: resolveTokenReferences(componentInput.input, componentContext),
+    textfield: resolveTokenReferences(componentTextfield.textfield, componentContext),
+    card: resolveTokenReferences(componentCard.card, componentContext),
+    statCard: resolveTokenReferences(componentCard.statCard, componentContext),
+    checkbox: resolveTokenReferences(componentCheckbox.checkbox, componentContext),
+    selectscroll: resolveTokenReferences(componentSelectScroll.selectscroll, componentContext),
+    selector: resolveTokenReferences(componentSelector.selector, componentContext),
+    datepicker: resolveTokenReferences(componentDatePicker.datepicker, componentContext),
+    field: resolveTokenReferences(componentField.field, componentContext),
+    radio: resolveTokenReferences(componentRadio.radio, componentContext),
+    pagination: resolveTokenReferences(componentPagination.pagination, componentContext),
+    closebutton: resolveTokenReferences(componentCloseButton.closebutton, componentContext),
+    avatar: resolveTokenReferences(componentAvatar.avatar, componentContext),
+    tabs: resolveTokenReferences(componentTabs.tabs, componentContext),
+    subTabs: resolveTokenReferences(componentSubTabs.subTabs, componentContext),
+    menu: resolveTokenReferences(componentMenu.menu, componentContext),
+    fileupload: resolveTokenReferences(componentFileUpload.fileupload, componentContext),
+    uploaddropzone: resolveTokenReferences(
+      componentUploadDropzone.uploaddropzone,
+      componentContext
+    ),
+    phonefield: resolveTokenReferences(componentPhonefield.phonefield, componentContext),
+    badge: resolveTokenReferences(componentBadge.badge, componentContext),
+    filterpopover: resolveTokenReferences(componentFilterPopover.filterpopover, componentContext),
+    togglebutton: resolveTokenReferences(componentToggleButton.toggleButton, componentContext),
+    switch: resolveTokenReferences(componentSwitch.switch, componentContext),
+    breadcrumb: resolveTokenReferences(componentBreadcrumb.breadcrumb, componentContext),
+    loader: resolveTokenReferences(componentLoader.loader, componentContext),
+    datatable: resolveTokenReferences(componentDataTable.datatable, componentContext),
+    modal: resolveTokenReferences(componentModal.modal, componentContext),
+    drawer: resolveTokenReferences(componentDrawer.drawer, componentContext),
+    progress: resolveTokenReferences(componentProgress.progress, componentContext),
+    skeleton: resolveTokenReferences(componentSkeleton.skeleton, componentContext),
+    ipwhitelistfield: resolveTokenReferences(
+      componentIpWhitelistField.ipwhitelistfield,
+      componentContext
+    ),
+    stepper: resolveTokenReferences(componentStepper.stepper, componentContext),
+    accordion: resolveTokenReferences(componentAccordion.accordion, componentContext),
+    reportcard: resolveTokenReferences(componentReportCard.reportcard, componentContext),
+  };
+
+  return {
+    foundation,
+    semantic: finalSemantic,
+    components: resolvedComponents,
+    brands: resolvedBrandThemes,
+  };
+}
+
+/* ---------------------------------- */
+/* Default export tokens */
+/* ---------------------------------- */
+
+const defaultResolved = getTokens({
+  brand: activeBrandKey,
+  mode: 'light',
+});
+
+const components = defaultResolved.components;
+const mergedSemantic = defaultResolved.semantic;
+const mergedSemanticColor = defaultResolved.semantic.color;
+
+export const tokens = {
+  foundation: defaultResolved.foundation,
+  semantic: defaultResolved.semantic,
+  components: defaultResolved.components,
+  brands: defaultResolved.brands,
+};
+
+// Export individual token categories for convenience
+export { foundation };
+export { components };
+export { mergedSemantic as semantic };
+export { resolvedBrandThemes as brands };
+
+// Legacy exports for backward compatibility
+export const COLORS = {
+  primary: mergedSemanticColor.primary?.default ?? semanticBase.color.primary.default,
+  secondary: semanticBase.color.secondary.default,
+  ghostText: mergedSemanticColor.primary?.default ?? semanticBase.color.primary.default,
+  ghostHover: semanticBase.color.primary.light,
+};
+
+// Button token types (re-export from button.ts)
+export type {
+  ButtonVariant,
+  ButtonSize,
+  ButtonShape,
+  ButtonColorToken,
+  ButtonSizeToken,
+} from './button';
+
+// Button tokens (resolved: component → semantic → brand → foundation; no hardcoded values)
+export const BUTTON_COLORS: Record<ButtonVariant, ButtonColorToken> = {
+  blue: {
+    background: components.button.variant.blue.background,
+    color: components.button.variant.blue.color,
+    hover: components.button.variant.blue.hover.background,
+    border: components.button.variant.blue.border,
+  },
+  red: {
+    background: components.button.variant.red.background,
+    color: components.button.variant.red.color,
+    hover: components.button.variant.red.hover.background,
+    border: components.button.variant.red.border,
+  },
+  grey: {
+    background: components.button.variant.grey.background,
+    color: components.button.variant.grey.color,
+    hover: components.button.variant.grey.hover.background,
+    border: components.button.variant.grey.border,
+  },
+};
+
+export const BUTTON_SIZES: Record<ButtonSize, ButtonSizeToken> = {
+  sm: {
+    width: components.button.size.sm.width,
+    height: components.button.size.sm.height,
+    padding: components.button.size.sm.padding,
+    fontSize: parseInt(components.button.size.sm.fontSize),
+    borderRadius: components.button.size.sm.borderRadius,
+    contentGap: parseInt(String((components.button.size.sm as any)?.contentGap ?? '5'), 10),
+  },
+  md: {
+    width: components.button.size.md.width,
+    height: components.button.size.md.height,
+    padding: components.button.size.md.padding,
+    fontSize: parseInt(components.button.size.md.fontSize),
+    borderRadius: components.button.size.md.borderRadius,
+    contentGap: parseInt(String((components.button.size.md as any)?.contentGap ?? '8'), 10),
+  },
+  lg: {
+    width: components.button.size.lg.width,
+    height: components.button.size.lg.height,
+    padding: components.button.size.lg.padding,
+    fontSize: parseInt(components.button.size.lg.fontSize),
+    borderRadius: components.button.size.lg.borderRadius,
+    contentGap: parseInt(String((components.button.size.lg as any)?.contentGap ?? '12'), 10),
+  },
+};
+
+export const BUTTON_SHAPES: Record<ButtonShape, string | number> = {
+  rounded: components.button.shape.rounded,
+  square: components.button.shape.square,
+  pill: components.button.shape.pill,
+};
+
+export interface ButtonTokensFromResolved {
+  colors: Record<ButtonVariant, ButtonColorToken>;
+  sizes: Record<ButtonSize, ButtonSizeToken>;
+}
+
+/** Build Button tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when theme mode (light/dark) or brand changes. */
+export function getButtonTokensFromResolved(resolved: ResolvedTokens): ButtonTokensFromResolved {
+  const btn = resolved.components?.button as Record<string, any> | undefined;
+  if (!btn?.variant || !btn?.size) {
+    return { colors: BUTTON_COLORS, sizes: BUTTON_SIZES };
+  }
+  const v = btn.variant;
+  const s = btn.size;
+  const blue = v.blue ?? {};
+  const red = v.red ?? {};
+  const grey = v.grey ?? {};
+  const sm = s.sm ?? {};
+  const md = s.md ?? {};
+  const lg = s.lg ?? {};
+  return {
+    colors: {
+      blue: {
+        background: blue.background ?? BUTTON_COLORS.blue.background,
+        color: blue.color ?? BUTTON_COLORS.blue.color,
+        hover: blue.hover?.background ?? BUTTON_COLORS.blue.hover,
+        hoverTextColor: blue.hover?.color,
+        border: blue.border ?? BUTTON_COLORS.blue.border,
+      },
+      red: {
+        background: red.background ?? BUTTON_COLORS.red.background,
+        color: red.color ?? BUTTON_COLORS.red.color,
+        hover: red.hover?.background ?? BUTTON_COLORS.red.hover,
+        hoverTextColor: red.hover?.color,
+        border: red.border ?? BUTTON_COLORS.red.border,
+      },
+      grey: {
+        background: grey.background ?? BUTTON_COLORS.grey.background,
+        color: grey.color ?? BUTTON_COLORS.grey.color,
+        hover: grey.hover?.background ?? BUTTON_COLORS.grey.hover,
+        hoverTextColor: grey.hover?.color,
+        border: grey.border ?? BUTTON_COLORS.grey.border,
+      },
+    },
+    sizes: {
+      sm: {
+        width: sm.width,
+        height: sm.height ?? BUTTON_SIZES.sm.height,
+        padding: sm.padding ?? BUTTON_SIZES.sm.padding,
+        fontSize:
+          typeof sm.fontSize === 'number' ?
+            sm.fontSize
+          : parseInt(String(sm.fontSize ?? BUTTON_SIZES.sm.fontSize), 10),
+        borderRadius: sm.borderRadius ?? BUTTON_SIZES.sm.borderRadius,
+        contentGap: parseInt(
+          String((sm as any)?.contentGap ?? BUTTON_SIZES.sm.contentGap ?? 5),
+          10
+        ),
+      },
+      md: {
+        width: md.width,
+        height: md.height ?? BUTTON_SIZES.md.height,
+        padding: md.padding ?? BUTTON_SIZES.md.padding,
+        fontSize:
+          typeof md.fontSize === 'number' ?
+            md.fontSize
+          : parseInt(String(md.fontSize ?? BUTTON_SIZES.md.fontSize), 10),
+        borderRadius: md.borderRadius ?? BUTTON_SIZES.md.borderRadius,
+        contentGap: parseInt(
+          String((md as any)?.contentGap ?? BUTTON_SIZES.md.contentGap ?? 8),
+          10
+        ),
+      },
+      lg: {
+        width: lg.width,
+        height: lg.height ?? BUTTON_SIZES.lg.height,
+        padding: lg.padding ?? BUTTON_SIZES.lg.padding,
+        fontSize:
+          typeof lg.fontSize === 'number' ?
+            lg.fontSize
+          : parseInt(String(lg.fontSize ?? BUTTON_SIZES.lg.fontSize), 10),
+        borderRadius: lg.borderRadius ?? BUTTON_SIZES.lg.borderRadius,
+        contentGap: parseInt(
+          String((lg as any)?.contentGap ?? BUTTON_SIZES.lg.contentGap ?? 12),
+          10
+        ),
+      },
+    },
+  };
+}
+
+// CloseButton token types (aligned with components/closebutton.json)
+export type CloseButtonVariant = 'filled' | 'outline';
+export type CloseButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+// CloseButton tokens (legacy format; from components/closebutton.json). Flattened like TextFieldTokens.
+export interface CloseButtonTokens {
+  sizeXs: string;
+  sizeSm: string;
+  sizeMd: string;
+  sizeLg: string;
+  paddingXs: string;
+  paddingSm: string;
+  paddingMd: string;
+  paddingLg: string;
+  iconSizeXs: string;
+  iconSizeSm: string;
+  iconSizeMd: string;
+  iconSizeLg: string;
+  borderRadiusXs: string;
+  borderRadiusSm: string;
+  borderRadiusMd: string;
+  borderRadiusLg: string;
+  filledBackground: string;
+  filledBackgroundWhite: string;
+  filledColor: string;
+  filledHoverBackground: string;
+  filledHoverBackgroundWhite: string;
+  filledHoverColor: string;
+  filledBorder: string;
+  outlineBackground: string;
+  outlineColor: string;
+  outlineBorder: string;
+  outlineHoverBorder: string;
+  outlineHoverColor: string;
+  disabledOpacity: string;
+}
+
+const closeBtn = components.closebutton;
+const closeBtnSize = closeBtn.size;
+export const CLOSEBUTTON_TOKENS: CloseButtonTokens = {
+  sizeXs: closeBtnSize.xs.size,
+  sizeSm: closeBtnSize.sm.size,
+  sizeMd: closeBtnSize.md.size,
+  sizeLg: closeBtnSize.lg.size,
+  paddingXs: closeBtnSize.xs.padding,
+  paddingSm: closeBtnSize.sm.padding,
+  paddingMd: closeBtnSize.md.padding,
+  paddingLg: closeBtnSize.lg.padding,
+  iconSizeXs: closeBtnSize.xs.iconSize,
+  iconSizeSm: closeBtnSize.sm.iconSize,
+  iconSizeMd: closeBtnSize.md.iconSize,
+  iconSizeLg: closeBtnSize.lg.iconSize,
+  borderRadiusXs: closeBtnSize.xs.borderRadius,
+  borderRadiusSm: closeBtnSize.sm.borderRadius,
+  borderRadiusMd: closeBtnSize.md.borderRadius,
+  borderRadiusLg: closeBtnSize.lg.borderRadius,
+  filledBackground: closeBtn.variant.filled.background,
+  filledBackgroundWhite:
+    closeBtn.variant.filled.backgroundWhite ?? closeBtn.variant.filled.background,
+  filledColor: closeBtn.variant.filled.color,
+  filledHoverBackground:
+    closeBtn.variant.filled.hover?.background ?? closeBtn.variant.filled.background,
+  filledHoverBackgroundWhite:
+    closeBtn.variant.filled.hover?.backgroundWhite ??
+    closeBtn.variant.filled.backgroundWhite ??
+    closeBtn.variant.filled.background,
+  filledHoverColor: closeBtn.variant.filled.hover?.color ?? closeBtn.variant.filled.color,
+  filledBorder: closeBtn.variant.filled.border,
+  outlineBackground: closeBtn.variant.outline.background,
+  outlineColor: closeBtn.variant.outline.color,
+  outlineBorder: closeBtn.variant.outline.border,
+  outlineHoverBorder: closeBtn.variant.outline.hover?.border ?? closeBtn.variant.outline.border,
+  outlineHoverColor: closeBtn.variant.outline.hover?.color ?? closeBtn.variant.outline.color,
+  disabledOpacity: closeBtn.disabled.opacity,
+};
+
+const defaultCloseButtonTokens = CLOSEBUTTON_TOKENS;
+
+/** Build CloseButton tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when screen/brand/mode changes. */
+export function getCloseButtonTokensFromResolved(resolved: ResolvedTokens): CloseButtonTokens {
+  const closeBtnResolved = resolved.components?.closebutton;
+  if (!closeBtnResolved?.size) return defaultCloseButtonTokens;
+  const xs = closeBtnResolved.size.xs as any;
+  const sm = closeBtnResolved.size.sm as any;
+  const md = closeBtnResolved.size.md as any;
+  const lg = closeBtnResolved.size.lg as any;
+  const filled = closeBtnResolved.variant?.filled;
+  const outline = closeBtnResolved.variant?.outline;
+  return {
+    sizeXs: xs?.size ?? defaultCloseButtonTokens.sizeXs,
+    sizeSm: sm?.size ?? defaultCloseButtonTokens.sizeSm,
+    sizeMd: md?.size ?? defaultCloseButtonTokens.sizeMd,
+    sizeLg: lg?.size ?? defaultCloseButtonTokens.sizeLg,
+    paddingXs: xs?.padding ?? defaultCloseButtonTokens.paddingXs,
+    paddingSm: sm?.padding ?? defaultCloseButtonTokens.paddingSm,
+    paddingMd: md?.padding ?? defaultCloseButtonTokens.paddingMd,
+    paddingLg: lg?.padding ?? defaultCloseButtonTokens.paddingLg,
+    iconSizeXs: xs?.iconSize ?? defaultCloseButtonTokens.iconSizeXs,
+    iconSizeSm: sm?.iconSize ?? defaultCloseButtonTokens.iconSizeSm,
+    iconSizeMd: md?.iconSize ?? defaultCloseButtonTokens.iconSizeMd,
+    iconSizeLg: lg?.iconSize ?? defaultCloseButtonTokens.iconSizeLg,
+    borderRadiusXs: xs?.borderRadius ?? defaultCloseButtonTokens.borderRadiusXs,
+    borderRadiusSm: sm?.borderRadius ?? defaultCloseButtonTokens.borderRadiusSm,
+    borderRadiusMd: md?.borderRadius ?? defaultCloseButtonTokens.borderRadiusMd,
+    borderRadiusLg: lg?.borderRadius ?? defaultCloseButtonTokens.borderRadiusLg,
+    filledBackground: filled?.background ?? defaultCloseButtonTokens.filledBackground,
+    filledBackgroundWhite:
+      filled?.backgroundWhite ?? defaultCloseButtonTokens.filledBackgroundWhite,
+    filledColor: filled?.color ?? defaultCloseButtonTokens.filledColor,
+    filledHoverBackground:
+      filled?.hover?.background ?? defaultCloseButtonTokens.filledHoverBackground,
+    filledHoverBackgroundWhite:
+      filled?.hover?.backgroundWhite ?? defaultCloseButtonTokens.filledHoverBackgroundWhite,
+    filledHoverColor: filled?.hover?.color ?? defaultCloseButtonTokens.filledHoverColor,
+    filledBorder: filled?.border ?? defaultCloseButtonTokens.filledBorder,
+    outlineBackground: outline?.background ?? defaultCloseButtonTokens.outlineBackground,
+    outlineColor: outline?.color ?? defaultCloseButtonTokens.outlineColor,
+    outlineBorder: outline?.border ?? defaultCloseButtonTokens.outlineBorder,
+    outlineHoverBorder: outline?.hover?.border ?? defaultCloseButtonTokens.outlineHoverBorder,
+    outlineHoverColor: outline?.hover?.color ?? defaultCloseButtonTokens.outlineHoverColor,
+    disabledOpacity: closeBtnResolved.disabled?.opacity ?? defaultCloseButtonTokens.disabledOpacity,
+  };
+}
+
+// Avatar token types (aligned with components/avatar.json)
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+
+export interface AvatarTokens {
+  background: string;
+  textColor: string;
+  iconColor: string;
+  placeholderBackground: string;
+  placeholderShape: string;
+  shapeCircle: string;
+  shapeSquare: string;
+  sizeXs: string;
+  sizeSm: string;
+  sizeMd: string;
+  sizeLg: string;
+  sizeXl: string;
+  sizeXxl: string;
+  sizeXxxl: string;
+  fontSizeXs: string;
+  fontSizeSm: string;
+  fontSizeMd: string;
+  fontSizeLg: string;
+  fontSizeXl: string;
+  fontSizeXxl: string;
+  fontSizeXxxl: string;
+  iconSizeXs: string;
+  iconSizeSm: string;
+  iconSizeMd: string;
+  iconSizeLg: string;
+  iconSizeXl: string;
+  iconSizeXxl: string;
+  iconSizeXxxl: string;
+}
+
+const avatarComp = components.avatar;
+const avatarSize = avatarComp.size;
+const avatarFontSize = avatarComp.fontSize;
+const avatarIconSize = avatarComp.iconSize;
+export const AVATAR_TOKENS: AvatarTokens = {
+  background: avatarComp.background,
+  textColor: avatarComp.textColor,
+  iconColor: avatarComp.iconColor,
+  placeholderBackground: avatarComp.placeholderBackground,
+  placeholderShape: avatarComp.placeholderShape,
+  shapeCircle: avatarComp.shape?.circle ?? '9999px',
+  shapeSquare: avatarComp.shape?.square ?? '2px',
+  sizeXs: avatarSize?.xs ?? '20px',
+  sizeSm: avatarSize?.sm ?? '28px',
+  sizeMd: avatarSize?.md ?? '36px',
+  sizeLg: avatarSize?.lg ?? '44px',
+  sizeXl: avatarSize?.xl ?? '60px',
+  sizeXxl: avatarSize?.xxl ?? '76px',
+  sizeXxxl: avatarSize?.xxxl ?? '116px',
+  fontSizeXs: avatarFontSize?.xs ?? '12px',
+  fontSizeSm: avatarFontSize?.sm ?? '14px',
+  fontSizeMd: avatarFontSize?.md ?? '16px',
+  fontSizeLg: avatarFontSize?.lg ?? '18px',
+  fontSizeXl: avatarFontSize?.xl ?? '20px',
+  fontSizeXxl: avatarFontSize?.xxl ?? '24px',
+  fontSizeXxxl: avatarFontSize?.xxxl ?? '30px',
+  iconSizeXs: avatarIconSize?.xs ?? '12px',
+  iconSizeSm: avatarIconSize?.sm ?? '14px',
+  iconSizeMd: avatarIconSize?.md ?? '16px',
+  iconSizeLg: avatarIconSize?.lg ?? '18px',
+  iconSizeXl: avatarIconSize?.xl ?? '20px',
+  iconSizeXxl: avatarIconSize?.xxl ?? '24px',
+  iconSizeXxxl: avatarIconSize?.xxxl ?? '30px',
+};
+
+const defaultAvatarTokens = AVATAR_TOKENS;
+
+/** Build Avatar tokens from resolved tokens (e.g. from useTokens()). */
+export function getAvatarTokensFromResolved(resolved: ResolvedTokens): AvatarTokens {
+  const a = resolved.components?.avatar;
+  if (!a) return defaultAvatarTokens;
+  const size = a.size ?? {};
+  const fontSize = a.fontSize ?? {};
+  const iconSize = a.iconSize ?? {};
+  return {
+    background: a.background ?? defaultAvatarTokens.background,
+    textColor: a.textColor ?? defaultAvatarTokens.textColor,
+    iconColor: a.iconColor ?? defaultAvatarTokens.iconColor,
+    placeholderBackground: a.placeholderBackground ?? defaultAvatarTokens.placeholderBackground,
+    placeholderShape: a.placeholderShape ?? defaultAvatarTokens.placeholderShape,
+    shapeCircle: a.shape?.circle ?? defaultAvatarTokens.shapeCircle,
+    shapeSquare: a.shape?.square ?? defaultAvatarTokens.shapeSquare,
+    sizeXs: size.xs ?? defaultAvatarTokens.sizeXs,
+    sizeSm: size.sm ?? defaultAvatarTokens.sizeSm,
+    sizeMd: size.md ?? defaultAvatarTokens.sizeMd,
+    sizeLg: size.lg ?? defaultAvatarTokens.sizeLg,
+    sizeXl: size.xl ?? defaultAvatarTokens.sizeXl,
+    sizeXxl: size.xxl ?? defaultAvatarTokens.sizeXxl,
+    sizeXxxl: size.xxxl ?? defaultAvatarTokens.sizeXxxl,
+    fontSizeXs: fontSize.xs ?? defaultAvatarTokens.fontSizeXs,
+    fontSizeSm: fontSize.sm ?? defaultAvatarTokens.fontSizeSm,
+    fontSizeMd: fontSize.md ?? defaultAvatarTokens.fontSizeMd,
+    fontSizeLg: fontSize.lg ?? defaultAvatarTokens.fontSizeLg,
+    fontSizeXl: fontSize.xl ?? defaultAvatarTokens.fontSizeXl,
+    fontSizeXxl: fontSize.xxl ?? defaultAvatarTokens.fontSizeXxl,
+    fontSizeXxxl: fontSize.xxxl ?? defaultAvatarTokens.fontSizeXxxl,
+    iconSizeXs: iconSize.xs ?? defaultAvatarTokens.iconSizeXs,
+    iconSizeSm: iconSize.sm ?? defaultAvatarTokens.iconSizeSm,
+    iconSizeMd: iconSize.md ?? defaultAvatarTokens.iconSizeMd,
+    iconSizeLg: iconSize.lg ?? defaultAvatarTokens.iconSizeLg,
+    iconSizeXl: iconSize.xl ?? defaultAvatarTokens.iconSizeXl,
+    iconSizeXxl: iconSize.xxl ?? defaultAvatarTokens.iconSizeXxl,
+    iconSizeXxxl: iconSize.xxxl ?? defaultAvatarTokens.iconSizeXxxl,
+  };
+}
+
+// Tabs token types (aligned with components/tabs.json)
+// Figma node 52-10796: active tab = teal; inactive tab = white (#FFFFFF) background
+export type TabsSize = 'sm' | 'md' | 'lg';
+
+export interface TabsSizeToken {
+  height: string;
+  padding: string;
+  fontSize: number;
+  borderRadius: string;
+  fontWeight: string;
+}
+
+export interface TabsTokens {
+  activeBackground: string;
+  activeColor: string;
+  inactiveColor: string;
+  inactiveBackground: string;
+  inactiveBackgroundWhite: string;
+  containerBackground: string;
+  containerBackgroundWhite: string;
+  borderRadius: string;
+  containerBorderRadius: string;
+  paddingX: string;
+  paddingY: string;
+  gap: string;
+  fontSize: string;
+  fontWeight: string;
+}
+
+const tabsComp = components.tabs;
+export const TABS_TOKENS: TabsTokens = {
+  activeBackground: tabsComp?.activeBackground ?? '#00545e',
+  activeColor: tabsComp?.activeColor ?? '#ffffff',
+  inactiveColor: tabsComp?.inactiveColor ?? '#6b7280',
+  inactiveBackground: tabsComp?.inactiveBackground ?? '#FFFFFF',
+  inactiveBackgroundWhite:
+    tabsComp?.inactiveBackgroundWhite ?? tabsComp?.inactiveBackground ?? '#FFFFFF',
+  containerBackground: tabsComp?.containerBackground ?? '#FFFFFF',
+  containerBackgroundWhite:
+    tabsComp?.containerBackgroundWhite ?? tabsComp?.containerBackground ?? '#FFFFFF',
+  borderRadius: tabsComp?.borderRadius ?? '12px',
+  containerBorderRadius: tabsComp?.containerBorderRadius ?? '12px',
+  paddingX: tabsComp?.paddingX ?? '12px',
+  paddingY: tabsComp?.paddingY ?? '6px',
+  gap: tabsComp?.gap ?? '8px',
+  fontSize: tabsComp?.fontSize ?? '14px',
+  fontWeight: tabsComp?.fontWeight ?? '500',
+};
+
+export const TABS_SIZES: Record<TabsSize, TabsSizeToken> = {
+  sm: {
+    height: tabsComp?.size?.sm?.height ?? '32px',
+    padding: tabsComp?.size?.sm?.padding ?? '6px 12px',
+    fontSize: parseInt(tabsComp?.size?.sm?.fontSize ?? '12'),
+    borderRadius: tabsComp?.size?.sm?.borderRadius ?? '12px',
+    fontWeight: tabsComp?.size?.sm?.fontWeight ?? '500',
+  },
+  md: {
+    height: tabsComp?.size?.md?.height ?? '40px',
+    padding: tabsComp?.size?.md?.padding ?? '8px 16px',
+    fontSize: parseInt(tabsComp?.size?.md?.fontSize ?? '14'),
+    borderRadius: tabsComp?.size?.md?.borderRadius ?? '12px',
+    fontWeight: tabsComp?.size?.md?.fontWeight ?? '500',
+  },
+  lg: {
+    height: tabsComp?.size?.lg?.height ?? '48px',
+    padding: tabsComp?.size?.lg?.padding ?? '12px 24px',
+    fontSize: parseInt(tabsComp?.size?.lg?.fontSize ?? '16'),
+    borderRadius: tabsComp?.size?.lg?.borderRadius ?? '12px',
+    fontWeight: tabsComp?.size?.lg?.fontWeight ?? '500',
+  },
+};
+
+export interface TabsTokensFromResolved {
+  tokens: TabsTokens;
+  sizes: Record<TabsSize, TabsSizeToken>;
+}
+
+const defaultTabsTokens = TABS_TOKENS;
+const defaultTabsSizes = TABS_SIZES;
+
+/** Build Tabs tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when theme mode (light/dark) or brand changes. */
+export function getTabsTokensFromResolved(resolved: ResolvedTokens): TabsTokensFromResolved {
+  const t = resolved.components?.tabs as Record<string, any> | undefined;
+  if (!t) {
+    return { tokens: defaultTabsTokens, sizes: defaultTabsSizes };
+  }
+  const sm = t.size?.sm ?? {};
+  const md = t.size?.md ?? {};
+  const lg = t.size?.lg ?? {};
+  return {
+    tokens: {
+      activeBackground: t.activeBackground ?? defaultTabsTokens.activeBackground,
+      activeColor: t.activeColor ?? defaultTabsTokens.activeColor,
+      inactiveColor: t.inactiveColor ?? defaultTabsTokens.inactiveColor,
+      inactiveBackground: t.inactiveBackground ?? defaultTabsTokens.inactiveBackground,
+      inactiveBackgroundWhite:
+        t.inactiveBackgroundWhite ??
+        t.inactiveBackground ??
+        defaultTabsTokens.inactiveBackgroundWhite,
+      containerBackground: t.containerBackground ?? defaultTabsTokens.containerBackground,
+      containerBackgroundWhite:
+        t.containerBackgroundWhite ??
+        t.containerBackground ??
+        defaultTabsTokens.containerBackgroundWhite,
+      borderRadius: t.borderRadius ?? defaultTabsTokens.borderRadius,
+      containerBorderRadius: t.containerBorderRadius ?? defaultTabsTokens.containerBorderRadius,
+      paddingX: t.paddingX ?? defaultTabsTokens.paddingX,
+      paddingY: t.paddingY ?? defaultTabsTokens.paddingY,
+      gap: t.gap ?? defaultTabsTokens.gap,
+      fontSize: t.fontSize ?? defaultTabsTokens.fontSize,
+      fontWeight: t.fontWeight ?? defaultTabsTokens.fontWeight,
+    },
+    sizes: {
+      sm: {
+        height: sm.height ?? defaultTabsSizes.sm.height,
+        padding: sm.padding ?? defaultTabsSizes.sm.padding,
+        fontSize:
+          typeof sm.fontSize === 'number' ?
+            sm.fontSize
+          : parseInt(String(sm.fontSize ?? defaultTabsSizes.sm.fontSize), 10),
+        borderRadius: sm.borderRadius ?? defaultTabsSizes.sm.borderRadius,
+        fontWeight: sm.fontWeight ?? defaultTabsSizes.sm.fontWeight,
+      },
+      md: {
+        height: md.height ?? defaultTabsSizes.md.height,
+        padding: md.padding ?? defaultTabsSizes.md.padding,
+        fontSize:
+          typeof md.fontSize === 'number' ?
+            md.fontSize
+          : parseInt(String(md.fontSize ?? defaultTabsSizes.md.fontSize), 10),
+        borderRadius: md.borderRadius ?? defaultTabsSizes.md.borderRadius,
+        fontWeight: md.fontWeight ?? defaultTabsSizes.md.fontWeight,
+      },
+      lg: {
+        height: lg.height ?? defaultTabsSizes.lg.height,
+        padding: lg.padding ?? defaultTabsSizes.lg.padding,
+        fontSize:
+          typeof lg.fontSize === 'number' ?
+            lg.fontSize
+          : parseInt(String(lg.fontSize ?? defaultTabsSizes.lg.fontSize), 10),
+        borderRadius: lg.borderRadius ?? defaultTabsSizes.lg.borderRadius,
+        fontWeight: lg.fontWeight ?? defaultTabsSizes.lg.fontWeight,
+      },
+    },
+  };
+}
+
+// SubTabs token types (aligned with components/subtabs.json)
+export type SubTabsSize = 'sm' | 'md';
+
+export interface SubTabsSizeToken {
+  height: string;
+  padding: string;
+  fontSize: string;
+  borderRadius: string;
+  iconSize: string;
+  fontWeight: string;
+  activeFontWeight: string;
+}
+
+export interface SubTabsTokens {
+  gap: string;
+  trackPadding: string;
+  trackBorderRadius: string;
+  trackBackground: string;
+  trackBorder: string;
+  fontWeight: string;
+  activeFontWeight: string;
+  colors: Record<string, Record<string, string>>;
+}
+
+const subTabsComp = (components as Record<string, any>).subTabs;
+export const SUB_TABS_TOKENS: SubTabsTokens = {
+  gap: subTabsComp?.gap ?? '8px',
+  trackPadding: subTabsComp?.trackPadding ?? '6px',
+  trackBorderRadius: subTabsComp?.trackBorderRadius ?? '12px',
+  trackBackground: subTabsComp?.trackBackground ?? '#F3F5F6',
+  trackBorder: subTabsComp?.trackBorder ?? '#E5E7EB',
+  fontWeight: subTabsComp?.fontWeight ?? '500',
+  activeFontWeight: subTabsComp?.activeFontWeight ?? '600',
+  colors: subTabsComp?.colors ?? {},
+};
+
+export const SUB_TABS_SIZES: Record<SubTabsSize, SubTabsSizeToken> = {
+  sm: {
+    height: subTabsComp?.size?.sm?.height ?? '32px',
+    padding: subTabsComp?.size?.sm?.padding ?? '6px 12px',
+    fontSize: subTabsComp?.size?.sm?.fontSize ?? '12px',
+    borderRadius: subTabsComp?.size?.sm?.borderRadius ?? '8px',
+    iconSize: subTabsComp?.size?.sm?.iconSize ?? '22px',
+    fontWeight: subTabsComp?.fontWeight ?? '500',
+    activeFontWeight: subTabsComp?.activeFontWeight ?? '600',
+  },
+  md: {
+    height: subTabsComp?.size?.md?.height ?? '40px',
+    padding: subTabsComp?.size?.md?.padding ?? '8px 16px',
+    fontSize: subTabsComp?.size?.md?.fontSize ?? '14px',
+    borderRadius: subTabsComp?.size?.md?.borderRadius ?? '8px',
+    iconSize: subTabsComp?.size?.md?.iconSize ?? '26px',
+    fontWeight: subTabsComp?.fontWeight ?? '500',
+    activeFontWeight: subTabsComp?.activeFontWeight ?? '600',
+  },
+};
+
+export interface SubTabsTokensFromResolved {
+  tokens: SubTabsTokens;
+  sizes: Record<SubTabsSize, SubTabsSizeToken>;
+}
+
+const defaultSubTabsTokens = SUB_TABS_TOKENS;
+const defaultSubTabsSizes = SUB_TABS_SIZES;
+
+export function getSubTabsTokensFromResolved(resolved: ResolvedTokens): SubTabsTokensFromResolved {
+  const t = resolved.components?.subTabs as Record<string, any> | undefined;
+  if (!t) {
+    return { tokens: defaultSubTabsTokens, sizes: defaultSubTabsSizes };
+  }
+
+  const sm = t.size?.sm ?? {};
+  const md = t.size?.md ?? {};
+
+  return {
+    tokens: {
+      gap: t.gap ?? defaultSubTabsTokens.gap,
+      trackPadding: t.trackPadding ?? defaultSubTabsTokens.trackPadding,
+      trackBorderRadius: t.trackBorderRadius ?? defaultSubTabsTokens.trackBorderRadius,
+      trackBackground: t.trackBackground ?? defaultSubTabsTokens.trackBackground,
+      trackBorder: t.trackBorder ?? defaultSubTabsTokens.trackBorder,
+      fontWeight: t.fontWeight ?? defaultSubTabsTokens.fontWeight,
+      activeFontWeight: t.activeFontWeight ?? defaultSubTabsTokens.activeFontWeight,
+      colors: t.colors ?? defaultSubTabsTokens.colors,
+    },
+    sizes: {
+      sm: {
+        height: sm.height ?? defaultSubTabsSizes.sm.height,
+        padding: sm.padding ?? defaultSubTabsSizes.sm.padding,
+        fontSize: sm.fontSize ?? defaultSubTabsSizes.sm.fontSize,
+        borderRadius: sm.borderRadius ?? defaultSubTabsSizes.sm.borderRadius,
+        iconSize: sm.iconSize ?? defaultSubTabsSizes.sm.iconSize,
+        fontWeight: t.fontWeight ?? defaultSubTabsSizes.sm.fontWeight,
+        activeFontWeight: t.activeFontWeight ?? defaultSubTabsSizes.sm.activeFontWeight,
+      },
+      md: {
+        height: md.height ?? defaultSubTabsSizes.md.height,
+        padding: md.padding ?? defaultSubTabsSizes.md.padding,
+        fontSize: md.fontSize ?? defaultSubTabsSizes.md.fontSize,
+        borderRadius: md.borderRadius ?? defaultSubTabsSizes.md.borderRadius,
+        iconSize: md.iconSize ?? defaultSubTabsSizes.md.iconSize,
+        fontWeight: t.fontWeight ?? defaultSubTabsSizes.md.fontWeight,
+        activeFontWeight: t.activeFontWeight ?? defaultSubTabsSizes.md.activeFontWeight,
+      },
+    },
+  };
+}
+
+/* ---------------------------------- */
+/* Breadcrumb tokens */
+/* ---------------------------------- */
+
+export interface BreadcrumbTokens {
+  itemColor: string;
+  currentColor: string;
+  separatorColor: string;
+  fontFamily: string;
+  fontSize: string;
+  fontWeight: string;
+  itemFontWeight: string;
+  lineHeight: string;
+  gap: string;
+}
+
+const breadcrumbComp = components.breadcrumb as Record<string, any> | undefined;
+export const BREADCRUMB_TOKENS: BreadcrumbTokens = {
+  itemColor: breadcrumbComp?.itemColor ?? '#1f1f1f',
+  currentColor: breadcrumbComp?.currentColor ?? '#1f1f1f',
+  separatorColor: breadcrumbComp?.separatorColor ?? '#1f1f1f',
+  fontFamily: breadcrumbComp?.fontFamily ?? '"Inter", sans-serif',
+  fontSize: breadcrumbComp?.fontSize ?? '14px',
+  fontWeight: breadcrumbComp?.fontWeight ?? '400',
+  itemFontWeight: breadcrumbComp?.itemFontWeight ?? '600',
+  lineHeight: breadcrumbComp?.lineHeight ?? '24px',
+  gap: breadcrumbComp?.gap ?? '8px',
+};
+
+const defaultBreadcrumbTokens = BREADCRUMB_TOKENS;
+
+/** Build Breadcrumb tokens from resolved tokens. */
+export function getBreadcrumbTokensFromResolved(resolved: ResolvedTokens): BreadcrumbTokens {
+  const t = resolved.components?.breadcrumb as Record<string, any> | undefined;
+  if (!t) return defaultBreadcrumbTokens;
+  return {
+    itemColor: t.itemColor ?? defaultBreadcrumbTokens.itemColor,
+    currentColor: t.currentColor ?? defaultBreadcrumbTokens.currentColor,
+    separatorColor: t.separatorColor ?? defaultBreadcrumbTokens.separatorColor,
+    fontFamily: t.fontFamily ?? defaultBreadcrumbTokens.fontFamily,
+    fontSize: t.fontSize ?? defaultBreadcrumbTokens.fontSize,
+    fontWeight: t.fontWeight ?? defaultBreadcrumbTokens.fontWeight,
+    itemFontWeight: t.itemFontWeight ?? defaultBreadcrumbTokens.itemFontWeight,
+    lineHeight: t.lineHeight ?? defaultBreadcrumbTokens.lineHeight,
+    gap: t.gap ?? defaultBreadcrumbTokens.gap,
+  };
+}
+
+export interface ToggleButtonTokens {
+  gap: string;
+  fontFamily: string;
+  lineHeight: string;
+  fontWeight: string | number;
+  activeFontWeight: string | number;
+  sizeSmHeight: string;
+  sizeSmPaddingX: string;
+  sizeSmPaddingY: string;
+  sizeSmFontSize: string;
+  sizeSmBorderRadius: string;
+  sizeSmBorderWidth: string;
+  sizeMdHeight: string;
+  sizeMdPaddingX: string;
+  sizeMdPaddingY: string;
+  sizeMdFontSize: string;
+  sizeMdBorderRadius: string;
+  sizeMdBorderWidth: string;
+  sizeLgHeight: string;
+  sizeLgPaddingX: string;
+  sizeLgPaddingY: string;
+  sizeLgFontSize: string;
+  sizeLgBorderRadius: string;
+  sizeLgBorderWidth: string;
+  inactive: {
+    background: string;
+    backgroundWhite: string;
+    color: string;
+    border: string;
+  };
+  active: {
+    background: string;
+    color: string;
+    border: string;
+  };
+}
+
+const toggleButtonComp = components.togglebutton as Record<string, any> | undefined;
+export const TOGGLE_BUTTON_TOKENS: ToggleButtonTokens = {
+  gap: toggleButtonComp?.gap ?? '4px',
+  fontFamily: toggleButtonComp?.button?.fontFamily ?? '"Inter", sans-serif',
+  lineHeight: toggleButtonComp?.button?.lineHeight ?? '18px',
+  fontWeight: toggleButtonComp?.button?.fontWeight ?? '500',
+  activeFontWeight: toggleButtonComp?.button?.activeFontWeight ?? '600',
+  sizeSmHeight: toggleButtonComp?.size?.sm?.height ?? '28px',
+  sizeSmPaddingX: toggleButtonComp?.size?.sm?.paddingX ?? '8px',
+  sizeSmPaddingY: toggleButtonComp?.size?.sm?.paddingY ?? '4px',
+  sizeSmFontSize: toggleButtonComp?.size?.sm?.fontSize ?? '12px',
+  sizeSmBorderRadius: toggleButtonComp?.size?.sm?.borderRadius ?? '8px',
+  sizeSmBorderWidth: toggleButtonComp?.size?.sm?.borderWidth ?? '1px',
+  sizeMdHeight: toggleButtonComp?.size?.md?.height ?? '40px',
+  sizeMdPaddingX: toggleButtonComp?.size?.md?.paddingX ?? '12px',
+  sizeMdPaddingY: toggleButtonComp?.size?.md?.paddingY ?? '6px',
+  sizeMdFontSize: toggleButtonComp?.size?.md?.fontSize ?? '14px',
+  sizeMdBorderRadius: toggleButtonComp?.size?.md?.borderRadius ?? '12px',
+  sizeMdBorderWidth: toggleButtonComp?.size?.md?.borderWidth ?? '1px',
+  sizeLgHeight: toggleButtonComp?.size?.lg?.height ?? '48px',
+  sizeLgPaddingX: toggleButtonComp?.size?.lg?.paddingX ?? '16px',
+  sizeLgPaddingY: toggleButtonComp?.size?.lg?.paddingY ?? '8px',
+  sizeLgFontSize: toggleButtonComp?.size?.lg?.fontSize ?? '16px',
+  sizeLgBorderRadius: toggleButtonComp?.size?.lg?.borderRadius ?? '12px',
+  sizeLgBorderWidth: toggleButtonComp?.size?.lg?.borderWidth ?? '1px',
+  inactive: {
+    background: toggleButtonComp?.inactive?.background ?? '#ffffff',
+    backgroundWhite:
+      toggleButtonComp?.inactive?.backgroundWhite ??
+      toggleButtonComp?.inactive?.background ??
+      '#ffffff',
+    color: toggleButtonComp?.inactive?.color ?? '#1f1f1f',
+    border: toggleButtonComp?.inactive?.border ?? '#c8d0d5',
+  },
+  active: {
+    background: toggleButtonComp?.active?.background ?? '#00545e',
+    color: toggleButtonComp?.active?.color ?? '#ffffff',
+    border: toggleButtonComp?.active?.border ?? '#00545e',
+  },
+};
+
+const defaultToggleButtonTokens = TOGGLE_BUTTON_TOKENS;
+
+/** Build ToggleButton tokens from resolved tokens (mode + brand). */
+export function getToggleButtonTokensFromResolved(resolved: ResolvedTokens): ToggleButtonTokens {
+  const t = resolved.components?.togglebutton as Record<string, any> | undefined;
+  if (!t) return defaultToggleButtonTokens;
+  return {
+    gap: t.gap ?? defaultToggleButtonTokens.gap,
+    fontFamily: t.button?.fontFamily ?? defaultToggleButtonTokens.fontFamily,
+    lineHeight: t.button?.lineHeight ?? defaultToggleButtonTokens.lineHeight,
+    fontWeight: t.button?.fontWeight ?? defaultToggleButtonTokens.fontWeight,
+    activeFontWeight: t.button?.activeFontWeight ?? defaultToggleButtonTokens.activeFontWeight,
+    sizeSmHeight: t.size?.sm?.height ?? defaultToggleButtonTokens.sizeSmHeight,
+    sizeSmPaddingX: t.size?.sm?.paddingX ?? defaultToggleButtonTokens.sizeSmPaddingX,
+    sizeSmPaddingY: t.size?.sm?.paddingY ?? defaultToggleButtonTokens.sizeSmPaddingY,
+    sizeSmFontSize: t.size?.sm?.fontSize ?? defaultToggleButtonTokens.sizeSmFontSize,
+    sizeSmBorderRadius: t.size?.sm?.borderRadius ?? defaultToggleButtonTokens.sizeSmBorderRadius,
+    sizeSmBorderWidth: t.size?.sm?.borderWidth ?? defaultToggleButtonTokens.sizeSmBorderWidth,
+    sizeMdHeight: t.size?.md?.height ?? defaultToggleButtonTokens.sizeMdHeight,
+    sizeMdPaddingX: t.size?.md?.paddingX ?? defaultToggleButtonTokens.sizeMdPaddingX,
+    sizeMdPaddingY: t.size?.md?.paddingY ?? defaultToggleButtonTokens.sizeMdPaddingY,
+    sizeMdFontSize: t.size?.md?.fontSize ?? defaultToggleButtonTokens.sizeMdFontSize,
+    sizeMdBorderRadius: t.size?.md?.borderRadius ?? defaultToggleButtonTokens.sizeMdBorderRadius,
+    sizeMdBorderWidth: t.size?.md?.borderWidth ?? defaultToggleButtonTokens.sizeMdBorderWidth,
+    sizeLgHeight: t.size?.lg?.height ?? defaultToggleButtonTokens.sizeLgHeight,
+    sizeLgPaddingX: t.size?.lg?.paddingX ?? defaultToggleButtonTokens.sizeLgPaddingX,
+    sizeLgPaddingY: t.size?.lg?.paddingY ?? defaultToggleButtonTokens.sizeLgPaddingY,
+    sizeLgFontSize: t.size?.lg?.fontSize ?? defaultToggleButtonTokens.sizeLgFontSize,
+    sizeLgBorderRadius: t.size?.lg?.borderRadius ?? defaultToggleButtonTokens.sizeLgBorderRadius,
+    sizeLgBorderWidth: t.size?.lg?.borderWidth ?? defaultToggleButtonTokens.sizeLgBorderWidth,
+    inactive: {
+      background: t.inactive?.background ?? defaultToggleButtonTokens.inactive.background,
+      backgroundWhite:
+        t.inactive?.backgroundWhite ??
+        t.inactive?.background ??
+        defaultToggleButtonTokens.inactive.backgroundWhite,
+      color: t.inactive?.color ?? defaultToggleButtonTokens.inactive.color,
+      border: t.inactive?.border ?? defaultToggleButtonTokens.inactive.border,
+    },
+    active: {
+      background: t.active?.background ?? defaultToggleButtonTokens.active.background,
+      color: t.active?.color ?? defaultToggleButtonTokens.active.color,
+      border: t.active?.border ?? defaultToggleButtonTokens.active.border,
+    },
+  };
+}
+
+export interface SwitchTokens {
+  sizeSmWidth: string;
+  sizeSmHeight: string;
+  sizeSmThumbSize: string;
+  sizeSmTrackPadding: string;
+  sizeSmRadius: string;
+  sizeSmBorderWidth: string;
+  sizeMdWidth: string;
+  sizeMdHeight: string;
+  sizeMdThumbSize: string;
+  sizeMdTrackPadding: string;
+  sizeMdRadius: string;
+  sizeMdBorderWidth: string;
+  sizeLgWidth: string;
+  sizeLgHeight: string;
+  sizeLgThumbSize: string;
+  sizeLgTrackPadding: string;
+  sizeLgRadius: string;
+  sizeLgBorderWidth: string;
+  trackBackground: string;
+  trackBorder: string;
+  trackBackgroundActive: string;
+  trackBorderActive: string;
+  thumbBackground: string;
+  thumbBackgroundActive: string;
+  labelFontSize: string;
+  labelFontWeight: number;
+  labelColor: string;
+  labelFontFamily: string;
+  labelMarginBottom: string;
+  captionFontSize: string;
+  captionTextColor: string;
+  switchHelperTextFontSize: string;
+  switchHelperTextColor: string;
+}
+
+const switchComp = components.switch as Record<string, any> | undefined;
+export const SWITCH_TOKENS: SwitchTokens = {
+  sizeSmWidth: switchComp?.size?.sm?.width ?? '52px',
+  sizeSmHeight: switchComp?.size?.sm?.height ?? '32px',
+  sizeSmThumbSize: switchComp?.size?.sm?.thumbSize ?? '28px',
+  sizeSmTrackPadding: switchComp?.size?.sm?.trackPadding ?? '2px',
+  sizeSmRadius: switchComp?.size?.sm?.radius ?? '9999px',
+  sizeSmBorderWidth: switchComp?.size?.sm?.borderWidth ?? '1px',
+  sizeMdWidth: switchComp?.size?.md?.width ?? '52px',
+  sizeMdHeight: switchComp?.size?.md?.height ?? '32px',
+  sizeMdThumbSize: switchComp?.size?.md?.thumbSize ?? '28px',
+  sizeMdTrackPadding: switchComp?.size?.md?.trackPadding ?? '2px',
+  sizeMdRadius: switchComp?.size?.md?.radius ?? '9999px',
+  sizeMdBorderWidth: switchComp?.size?.md?.borderWidth ?? '1px',
+  sizeLgWidth: switchComp?.size?.lg?.width ?? '52px',
+  sizeLgHeight: switchComp?.size?.lg?.height ?? '32px',
+  sizeLgThumbSize: switchComp?.size?.lg?.thumbSize ?? '28px',
+  sizeLgTrackPadding: switchComp?.size?.lg?.trackPadding ?? '2px',
+  sizeLgRadius: switchComp?.size?.lg?.radius ?? '9999px',
+  sizeLgBorderWidth: switchComp?.size?.lg?.borderWidth ?? '1px',
+  trackBackground: switchComp?.track?.background ?? '#ffffff',
+  trackBorder: switchComp?.track?.border ?? '#1f1f1f',
+  trackBackgroundActive: switchComp?.track?.backgroundActive ?? '#00545e',
+  trackBorderActive: switchComp?.track?.borderActive ?? '#00545e',
+  thumbBackground: switchComp?.thumb?.background ?? '#1f1f1f',
+  thumbBackgroundActive: switchComp?.thumb?.backgroundActive ?? '#ffffff',
+  labelFontSize: switchComp?.label?.fontSize ?? '14px',
+  labelFontWeight: switchComp?.label?.fontWeight ?? 500,
+  labelColor: switchComp?.label?.color ?? '#1f1f1f',
+  labelFontFamily: switchComp?.label?.fontFamily ?? 'Inter',
+  labelMarginBottom: switchComp?.label?.marginBottom ?? '8px',
+  captionFontSize: switchComp?.caption?.fontSize ?? '12px',
+  captionTextColor: switchComp?.caption?.textColor ?? '#1f1f1f',
+  switchHelperTextFontSize: switchComp?.helper?.textFontSize ?? '12px',
+  switchHelperTextColor: switchComp?.helper?.textColor ?? '#1f1f1f',
+};
+
+const defaultSwitchTokens = SWITCH_TOKENS;
+
+/** Build Switch tokens from resolved tokens (mode + brand). */
+export function getSwitchTokensFromResolved(resolved: ResolvedTokens): SwitchTokens {
+  const t = resolved.components?.switch as Record<string, any> | undefined;
+  if (!t) return defaultSwitchTokens;
+  return {
+    sizeSmWidth: t.size?.sm?.width ?? defaultSwitchTokens.sizeSmWidth,
+    sizeSmHeight: t.size?.sm?.height ?? defaultSwitchTokens.sizeSmHeight,
+    sizeSmThumbSize: t.size?.sm?.thumbSize ?? defaultSwitchTokens.sizeSmThumbSize,
+    sizeSmTrackPadding: t.size?.sm?.trackPadding ?? defaultSwitchTokens.sizeSmTrackPadding,
+    sizeSmRadius: t.size?.sm?.radius ?? defaultSwitchTokens.sizeSmRadius,
+    sizeSmBorderWidth: t.size?.sm?.borderWidth ?? defaultSwitchTokens.sizeSmBorderWidth,
+    sizeMdWidth: t.size?.md?.width ?? defaultSwitchTokens.sizeMdWidth,
+    sizeMdHeight: t.size?.md?.height ?? defaultSwitchTokens.sizeMdHeight,
+    sizeMdThumbSize: t.size?.md?.thumbSize ?? defaultSwitchTokens.sizeMdThumbSize,
+    sizeMdTrackPadding: t.size?.md?.trackPadding ?? defaultSwitchTokens.sizeMdTrackPadding,
+    sizeMdRadius: t.size?.md?.radius ?? defaultSwitchTokens.sizeMdRadius,
+    sizeMdBorderWidth: t.size?.md?.borderWidth ?? defaultSwitchTokens.sizeMdBorderWidth,
+    sizeLgWidth: t.size?.lg?.width ?? defaultSwitchTokens.sizeLgWidth,
+    sizeLgHeight: t.size?.lg?.height ?? defaultSwitchTokens.sizeLgHeight,
+    sizeLgThumbSize: t.size?.lg?.thumbSize ?? defaultSwitchTokens.sizeLgThumbSize,
+    sizeLgTrackPadding: t.size?.lg?.trackPadding ?? defaultSwitchTokens.sizeLgTrackPadding,
+    sizeLgRadius: t.size?.lg?.radius ?? defaultSwitchTokens.sizeLgRadius,
+    sizeLgBorderWidth: t.size?.lg?.borderWidth ?? defaultSwitchTokens.sizeLgBorderWidth,
+    trackBackground: t.track?.background ?? defaultSwitchTokens.trackBackground,
+    trackBorder: t.track?.border ?? defaultSwitchTokens.trackBorder,
+    trackBackgroundActive: t.track?.backgroundActive ?? defaultSwitchTokens.trackBackgroundActive,
+    trackBorderActive: t.track?.borderActive ?? defaultSwitchTokens.trackBorderActive,
+    thumbBackground: t.thumb?.background ?? defaultSwitchTokens.thumbBackground,
+    thumbBackgroundActive: t.thumb?.backgroundActive ?? defaultSwitchTokens.thumbBackgroundActive,
+    labelFontSize: t.label?.fontSize ?? defaultSwitchTokens.labelFontSize,
+    labelFontWeight: t.label?.fontWeight ?? defaultSwitchTokens.labelFontWeight,
+    labelColor: t.label?.color ?? defaultSwitchTokens.labelColor,
+    labelFontFamily: t.label?.fontFamily ?? defaultSwitchTokens.labelFontFamily,
+    labelMarginBottom: t.label?.marginBottom ?? defaultSwitchTokens.labelMarginBottom,
+    captionFontSize: t.caption?.fontSize ?? defaultSwitchTokens.captionFontSize,
+    captionTextColor: t.caption?.textColor ?? defaultSwitchTokens.captionTextColor,
+    switchHelperTextFontSize:
+      t.helper?.textFontSize ?? defaultSwitchTokens.switchHelperTextFontSize,
+    switchHelperTextColor: t.helper?.textColor ?? defaultSwitchTokens.switchHelperTextColor,
+  };
+}
+
+// Menu token types (aligned with components/menu.json).
+// Use getMenuTokensFromResolved(resolved) when screen/theme changes (e.g. useTokens()).
+export interface MenuTokens {
+  minWidth: string;
+  borderRadius: string;
+  padding: string;
+  marginTop: string;
+  itemPaddingY: string;
+  itemPaddingX: string;
+  itemIconLabelGap: string;
+  itemBorderRadius: string;
+  fontFamily: string;
+  fontSize: number;
+  fontWeight: number;
+  lineHeight: string;
+  textColor: string;
+  selectedBackground: string;
+  hoverBackground: string;
+  background: string;
+  listMaxHeight: string;
+}
+
+const menuComp = components.menu as Record<string, unknown> | undefined;
+export const MENU_TOKENS: MenuTokens = {
+  minWidth: (menuComp?.minWidth as string) ?? '180px',
+  borderRadius: (menuComp?.borderRadius as string) ?? '16px',
+  padding: (menuComp?.padding as string) ?? '12px',
+  marginTop: (menuComp?.marginTop as string) ?? '12px',
+  itemPaddingY: (menuComp?.itemPaddingY as string) ?? '12px',
+  itemPaddingX: (menuComp?.itemPaddingX as string) ?? '16px',
+  itemIconLabelGap: (menuComp?.itemIconLabelGap as string) ?? '12px',
+  itemBorderRadius: (menuComp?.itemBorderRadius as string) ?? '6px',
+  fontFamily: (menuComp?.fontFamily as string) ?? '"Inter", sans-serif',
+  fontSize: parseInt(String(menuComp?.fontSize ?? 16), 10),
+  fontWeight:
+    typeof menuComp?.fontWeight === 'string' ?
+      parseInt(menuComp.fontWeight as string, 10)
+    : Number(menuComp?.fontWeight ?? 500),
+  lineHeight: (menuComp?.lineHeight as string) ?? '24px',
+  textColor: (menuComp?.textColor as string) ?? '#374151',
+  selectedBackground: (menuComp?.selectedBackground as string) ?? '#F3F4F6',
+  hoverBackground: (menuComp?.hoverBackground as string) ?? '#F9FAFB',
+  background: (menuComp?.background as string) ?? '#FFFFFF',
+  listMaxHeight: (menuComp?.listMaxHeight as string) ?? '320px',
+};
+
+/** Build Menu tokens from resolved tokens (e.g. from useTokens()). Use when screen/theme changes so menu picks responsive size.menu.* */
+export function getMenuTokensFromResolved(resolved: ResolvedTokens): MenuTokens {
+  const m = resolved.components?.menu as Record<string, unknown> | undefined;
+  if (!m) return MENU_TOKENS;
+  return {
+    minWidth: (m.minWidth as string) ?? MENU_TOKENS.minWidth,
+    borderRadius: (m.borderRadius as string) ?? MENU_TOKENS.borderRadius,
+    padding: (m.padding as string) ?? MENU_TOKENS.padding,
+    marginTop: (m.marginTop as string) ?? MENU_TOKENS.marginTop,
+    itemPaddingY: (m.itemPaddingY as string) ?? MENU_TOKENS.itemPaddingY,
+    itemPaddingX: (m.itemPaddingX as string) ?? MENU_TOKENS.itemPaddingX,
+    itemIconLabelGap: (m.itemIconLabelGap as string) ?? MENU_TOKENS.itemIconLabelGap,
+    itemBorderRadius: (m.itemBorderRadius as string) ?? MENU_TOKENS.itemBorderRadius,
+    fontFamily: (m.fontFamily as string) ?? MENU_TOKENS.fontFamily,
+    fontSize: parseInt(String(m.fontSize ?? MENU_TOKENS.fontSize), 10),
+    fontWeight:
+      typeof m.fontWeight === 'string' ?
+        parseInt(m.fontWeight, 10)
+      : Number(m.fontWeight ?? MENU_TOKENS.fontWeight),
+    lineHeight: (m.lineHeight as string) ?? MENU_TOKENS.lineHeight,
+    textColor: (m.textColor as string) ?? MENU_TOKENS.textColor,
+    selectedBackground: (m.selectedBackground as string) ?? MENU_TOKENS.selectedBackground,
+    hoverBackground: (m.hoverBackground as string) ?? MENU_TOKENS.hoverBackground,
+    background: (m.background as string) ?? MENU_TOKENS.background,
+    listMaxHeight: (m.listMaxHeight as string) ?? MENU_TOKENS.listMaxHeight,
+  };
+}
+
+// TextField tokens (legacy format; from components/textfield.json).
+// Textfield border is picked from outline.default/active/error, which resolve from color.border
+// (and color.error), so brands can override textfield border via brand.color.border in brand.json.
+export interface TextFieldTokens {
+  height: string;
+  heightSm: string;
+  heightMd: string;
+  heightLg: string;
+  borderRadius: string;
+  borderRadiusSm: string;
+  borderRadiusMd: string;
+  borderRadiusLg: string;
+  fontFamily: string;
+  fontSize: number;
+  fontSizeSm: number;
+  fontSizeMd: number;
+  fontSizeLg: number;
+  labelFontSize: number;
+  labelFontWeight: number;
+  labelMarginBottom: string;
+  activeLabelFontSize: number;
+  helperFontSize: number;
+  labelColor: string;
+  activeLabelColor: string;
+  inputTextColor: string;
+  placeholderColor: string;
+  outlineDefault: string;
+  outlineActive: string;
+  outlineError: string;
+  errorColor: string;
+  backgroundColor: string;
+  backgroundColorWhite: string;
+  disabledOpacity: string;
+  paddingSm: string;
+  paddingMd: string;
+  paddingLg: string;
+  captionFontSize: number;
+  captionTextColor: string;
+  /** Left padding applied to the input when a start/end icon is present. Sourced from spacing.9 (48px). */
+  iconPaddingLeft: string;
+  /** Absolute left offset of the start adornment icon. Sourced from spacing.4 (16px). */
+  iconStartLeft: string;
+  /** Absolute right offset of the end adornment icon. Sourced from spacing.2 (8px). */
+  iconEndRight: string;
+}
+
+const tfSize = components.textfield.size;
+export const TEXT_FIELD_TOKENS: TextFieldTokens = {
+  height: tfSize.md.height,
+  heightSm: tfSize.sm.height,
+  heightMd: tfSize.md.height,
+  heightLg: tfSize.lg.height,
+  borderRadius: tfSize.md.borderRadius,
+  borderRadiusSm: tfSize.sm.borderRadius,
+  borderRadiusMd: tfSize.md.borderRadius,
+  borderRadiusLg: tfSize.lg.borderRadius,
+  fontFamily: components.textfield.fontFamily,
+  fontSize: parseInt(tfSize.md.fontSize),
+  fontSizeSm: parseInt(tfSize.sm.fontSize),
+  fontSizeMd: parseInt(tfSize.md.fontSize),
+  fontSizeLg: parseInt(tfSize.lg.fontSize),
+  labelFontSize: parseInt(components.textfield.label.fontSize),
+  labelFontWeight:
+    typeof components.textfield.label.fontWeight === 'string' ?
+      parseInt(components.textfield.label.fontWeight)
+    : components.textfield.label.fontWeight,
+  labelMarginBottom: components.textfield.label.marginBottom,
+  activeLabelFontSize: parseInt(components.textfield.label.activeFontSize),
+  helperFontSize: parseInt(components.textfield.helper.fontSize),
+  labelColor: components.textfield.label.color,
+  activeLabelColor: components.textfield.label.activeColor,
+  inputTextColor: components.textfield.textColor,
+  placeholderColor: components.textfield.placeholderColor,
+  outlineDefault: components.textfield.outline.default,
+  outlineActive: components.textfield.outline.active,
+  outlineError: components.textfield.outline.error,
+  errorColor: components.textfield.error.color,
+  backgroundColor: components.textfield.background,
+  backgroundColorWhite: components.textfield.backgroundWhite ?? components.textfield.background,
+  disabledOpacity: components.textfield.disabledOpacity,
+  paddingSm: tfSize.sm.padding,
+  paddingMd: tfSize.md.padding,
+  paddingLg: tfSize.lg.padding,
+  captionFontSize: components.textfield.caption.fontSize,
+  captionTextColor: components.textfield.caption.textColor,
+  iconPaddingLeft: components.textfield.iconPaddingLeft ?? '48px',
+  iconStartLeft: (components.textfield.icon as any)?.startLeft ?? '16px',
+  iconEndRight: (components.textfield.icon as any)?.endRight ?? '8px',
+};
+
+export interface IpWhitelistFieldTokens {
+  labelMarginTop: string;
+  labelColor: string;
+  requiredColor: string;
+  requiredGap: string;
+  rowMarginTop: string;
+  groupGap: string;
+  buttonsGap: string;
+  width: string;
+}
+
+export const IPWHITELISTFIELD_TOKENS: IpWhitelistFieldTokens = {
+  labelMarginTop: (components.ipwhitelistfield as any)?.label?.marginTop,
+  labelColor: (components.ipwhitelistfield as any)?.label?.color,
+  requiredColor: (components.ipwhitelistfield as any)?.label?.requiredColor,
+  requiredGap: (components.ipwhitelistfield as any)?.label?.requiredGap,
+  rowMarginTop: (components.ipwhitelistfield as any)?.row?.marginTop,
+  groupGap: (components.ipwhitelistfield as any)?.row?.groupGap,
+  buttonsGap: (components.ipwhitelistfield as any)?.row?.buttonsGap,
+  width: (components.ipwhitelistfield as any)?.row?.width,
+};
+
+export function getIpWhitelistFieldTokensFromResolved(
+  resolved: ResolvedTokens
+): IpWhitelistFieldTokens {
+  const ipw = (resolved.components as any)?.ipwhitelistfield;
+  if (!ipw) return IPWHITELISTFIELD_TOKENS;
+  return {
+    labelMarginTop: ipw.label?.marginTop ?? IPWHITELISTFIELD_TOKENS.labelMarginTop,
+    labelColor: ipw.label?.color ?? IPWHITELISTFIELD_TOKENS.labelColor,
+    requiredColor: ipw.label?.requiredColor ?? IPWHITELISTFIELD_TOKENS.requiredColor,
+    requiredGap: ipw.label?.requiredGap ?? IPWHITELISTFIELD_TOKENS.requiredGap,
+    rowMarginTop: ipw.row?.marginTop ?? IPWHITELISTFIELD_TOKENS.rowMarginTop,
+    groupGap: ipw.row?.groupGap ?? IPWHITELISTFIELD_TOKENS.groupGap,
+    buttonsGap: ipw.row?.buttonsGap ?? IPWHITELISTFIELD_TOKENS.buttonsGap,
+    width: ipw.row?.otpWidth ?? IPWHITELISTFIELD_TOKENS.width,
+  };
+}
+
+/** Build TextField tokens from resolved tokens (e.g. from useTokens()). Use this so padding/height update when screen changes. */
+export function getTextFieldTokensFromResolved(resolved: ResolvedTokens): TextFieldTokens {
+  const tf = resolved.components?.textfield;
+  if (!tf?.size) return TEXT_FIELD_TOKENS;
+  const sm = tf.size.sm as any;
+  const md = tf.size.md as any;
+  const lg = tf.size.lg as any;
+  return {
+    height: md?.height ?? '40px',
+    heightSm: sm?.height ?? '28px',
+    heightMd: md?.height ?? '40px',
+    heightLg: lg?.height ?? '48px',
+    borderRadius: md?.borderRadius ?? '8px',
+    borderRadiusSm: sm?.borderRadius ?? '6px',
+    borderRadiusMd: md?.borderRadius ?? '8px',
+    borderRadiusLg: lg?.borderRadius ?? '8px',
+    fontFamily: tf.fontFamily ?? 'inherit',
+    fontSize: parseInt(String(md?.fontSize ?? 16)),
+    fontSizeSm: parseInt(String(sm?.fontSize ?? 14)),
+    fontSizeMd: parseInt(String(md?.fontSize ?? 16)),
+    fontSizeLg: parseInt(String(lg?.fontSize ?? 18)),
+    labelFontSize: parseInt(String(tf.label?.fontSize ?? 14)),
+    labelFontWeight:
+      typeof tf.label?.fontWeight === 'string' ?
+        parseInt(tf.label.fontWeight)
+      : Number(tf.label?.fontWeight ?? 500),
+    labelMarginBottom: tf.label?.marginBottom ?? '8px',
+    activeLabelFontSize: parseInt(String(tf.label?.activeFontSize ?? 14)),
+    helperFontSize: parseInt(String(tf.helper?.fontSize ?? 12)),
+    labelColor: tf.label?.color ?? '#000',
+    activeLabelColor: tf.label?.activeColor ?? '#000',
+    inputTextColor: tf.textColor ?? '#000',
+    placeholderColor: tf.placeholderColor ?? '#999',
+    outlineDefault: tf.outline?.default ?? 'transparent',
+    outlineActive: tf.outline?.active ?? '#0066cc',
+    outlineError: tf.outline?.error ?? '#c00',
+    errorColor: tf.error?.color ?? '#c00',
+    backgroundColor: tf.background ?? '#fff',
+    backgroundColorWhite: tf.backgroundWhite ?? '#fff',
+    disabledOpacity: tf.disabledOpacity ?? '0.5',
+    paddingSm: sm?.padding ?? '4px 8px',
+    paddingMd: md?.padding ?? '6px 12px',
+    paddingLg: lg?.padding ?? '8px 16px',
+    captionFontSize: tf.caption?.fontSize ?? 12,
+    captionTextColor: tf.caption?.textColor ?? '#000',
+    iconPaddingLeft: tf.iconPaddingLeft ?? '48px',
+    iconStartLeft: (tf.icon as any)?.startLeft ?? '16px',
+    iconEndRight: (tf.icon as any)?.endRight ?? '8px',
+  };
+}
+
+/** Build Radio tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when screen changes. */
+export function getRadioTokensFromResolved(resolved: ResolvedTokens): RadioTokens {
+  const radio = resolved.components?.radio;
+  if (!radio) return RADIO_TOKENS;
+  return {
+    headingFontSize: radio.heading?.fontSize ?? RADIO_TOKENS.headingFontSize,
+    headingFontWeight:
+      typeof radio.heading?.fontWeight === 'string' ? parseInt(radio.heading.fontWeight)
+      : typeof radio.heading?.fontWeight === 'number' ? radio.heading.fontWeight
+      : RADIO_TOKENS.headingFontWeight,
+    headingFontFamily: radio.heading?.fontFamily ?? RADIO_TOKENS.headingFontFamily,
+    headingColor: radio.heading?.color ?? RADIO_TOKENS.headingColor,
+    headingMarginBottom: radio.heading?.marginBottom ?? RADIO_TOKENS.headingMarginBottom,
+    labelFontSize: radio.label?.fontSize ?? RADIO_TOKENS.labelFontSize,
+    labelFontWeight:
+      typeof radio.label?.fontWeight === 'string' ? parseInt(radio.label.fontWeight)
+      : typeof radio.label?.fontWeight === 'number' ? radio.label.fontWeight
+      : RADIO_TOKENS.labelFontWeight,
+    labelFontFamily: radio.label?.fontFamily ?? RADIO_TOKENS.labelFontFamily,
+    labelColorActive: radio.label?.color?.active ?? RADIO_TOKENS.labelColorActive,
+    labelColorInactive: radio.label?.color?.inactive ?? RADIO_TOKENS.labelColorInactive,
+    labelMarginLeft: radio.label?.marginLeft ?? RADIO_TOKENS.labelMarginLeft,
+    radioSize: radio.radio?.size ?? RADIO_TOKENS.radioSize,
+    radioDotSize:
+      (radio.size as { md?: { dotSize?: string } })?.md?.dotSize ??
+      (radio.size as { sm?: { dotSize?: string } })?.sm?.dotSize ??
+      RADIO_TOKENS.radioDotSize,
+    radioBorderRadius: radio.radio?.borderRadius ?? RADIO_TOKENS.radioBorderRadius,
+    radioStrokeWidth: radio.radio?.strokeWidth ?? RADIO_TOKENS.radioStrokeWidth,
+    radioColorActive: radio.radio?.color?.active ?? RADIO_TOKENS.radioColorActive,
+    radioColorInactive: radio.radio?.color?.inactive ?? RADIO_TOKENS.radioColorInactive,
+    radioColorDot: (radio.radio?.color as { dot?: string })?.dot ?? RADIO_TOKENS.radioColorDot,
+    radioBackground: radio.radio?.background ?? RADIO_TOKENS.radioBackground,
+    radioFocusRing:
+      (radio.radio as { focusRing?: string })?.focusRing ?? RADIO_TOKENS.radioFocusRing,
+    optionBorderActive:
+      (radio as { option?: { border?: { active?: string } } })?.option?.border?.active ??
+      RADIO_TOKENS.optionBorderActive,
+    optionBorderInactive:
+      (radio as { option?: { border?: { inactive?: string } } })?.option?.border?.inactive ??
+      RADIO_TOKENS.optionBorderInactive,
+    optionBackgroundActive:
+      (radio as { option?: { background?: { active?: string } } })?.option?.background?.active ??
+      RADIO_TOKENS.optionBackgroundActive,
+    optionBackgroundInactive:
+      (radio as { option?: { background?: { inactive?: string } } })?.option?.background
+        ?.inactive ?? RADIO_TOKENS.optionBackgroundInactive,
+    optionTextActive:
+      (radio as { option?: { text?: { active?: string } } })?.option?.text?.active ??
+      RADIO_TOKENS.optionTextActive,
+    optionTextInactive:
+      (radio as { option?: { text?: { inactive?: string } } })?.option?.text?.inactive ??
+      RADIO_TOKENS.optionTextInactive,
+    labelMarginBottom: radio.label?.marginBottom ?? RADIO_TOKENS.labelMarginBottom,
+    groupGapHorizontal: radio.group?.gapHorizontal ?? RADIO_TOKENS.groupGapHorizontal,
+    groupGapVertical: radio.group?.gapVertical ?? RADIO_TOKENS.groupGapVertical,
+    descriptionFontSize: radio.description?.fontSize ?? RADIO_TOKENS.descriptionFontSize,
+    descriptionColor: radio.description?.color ?? RADIO_TOKENS.descriptionColor,
+    descriptionFontWeight:
+      typeof radio.description?.fontWeight === 'string' ? parseInt(radio.description.fontWeight)
+      : typeof radio.description?.fontWeight === 'number' ? radio.description.fontWeight
+      : RADIO_TOKENS.descriptionFontWeight,
+    helperFontSize:
+      (radio as { helper?: { fontSize?: string } }).helper?.fontSize ?? RADIO_TOKENS.helperFontSize,
+    helperColor:
+      (radio as { helper?: { color?: string } }).helper?.color ?? RADIO_TOKENS.helperColor,
+    helperErrorColor:
+      (radio as { helper?: { errorColor?: string } }).helper?.errorColor ??
+      RADIO_TOKENS.helperErrorColor,
+    helperMarginTop:
+      (radio as { helper?: { marginTop?: string } }).helper?.marginTop ??
+      RADIO_TOKENS.helperMarginTop,
+  };
+}
+
+// Checkbox tokens (legacy format)
+export interface CheckboxTokens {
+  headingFontSize: string;
+  headingFontWeight: number;
+  headingColor: string;
+  headingMarginBottom: string;
+  textFontSize: string;
+  textFontWeight: number;
+  textColorActive: string;
+  textColorInactive: string;
+  textMarginLeft: string;
+  groupGapHorizontal: string;
+  groupGapVertical: string;
+  checkboxColorActive: string;
+  checkboxColorInactive: string;
+  checkboxBackgroundInactive: string;
+  checkedBorderColor: string;
+  checkboxSizeSm: string;
+  checkboxSizeMd: string;
+  checkboxSizeLg: string;
+  checkboxBorderRadiusSm: string;
+  checkboxBorderRadiusMd: string;
+  checkboxBorderRadiusLg: string;
+  textFontSizeSm: string;
+  textFontSizeMd: string;
+  textFontSizeLg: string;
+  headingFontSizeSm: string;
+  headingFontSizeMd: string;
+  headingFontSizeLg: string;
+  helperTextFontSize: string;
+  helperTextFontWeight: number;
+  helperTextColor: string;
+  helperTextErrorColor: string;
+  helperTextMarginTop: string;
+}
+
+const cbSize = components.checkbox.size;
+export const CHECKBOX_TOKENS: CheckboxTokens = {
+  headingFontSize: components.checkbox.heading.fontSize,
+  headingFontWeight:
+    typeof components.checkbox.heading.fontWeight === 'string' ?
+      parseInt(components.checkbox.heading.fontWeight)
+    : components.checkbox.heading.fontWeight,
+  headingColor: components.checkbox.heading.color,
+  headingMarginBottom: components.checkbox.heading.marginBottom,
+  textFontSize: components.checkbox.label.fontSize,
+  textFontWeight:
+    typeof components.checkbox.label.fontWeight === 'string' ?
+      parseInt(components.checkbox.label.fontWeight)
+    : components.checkbox.label.fontWeight,
+  textColorActive: components.checkbox.label.color.active,
+  textColorInactive: components.checkbox.label.color.inactive,
+  textMarginLeft: components.checkbox.label.marginLeft,
+  groupGapHorizontal: components.checkbox.group.gapHorizontal,
+  groupGapVertical: components.checkbox.group.gapVertical,
+  checkboxColorActive: components.checkbox.checkbox.color.active,
+  checkboxColorInactive: components.checkbox.checkbox.color.inactive,
+  checkboxBackgroundInactive: components.checkbox.checkbox.background.inactive,
+  checkedBorderColor: components.checkbox.checkbox.border.checked,
+  checkboxSizeSm: cbSize.sm.checkboxSize,
+  checkboxSizeMd: cbSize.md.checkboxSize,
+  checkboxSizeLg: cbSize.lg.checkboxSize,
+  checkboxBorderRadiusSm: cbSize.sm.borderRadius,
+  checkboxBorderRadiusMd: cbSize.md.borderRadius,
+  checkboxBorderRadiusLg: cbSize.lg.borderRadius,
+  textFontSizeSm: cbSize.sm.labelFontSize,
+  textFontSizeMd: cbSize.md.labelFontSize,
+  textFontSizeLg: cbSize.lg.labelFontSize,
+  headingFontSizeSm: cbSize.sm.headingFontSize,
+  headingFontSizeMd: cbSize.md.headingFontSize,
+  headingFontSizeLg: cbSize.lg.headingFontSize,
+  helperTextFontSize: components.checkbox.helper.textFontSizes,
+  helperTextFontWeight: components.checkbox.helper.textFontWeight,
+  helperTextColor: components.checkbox.helper.textColor,
+  helperTextErrorColor: components.checkbox.helper.errorColor,
+  helperTextMarginTop: components.checkbox.helper.marginTop,
+};
+
+/** Build Checkbox tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when theme/screen changes. */
+export function getCheckboxTokensFromResolved(resolved: ResolvedTokens): CheckboxTokens {
+  const cb = resolved.components?.checkbox;
+  if (!cb) return CHECKBOX_TOKENS;
+  const cbSize = cb.size ?? {};
+  const sm = cbSize.sm ?? {};
+  const md = cbSize.md ?? {};
+  const lg = cbSize.lg ?? {};
+  return {
+    headingFontSize: cb.heading?.fontSize ?? CHECKBOX_TOKENS.headingFontSize,
+    headingFontWeight:
+      typeof cb.heading?.fontWeight === 'string' ? parseInt(cb.heading.fontWeight)
+      : typeof cb.heading?.fontWeight === 'number' ? cb.heading.fontWeight
+      : CHECKBOX_TOKENS.headingFontWeight,
+    headingColor: cb.heading?.color ?? CHECKBOX_TOKENS.headingColor,
+    headingMarginBottom: cb.heading?.marginBottom ?? CHECKBOX_TOKENS.headingMarginBottom,
+    textFontSize: cb.label?.fontSize ?? CHECKBOX_TOKENS.textFontSize,
+    textFontWeight:
+      typeof cb.label?.fontWeight === 'string' ? parseInt(cb.label.fontWeight)
+      : typeof cb.label?.fontWeight === 'number' ? cb.label.fontWeight
+      : CHECKBOX_TOKENS.textFontWeight,
+    textColorActive: cb.label?.color?.active ?? CHECKBOX_TOKENS.textColorActive,
+    textColorInactive: cb.label?.color?.inactive ?? CHECKBOX_TOKENS.textColorInactive,
+    textMarginLeft: cb.label?.marginLeft ?? CHECKBOX_TOKENS.textMarginLeft,
+    groupGapHorizontal: cb.group?.gapHorizontal ?? CHECKBOX_TOKENS.groupGapHorizontal,
+    groupGapVertical: cb.group?.gapVertical ?? CHECKBOX_TOKENS.groupGapVertical,
+    checkboxColorActive: cb.checkbox?.color?.active ?? CHECKBOX_TOKENS.checkboxColorActive,
+    checkboxColorInactive: cb.checkbox?.color?.inactive ?? CHECKBOX_TOKENS.checkboxColorInactive,
+    checkboxBackgroundInactive:
+      cb.checkbox?.background?.inactive ?? CHECKBOX_TOKENS.checkboxBackgroundInactive,
+    checkedBorderColor: cb.checkbox?.border?.checked ?? CHECKBOX_TOKENS.checkedBorderColor,
+    checkboxSizeSm: sm.checkboxSize ?? CHECKBOX_TOKENS.checkboxSizeSm,
+    checkboxSizeMd: md.checkboxSize ?? CHECKBOX_TOKENS.checkboxSizeMd,
+    checkboxSizeLg: cb.size.lg.checkboxSize ?? CHECKBOX_TOKENS.checkboxSizeLg,
+    checkboxBorderRadiusSm: sm.borderRadius ?? CHECKBOX_TOKENS.checkboxBorderRadiusSm,
+    checkboxBorderRadiusMd: md.borderRadius ?? CHECKBOX_TOKENS.checkboxBorderRadiusMd,
+    checkboxBorderRadiusLg: lg.borderRadius ?? CHECKBOX_TOKENS.checkboxBorderRadiusLg,
+    textFontSizeSm: sm.labelFontSize ?? CHECKBOX_TOKENS.textFontSizeSm,
+    textFontSizeMd: md.labelFontSize ?? CHECKBOX_TOKENS.textFontSizeMd,
+    textFontSizeLg: lg.labelFontSize ?? CHECKBOX_TOKENS.textFontSizeLg,
+    headingFontSizeSm: sm.headingFontSize ?? CHECKBOX_TOKENS.headingFontSizeSm,
+    headingFontSizeMd: md.headingFontSize ?? CHECKBOX_TOKENS.headingFontSizeMd,
+    headingFontSizeLg: lg.headingFontSize ?? CHECKBOX_TOKENS.headingFontSizeLg,
+    helperTextFontSize: cb.helper?.textFontSize ?? CHECKBOX_TOKENS.helperTextFontSize,
+    helperTextFontWeight: cb.helper?.textFontWeight ?? CHECKBOX_TOKENS.helperTextFontWeight,
+    helperTextColor: cb.helper?.textColor ?? CHECKBOX_TOKENS.helperTextColor,
+    helperTextErrorColor: cb.helper?.errorColor ?? CHECKBOX_TOKENS.helperTextErrorColor,
+    helperTextMarginTop: cb.helper?.marginTop ?? CHECKBOX_TOKENS.helperTextMarginTop,
+  };
+}
+
+// Radio tokens (legacy format; from components/radio.json)
+export interface RadioTokens {
+  headingFontSize: string;
+  headingFontWeight: number;
+  headingFontFamily: string;
+  headingColor: string;
+  headingMarginBottom: string;
+  labelFontSize: string;
+  labelFontWeight: number;
+  labelFontFamily: string;
+  labelColorActive: string;
+  labelColorInactive: string;
+  labelMarginLeft: string;
+  radioSize: string;
+  radioDotSize: string;
+  radioBorderRadius: string;
+  radioStrokeWidth: string;
+  radioColorActive: string;
+  radioColorInactive: string;
+  radioColorDot: string;
+  radioBackground: string;
+  radioFocusRing: string;
+  optionBorderActive: string;
+  optionBorderInactive: string;
+  optionBackgroundActive: string;
+  optionBackgroundInactive: string;
+  optionTextActive: string;
+  optionTextInactive: string;
+  labelMarginBottom: string;
+  groupGapHorizontal: string;
+  groupGapVertical: string;
+  descriptionFontSize: string;
+  descriptionColor: string;
+  descriptionFontWeight: number;
+  helperFontSize: string;
+  helperColor: string;
+  helperErrorColor: string;
+  helperMarginTop: string;
+}
+
+export const RADIO_TOKENS: RadioTokens = {
+  headingFontSize: components.radio.heading.fontSize,
+  headingFontWeight:
+    typeof components.radio.heading.fontWeight === 'string' ?
+      parseInt(components.radio.heading.fontWeight)
+    : components.radio.heading.fontWeight,
+  headingFontFamily: components.radio.heading.fontFamily,
+  headingColor: components.radio.heading.color,
+  headingMarginBottom: components.radio.heading.marginBottom,
+  labelFontSize: components.radio.label.fontSize,
+  labelFontWeight:
+    typeof components.radio.label.fontWeight === 'string' ?
+      parseInt(components.radio.label.fontWeight)
+    : components.radio.label.fontWeight,
+  labelFontFamily: components.radio.label.fontFamily,
+  labelColorActive: components.radio.label.color.active,
+  labelColorInactive: components.radio.label.color.inactive,
+  labelMarginLeft: components.radio.label.marginLeft,
+  radioSize: components.radio.radio.size,
+  radioDotSize:
+    (components.radio.size?.md as { dotSize?: string })?.dotSize ??
+    (components.radio.size?.sm as { dotSize?: string })?.dotSize ??
+    foundation.size['8'],
+  radioBorderRadius: components.radio.radio.borderRadius,
+  radioStrokeWidth: components.radio.radio.strokeWidth,
+  radioColorActive: components.radio.radio.color.active,
+  radioColorInactive: components.radio.radio.color.inactive,
+  radioColorDot:
+    (components.radio.radio as { color?: { active?: string; dot?: string } }).color?.dot ??
+    (components.radio.radio as { color?: { active?: string } }).color?.active ??
+    components.radio.radio.color.active,
+  radioBackground: components.radio.radio.background,
+  radioFocusRing: (components.radio.radio as { focusRing?: string }).focusRing ?? 'none',
+  optionBorderActive:
+    (components.radio as { option?: { border?: { active?: string } } }).option?.border?.active ??
+    components.radio.radio.color.active,
+  optionBorderInactive:
+    (components.radio as { option?: { border?: { inactive?: string } } }).option?.border
+      ?.inactive ?? components.radio.radio.color.inactive,
+  optionBackgroundActive:
+    (components.radio as { option?: { background?: { active?: string } } }).option?.background
+      ?.active ?? components.radio.radio.background,
+  optionBackgroundInactive:
+    (components.radio as { option?: { background?: { inactive?: string } } }).option?.background
+      ?.inactive ?? components.radio.radio.background,
+  optionTextActive:
+    (components.radio as { option?: { text?: { active?: string } } }).option?.text?.active ??
+    components.radio.label.color.active,
+  optionTextInactive:
+    (components.radio as { option?: { text?: { inactive?: string } } }).option?.text?.inactive ??
+    components.radio.label.color.inactive,
+  labelMarginBottom: components.radio.label.marginBottom,
+  groupGapHorizontal: components.radio.group.gapHorizontal,
+  groupGapVertical: components.radio.group.gapVertical,
+  descriptionFontSize: components.radio.description.fontSize,
+  descriptionColor: components.radio.description.color,
+  descriptionFontWeight:
+    typeof components.radio.description.fontWeight === 'string' ?
+      parseInt(components.radio.description.fontWeight)
+    : components.radio.description.fontWeight,
+  helperFontSize:
+    (components.radio as { helper?: { fontSize?: string } }).helper?.fontSize ??
+    components.radio.description.fontSize,
+  helperColor:
+    (components.radio as { helper?: { color?: string } }).helper?.color ??
+    components.radio.description.color,
+  helperErrorColor:
+    (components.radio as { helper?: { errorColor?: string } }).helper?.errorColor ?? '#c00',
+  helperMarginTop:
+    (components.radio as { helper?: { marginTop?: string } }).helper?.marginTop ?? '4px',
+};
+
+// SelectScroll tokens (legacy format; from components/selectscroll.json)
+export interface SelectScrollTokens {
+  // Input
+  inputHeight: string;
+  inputHeightSm: string;
+  inputHeightMd: string;
+  inputHeightLg: string;
+  inputPadding: string;
+  inputPaddingSm: string;
+  inputPaddingMd: string;
+  inputPaddingLg: string;
+  inputBorderDefault: string;
+  inputBorderActive: string;
+  inputBorderError: string;
+  inputBorderRadius: string;
+  inputFontSize: string;
+  inputFontSizeSm: string;
+  inputFontSizeMd: string;
+  inputFontSizeLg: string;
+  inputColor: string;
+  inputBackground: string;
+  inputBackgroundWhite: string;
+  inputBackgroundDisabled: string;
+  inputDisabledOpacity: string;
+  // Listbox
+  listboxBackground: string;
+  listboxBorder: string;
+  listboxBorderRadius: string;
+  // Option
+  optionPadding: string;
+  optionFontSize: string;
+  optionColor: string;
+  optionHoverBackground: string;
+  // Label
+  labelFontSize: string;
+  labelFontWeight: number;
+  labelMarginBottom: string;
+  labelColor: string;
+  labelRequiredColor: string;
+  // Helper
+  helperFontSize: string;
+  helperColor: string;
+  helperErrorColor: string;
+  // Placeholder
+  placeholderColor: string;
+  // Button
+  buttonHoverBackground: string;
+  buttonHoverColor: string;
+  buttonColor: string;
+}
+
+const ssInputSize = components.selectscroll.input.size;
+export const SELECT_SCROLL_TOKENS: SelectScrollTokens = {
+  // Input
+  inputHeight: ssInputSize.md.height,
+  inputHeightSm: ssInputSize.sm.height,
+  inputHeightMd: ssInputSize.md.height,
+  inputHeightLg: ssInputSize.lg.height,
+  inputPadding: ssInputSize.md.padding,
+  inputPaddingSm: ssInputSize.sm.padding,
+  inputPaddingMd: ssInputSize.md.padding,
+  inputPaddingLg: ssInputSize.lg.padding,
+  inputBorderDefault: components.selectscroll.input.border.default,
+  inputBorderActive: components.selectscroll.input.border.active,
+  inputBorderError: components.selectscroll.input.border.error,
+  inputBorderRadius: ssInputSize.md.borderRadius,
+  inputFontSize: ssInputSize.md.fontSize,
+  inputFontSizeSm: ssInputSize.sm.fontSize,
+  inputFontSizeMd: ssInputSize.md.fontSize,
+  inputFontSizeLg: ssInputSize.lg.fontSize,
+  inputColor: components.selectscroll.input.color,
+  inputBackground: components.selectscroll.input.background,
+  inputBackgroundWhite:
+    components.selectscroll.input.backgroundWhite ?? components.selectscroll.input.background,
+  inputBackgroundDisabled: components.selectscroll.input.backgroundDisabled,
+  inputDisabledOpacity: components.selectscroll.input.disabledOpacity,
+  // Listbox
+  listboxBackground: components.selectscroll.listbox.background,
+  listboxBorder: components.selectscroll.listbox.border,
+  listboxBorderRadius: components.selectscroll.listbox.borderRadius,
+  // Option
+  optionPadding: components.selectscroll.option.padding,
+  optionFontSize: components.selectscroll.option.fontSize,
+  optionColor: components.selectscroll.option.color,
+  optionHoverBackground: components.selectscroll.option.hoverBackground,
+  // Label
+  labelFontSize: components.selectscroll.label.fontSize,
+  labelFontWeight:
+    typeof components.selectscroll.label.fontWeight === 'string' ?
+      parseInt(components.selectscroll.label.fontWeight)
+    : components.selectscroll.label.fontWeight,
+  labelMarginBottom: components.selectscroll.label.marginBottom,
+  labelColor: components.selectscroll.label.color,
+  labelRequiredColor: components.selectscroll.label.requiredColor,
+  // Helper
+  helperFontSize: components.selectscroll.helper.fontSize,
+  helperColor: components.selectscroll.helper.color,
+  helperErrorColor: components.selectscroll.helper.errorColor,
+  // Placeholder
+  placeholderColor: components.selectscroll.placeholderColor,
+  // Button
+  buttonHoverBackground: components.selectscroll.button.hoverBackground,
+  buttonHoverColor: components.selectscroll.button.hoverColor,
+  buttonColor: components.selectscroll.button.color,
+};
+
+/** Build SelectScroll tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when theme mode (light/dark) or brand changes. */
+export function getSelectScrollTokensFromResolved(resolved: ResolvedTokens): SelectScrollTokens {
+  const ss = resolved.components?.selectscroll as Record<string, any> | undefined;
+  if (!ss?.input?.size) return SELECT_SCROLL_TOKENS;
+  const inp = ss.input;
+  const sm = inp.size?.sm;
+  const md = inp.size?.md;
+  const lg = inp.size?.lg;
+  return {
+    inputHeight: md?.height ?? SELECT_SCROLL_TOKENS.inputHeightMd,
+    inputHeightSm: sm?.height ?? SELECT_SCROLL_TOKENS.inputHeightSm,
+    inputHeightMd: md?.height ?? SELECT_SCROLL_TOKENS.inputHeightMd,
+    inputHeightLg: lg?.height ?? SELECT_SCROLL_TOKENS.inputHeightLg,
+    inputPadding: md?.padding ?? SELECT_SCROLL_TOKENS.inputPaddingMd,
+    inputPaddingSm: sm?.padding ?? SELECT_SCROLL_TOKENS.inputPaddingSm,
+    inputPaddingMd: md?.padding ?? SELECT_SCROLL_TOKENS.inputPaddingMd,
+    inputPaddingLg: lg?.padding ?? SELECT_SCROLL_TOKENS.inputPaddingLg,
+    inputBorderDefault: inp.border?.default ?? SELECT_SCROLL_TOKENS.inputBorderDefault,
+    inputBorderActive: inp.border?.active ?? SELECT_SCROLL_TOKENS.inputBorderActive,
+    inputBorderError: inp.border?.error ?? SELECT_SCROLL_TOKENS.inputBorderError,
+    inputBorderRadius: md?.borderRadius ?? SELECT_SCROLL_TOKENS.inputBorderRadius,
+    inputFontSize: md?.fontSize ?? SELECT_SCROLL_TOKENS.inputFontSizeMd,
+    inputFontSizeSm: sm?.fontSize ?? SELECT_SCROLL_TOKENS.inputFontSizeSm,
+    inputFontSizeMd: md?.fontSize ?? SELECT_SCROLL_TOKENS.inputFontSizeMd,
+    inputFontSizeLg: lg?.fontSize ?? SELECT_SCROLL_TOKENS.inputFontSizeLg,
+    inputColor: inp.color ?? SELECT_SCROLL_TOKENS.inputColor,
+    inputBackground: inp.background ?? SELECT_SCROLL_TOKENS.inputBackground,
+    inputBackgroundWhite:
+      inp.backgroundWhite ?? inp.background ?? SELECT_SCROLL_TOKENS.inputBackgroundWhite,
+    inputBackgroundDisabled: inp.backgroundDisabled ?? SELECT_SCROLL_TOKENS.inputBackgroundDisabled,
+    inputDisabledOpacity: inp.disabledOpacity ?? SELECT_SCROLL_TOKENS.inputDisabledOpacity,
+    listboxBackground: ss.listbox?.background ?? SELECT_SCROLL_TOKENS.listboxBackground,
+    listboxBorder: ss.listbox?.border ?? SELECT_SCROLL_TOKENS.listboxBorder,
+    listboxBorderRadius: ss.listbox?.borderRadius ?? SELECT_SCROLL_TOKENS.listboxBorderRadius,
+    optionPadding: ss.option?.padding ?? SELECT_SCROLL_TOKENS.optionPadding,
+    optionFontSize: ss.option?.fontSize ?? SELECT_SCROLL_TOKENS.optionFontSize,
+    optionColor: ss.option?.color ?? SELECT_SCROLL_TOKENS.optionColor,
+    optionHoverBackground: ss.option?.hoverBackground ?? SELECT_SCROLL_TOKENS.optionHoverBackground,
+    labelFontSize: ss.label?.fontSize ?? SELECT_SCROLL_TOKENS.labelFontSize,
+    labelFontWeight:
+      typeof ss.label?.fontWeight === 'string' ?
+        parseInt(ss.label.fontWeight)
+      : (ss.label?.fontWeight ?? SELECT_SCROLL_TOKENS.labelFontWeight),
+    labelMarginBottom: ss.label?.marginBottom ?? SELECT_SCROLL_TOKENS.labelMarginBottom,
+    labelColor: ss.label?.color ?? SELECT_SCROLL_TOKENS.labelColor,
+    labelRequiredColor: ss.label?.requiredColor ?? SELECT_SCROLL_TOKENS.labelRequiredColor,
+    helperFontSize: ss.helper?.fontSize ?? SELECT_SCROLL_TOKENS.helperFontSize,
+    helperColor: ss.helper?.color ?? SELECT_SCROLL_TOKENS.helperColor,
+    helperErrorColor: ss.helper?.errorColor ?? SELECT_SCROLL_TOKENS.helperErrorColor,
+    placeholderColor: ss.placeholderColor ?? SELECT_SCROLL_TOKENS.placeholderColor,
+    buttonHoverBackground: ss.button?.hoverBackground ?? SELECT_SCROLL_TOKENS.buttonHoverBackground,
+    buttonHoverColor: ss.button?.hoverColor ?? SELECT_SCROLL_TOKENS.buttonHoverColor,
+    buttonColor: ss.button?.color ?? SELECT_SCROLL_TOKENS.buttonColor,
+  };
+}
+
+// Selector tokens (legacy format; from components/selector.json)
+export interface SelectorTokens {
+  // Input
+  inputHeight: string;
+  inputHeightXs: string;
+  inputHeightSm: string;
+  inputHeightMd: string;
+  inputHeightLg: string;
+  inputPadding: string;
+  inputPaddingXs: string;
+  inputPaddingSm: string;
+  inputPaddingMd: string;
+  inputPaddingLg: string;
+  inputBorderDefault: string;
+  inputBorderActive: string;
+  inputBorderError: string;
+  inputBorderRadius: string;
+  inputBorderRadiusXs: string;
+  inputBorderRadiusSm: string;
+  inputBorderRadiusMd: string;
+  inputBorderRadiusLg: string;
+  inputFontSize: string;
+  inputFontSizeXs: string;
+  inputFontSizeSm: string;
+  inputFontSizeMd: string;
+  inputFontSizeLg: string;
+  inputColor: string;
+  inputBackground: string;
+  inputBackgroundWhite: string;
+  inputBackgroundDisabled: string;
+  inputDisabledOpacity: string;
+  // Wrapper
+  wrapperBorderRadius: string;
+  wrapperBackground: string;
+  wrapperBackgroundWhite: string;
+  wrapperBackgroundDisabled: string;
+  // Chip
+  chipFontSize: string;
+  chipBackground: string;
+  chipColor: string;
+  chipBorderRadius: string;
+  // Button
+  buttonHoverBackground: string;
+  buttonHoverColor: string;
+  buttonColor: string;
+  // Label
+  labelFontSize: string;
+  labelFontWeight: number;
+  labelMarginBottom: string;
+  labelColor: string;
+  labelRequiredColor: string;
+  // Helper
+  helperFontSize: string;
+  helperColor: string;
+  helperErrorColor: string;
+  // Option
+  optionPadding: string;
+  optionFontSize: string;
+  optionColor: string;
+  optionHoverBackground: string;
+  // Listbox
+  listboxBackground: string;
+  listboxGroupHeadingBackground: string;
+  listboxGroupHeadingBorder: string;
+  listboxBorder: string;
+  listboxBorderRadius: string;
+  // Checkbox
+  checkboxAccentColor: string;
+}
+
+const selInputSize = components.selector.input.size;
+export const SELECTOR_TOKENS: SelectorTokens = {
+  // Input
+  inputHeight: selInputSize.md.height,
+  inputHeightXs: selInputSize.xs.height,
+  inputHeightSm: selInputSize.sm.height,
+  inputHeightMd: selInputSize.md.height,
+  inputHeightLg: selInputSize.lg.height,
+  inputPadding: selInputSize.md.padding,
+  inputPaddingXs: selInputSize.xs.padding,
+  inputPaddingSm: selInputSize.sm.padding,
+  inputPaddingMd: selInputSize.md.padding,
+  inputPaddingLg: selInputSize.lg.padding,
+  inputBorderDefault: components.selector.input.border.default,
+  inputBorderActive: components.selector.input.border.active,
+  inputBorderError: components.selector.input.border.error,
+  inputBorderRadius: selInputSize.md.borderRadius,
+  inputBorderRadiusXs: selInputSize.xs.borderRadius,
+  inputBorderRadiusSm: selInputSize.sm.borderRadius,
+  inputBorderRadiusMd: selInputSize.md.borderRadius,
+  inputBorderRadiusLg: selInputSize.lg.borderRadius,
+  inputFontSize: selInputSize.md.fontSize,
+  inputFontSizeXs: selInputSize.xs.fontSize,
+  inputFontSizeSm: selInputSize.sm.fontSize,
+  inputFontSizeMd: selInputSize.md.fontSize,
+  inputFontSizeLg: selInputSize.lg.fontSize,
+  inputColor: components.selector.input.color,
+  inputBackground: components.selector.input.background,
+  inputBackgroundWhite:
+    components.selector.input.backgroundWhite ?? components.selector.input.background,
+  inputBackgroundDisabled: components.selector.input.backgroundDisabled,
+  inputDisabledOpacity: components.selector.input.disabledOpacity,
+  // Wrapper
+  wrapperBorderRadius: components.selector.wrapper.borderRadius,
+  wrapperBackground: components.selector.wrapper.background,
+  wrapperBackgroundWhite:
+    components.selector.wrapper.backgroundWhite ?? components.selector.wrapper.background,
+  wrapperBackgroundDisabled: components.selector.wrapper.backgroundDisabled,
+  // Chip
+  chipFontSize: components.selector.chip.fontSize,
+  chipBackground: components.selector.chip.background,
+  chipColor: components.selector.chip.color,
+  chipBorderRadius: components.selector.chip.borderRadius,
+  // Button
+  buttonHoverBackground: components.selector.button.hoverBackground,
+  buttonHoverColor: components.selector.button.hoverColor,
+  buttonColor: components.selector.button.color,
+  // Label
+  labelFontSize: components.selector.label.fontSize,
+  labelFontWeight:
+    typeof components.selector.label.fontWeight === 'string' ?
+      parseInt(components.selector.label.fontWeight)
+    : components.selector.label.fontWeight,
+  labelMarginBottom: components.selector.label.marginBottom,
+  labelColor: components.selector.label.color,
+  labelRequiredColor: components.selector.label.requiredColor,
+  // Helper
+  helperFontSize: components.selector.helper.fontSize,
+  helperColor: components.selector.helper.color,
+  helperErrorColor: components.selector.helper.errorColor,
+  // Option
+  optionPadding: components.selector.option.padding,
+  optionFontSize: components.selector.option.fontSize,
+  optionColor: components.selector.option.color,
+  optionHoverBackground: components.selector.option.hoverBackground,
+  // Listbox
+  listboxBackground: components.selector.listbox.background,
+  listboxGroupHeadingBackground:
+    components.selector.listbox.groupHeadingBackground ?? components.selector.listbox.background,
+  listboxGroupHeadingBorder:
+    components.selector.listbox.groupHeadingBorder ?? '1px solid rgba(0,0,0,0.06)',
+  listboxBorder: components.selector.listbox.border,
+  listboxBorderRadius: components.selector.listbox.borderRadius,
+  // Checkbox
+  checkboxAccentColor: components.selector.checkbox.accentColor,
+};
+
+/** Build Selector tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when theme mode (light/dark) or brand changes. */
+export function getSelectorTokensFromResolved(resolved: ResolvedTokens): SelectorTokens {
+  const sel = resolved.components?.selector as Record<string, any> | undefined;
+  if (!sel?.input?.size) return SELECTOR_TOKENS;
+  const inp = sel.input;
+  const xs = inp.size?.xs;
+  const sm = inp.size?.sm;
+  const md = inp.size?.md;
+  const lg = inp.size?.lg;
+  return {
+    inputHeight: md?.height ?? SELECTOR_TOKENS.inputHeightMd,
+    inputHeightXs: xs?.height ?? SELECTOR_TOKENS.inputHeightXs,
+    inputHeightSm: sm?.height ?? SELECTOR_TOKENS.inputHeightSm,
+    inputHeightMd: md?.height ?? SELECTOR_TOKENS.inputHeightMd,
+    inputHeightLg: lg?.height ?? SELECTOR_TOKENS.inputHeightLg,
+    inputPadding: md?.padding ?? SELECTOR_TOKENS.inputPaddingMd,
+    inputPaddingXs: xs?.padding ?? SELECTOR_TOKENS.inputPaddingXs,
+    inputPaddingSm: sm?.padding ?? SELECTOR_TOKENS.inputPaddingSm,
+    inputPaddingMd: md?.padding ?? SELECTOR_TOKENS.inputPaddingMd,
+    inputPaddingLg: lg?.padding ?? SELECTOR_TOKENS.inputPaddingLg,
+    inputBorderDefault: inp.border?.default ?? SELECTOR_TOKENS.inputBorderDefault,
+    inputBorderActive: inp.border?.active ?? SELECTOR_TOKENS.inputBorderActive,
+    inputBorderError: inp.border?.error ?? SELECTOR_TOKENS.inputBorderError,
+    inputBorderRadius: md?.borderRadius ?? SELECTOR_TOKENS.inputBorderRadiusMd,
+    inputBorderRadiusXs: xs?.borderRadius ?? SELECTOR_TOKENS.inputBorderRadiusXs,
+    inputBorderRadiusSm: sm?.borderRadius ?? SELECTOR_TOKENS.inputBorderRadiusSm,
+    inputBorderRadiusMd: md?.borderRadius ?? SELECTOR_TOKENS.inputBorderRadiusMd,
+    inputBorderRadiusLg: lg?.borderRadius ?? SELECTOR_TOKENS.inputBorderRadiusLg,
+    inputFontSize: md?.fontSize ?? SELECTOR_TOKENS.inputFontSizeMd,
+    inputFontSizeXs: xs?.fontSize ?? SELECTOR_TOKENS.inputFontSizeXs,
+    inputFontSizeSm: sm?.fontSize ?? SELECTOR_TOKENS.inputFontSizeSm,
+    inputFontSizeMd: md?.fontSize ?? SELECTOR_TOKENS.inputFontSizeMd,
+    inputFontSizeLg: lg?.fontSize ?? SELECTOR_TOKENS.inputFontSizeLg,
+    inputColor: inp.color ?? SELECTOR_TOKENS.inputColor,
+    inputBackground: inp.background ?? SELECTOR_TOKENS.inputBackground,
+    inputBackgroundWhite:
+      inp.backgroundWhite ?? inp.background ?? SELECTOR_TOKENS.inputBackgroundWhite,
+    inputBackgroundDisabled: inp.backgroundDisabled ?? SELECTOR_TOKENS.inputBackgroundDisabled,
+    inputDisabledOpacity: inp.disabledOpacity ?? SELECTOR_TOKENS.inputDisabledOpacity,
+    wrapperBorderRadius: sel.wrapper?.borderRadius ?? SELECTOR_TOKENS.wrapperBorderRadius,
+    wrapperBackground: sel.wrapper?.background ?? SELECTOR_TOKENS.wrapperBackground,
+    wrapperBackgroundWhite:
+      sel.wrapper?.backgroundWhite ??
+      sel.wrapper?.background ??
+      SELECTOR_TOKENS.wrapperBackgroundWhite,
+    wrapperBackgroundDisabled:
+      sel.wrapper?.backgroundDisabled ?? SELECTOR_TOKENS.wrapperBackgroundDisabled,
+    chipFontSize: sel.chip?.fontSize ?? SELECTOR_TOKENS.chipFontSize,
+    chipBackground: sel.chip?.background ?? SELECTOR_TOKENS.chipBackground,
+    chipColor: sel.chip?.color ?? SELECTOR_TOKENS.chipColor,
+    chipBorderRadius: sel.chip?.borderRadius ?? SELECTOR_TOKENS.chipBorderRadius,
+    buttonHoverBackground: sel.button?.hoverBackground ?? SELECTOR_TOKENS.buttonHoverBackground,
+    buttonHoverColor: sel.button?.hoverColor ?? SELECTOR_TOKENS.buttonHoverColor,
+    buttonColor: sel.button?.color ?? SELECTOR_TOKENS.buttonColor,
+    labelFontSize: sel.label?.fontSize ?? SELECTOR_TOKENS.labelFontSize,
+    labelFontWeight:
+      typeof sel.label?.fontWeight === 'string' ?
+        parseInt(sel.label.fontWeight)
+      : (sel.label?.fontWeight ?? SELECTOR_TOKENS.labelFontWeight),
+    labelMarginBottom: sel.label?.marginBottom ?? SELECTOR_TOKENS.labelMarginBottom,
+    labelColor: sel.label?.color ?? SELECTOR_TOKENS.labelColor,
+    labelRequiredColor: sel.label?.requiredColor ?? SELECTOR_TOKENS.labelRequiredColor,
+    helperFontSize: sel.helper?.fontSize ?? SELECTOR_TOKENS.helperFontSize,
+    helperColor: sel.helper?.color ?? SELECTOR_TOKENS.helperColor,
+    helperErrorColor: sel.helper?.errorColor ?? SELECTOR_TOKENS.helperErrorColor,
+    optionPadding: sel.option?.padding ?? SELECTOR_TOKENS.optionPadding,
+    optionFontSize: sel.option?.fontSize ?? SELECTOR_TOKENS.optionFontSize,
+    optionColor: sel.option?.color ?? SELECTOR_TOKENS.optionColor,
+    optionHoverBackground: sel.option?.hoverBackground ?? SELECTOR_TOKENS.optionHoverBackground,
+    listboxBackground: sel.listbox?.background ?? SELECTOR_TOKENS.listboxBackground,
+    listboxGroupHeadingBackground:
+      sel.listbox?.groupHeadingBackground ?? SELECTOR_TOKENS.listboxGroupHeadingBackground,
+    listboxGroupHeadingBorder:
+      sel.listbox?.groupHeadingBorder ?? SELECTOR_TOKENS.listboxGroupHeadingBorder,
+    listboxBorder: sel.listbox?.border ?? SELECTOR_TOKENS.listboxBorder,
+    listboxBorderRadius: sel.listbox?.borderRadius ?? SELECTOR_TOKENS.listboxBorderRadius,
+    checkboxAccentColor: sel.checkbox?.accentColor ?? SELECTOR_TOKENS.checkboxAccentColor,
+  };
+}
+
+// Pagination tokens (from components/pagination.json)
+export type PaginationSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export interface PaginationSizeToken {
+  height: string;
+  minWidth: string;
+  padding: string;
+  fontSize: string;
+  borderRadius: string;
+}
+
+export interface PaginationTokens {
+  sizeXs: PaginationSizeToken;
+  sizeSm: PaginationSizeToken;
+  sizeMd: PaginationSizeToken;
+  sizeLg: PaginationSizeToken;
+  activeBackground: string;
+  activeColor: string;
+  inactiveColor: string;
+  iconColor: string;
+  hoverBackground: string;
+  disabledOpacity: string;
+  gap: string;
+  fontFamily: string;
+  fontWeight: number;
+}
+
+const pag = components.pagination;
+const pagSize = pag.size;
+export const PAGINATION_TOKENS: PaginationTokens = {
+  sizeXs: pagSize.xs,
+  sizeSm: pagSize.sm,
+  sizeMd: pagSize.md,
+  sizeLg: pagSize.lg,
+  activeBackground: pag.item.activeBackground,
+  activeColor: pag.item.activeColor,
+  inactiveColor: pag.item.inactiveColor,
+  iconColor: pag.item.iconColor,
+  hoverBackground: pag.item.hoverBackground,
+  disabledOpacity: pag.item.disabledOpacity,
+  gap: pag.gap,
+  fontFamily: pag.fontFamily,
+  fontWeight:
+    typeof pag.fontWeight === 'string' ? parseInt(pag.fontWeight) : Number(pag.fontWeight ?? 500),
+};
+
+/** Build Pagination tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when theme mode (light/dark) or brand changes. */
+export function getPaginationTokensFromResolved(resolved: ResolvedTokens): PaginationTokens {
+  const pagResolved = resolved.components?.pagination as Record<string, any> | undefined;
+  if (!pagResolved?.size) return PAGINATION_TOKENS;
+  const size = pagResolved.size;
+  const item = pagResolved.item ?? {};
+  return {
+    sizeXs: size.xs ?? PAGINATION_TOKENS.sizeXs,
+    sizeSm: size.sm ?? PAGINATION_TOKENS.sizeSm,
+    sizeMd: size.md ?? PAGINATION_TOKENS.sizeMd,
+    sizeLg: size.lg ?? PAGINATION_TOKENS.sizeLg,
+    activeBackground: item.activeBackground ?? PAGINATION_TOKENS.activeBackground,
+    activeColor: item.activeColor ?? PAGINATION_TOKENS.activeColor,
+    inactiveColor: item.inactiveColor ?? PAGINATION_TOKENS.inactiveColor,
+    iconColor: item.iconColor ?? PAGINATION_TOKENS.iconColor,
+    hoverBackground: item.hoverBackground ?? PAGINATION_TOKENS.hoverBackground,
+    disabledOpacity: item.disabledOpacity ?? PAGINATION_TOKENS.disabledOpacity,
+    gap: pagResolved.gap ?? PAGINATION_TOKENS.gap,
+    fontFamily: pagResolved.fontFamily ?? PAGINATION_TOKENS.fontFamily,
+    fontWeight:
+      typeof pagResolved.fontWeight === 'string' ?
+        parseInt(pagResolved.fontWeight)
+      : (pagResolved.fontWeight ?? PAGINATION_TOKENS.fontWeight),
+  };
+}
+
+// DatePicker tokens (resolved from components/datepicker.json → semantic)
+export const DATE_PICKER_TOKENS = components.datepicker;
+
+/** Build DatePicker tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when theme mode (light/dark) or brand changes. */
+export function getDatePickerTokensFromResolved(
+  resolved: ResolvedTokens
+): typeof DATE_PICKER_TOKENS {
+  const dp = resolved.components?.datepicker as Record<string, any> | undefined;
+  if (!dp) return DATE_PICKER_TOKENS;
+  return {
+    ...DATE_PICKER_TOKENS,
+    ...dp,
+    wrapper: { ...DATE_PICKER_TOKENS.wrapper, ...dp.wrapper },
+    input: { ...DATE_PICKER_TOKENS.input, ...dp.input },
+    header: { ...DATE_PICKER_TOKENS.header, ...dp.header },
+    headerButton: { ...DATE_PICKER_TOKENS.headerButton, ...dp.headerButton },
+    headerSelect: { ...DATE_PICKER_TOKENS.headerSelect, ...dp.headerSelect },
+    label: { ...DATE_PICKER_TOKENS.label, ...dp.label },
+    helper: { ...DATE_PICKER_TOKENS.helper, ...dp.helper },
+    calendar: { ...DATE_PICKER_TOKENS.calendar, ...dp.calendar },
+    size: dp.size ? { ...DATE_PICKER_TOKENS.size, ...dp.size } : DATE_PICKER_TOKENS.size,
+  } as typeof DATE_PICKER_TOKENS;
+}
+
+// FileUpload tokens (from components/fileupload.json)
+export interface FileUploadTokens {
+  containerHeight: string;
+  containerBorderRadius: string;
+  containerBackground: string;
+  containerBackgroundWhite: string;
+  containerBorder: string;
+  containerBorderFocus: string;
+  containerBorderError: string;
+  containerPaddingY: string;
+  containerPaddingX: string;
+  containerGap: string;
+  labelFontSize: string;
+  labelFontWeight: number;
+  labelFontFamily: string;
+  labelColor: string;
+  labelRequiredColor: string;
+  labelMarginBottom: string;
+  buttonFontSize: string;
+  buttonFontWeight: number;
+  buttonFontFamily: string;
+  buttonColor: string;
+  buttonBackground: string;
+  buttonBorder: string;
+  buttonBorderRadius: string;
+  buttonHeight: string;
+  buttonPaddingY: string;
+  buttonPaddingX: string;
+  placeholderFontSize: string;
+  placeholderFontFamily: string;
+  placeholderColor: string;
+  disabledOpacity: string;
+}
+
+const fuComp = components.fileupload as Record<string, any> | undefined;
+const fuSizeMd = (fuComp?.size as Record<string, any>)?.['md'] ?? {};
+const fuContainer = fuComp?.container ?? {};
+const fuLabel = fuComp?.label ?? {};
+const fuButton = fuComp?.button ?? {};
+const fuPlaceholder = fuComp?.placeholder ?? {};
+const fuDisabled = fuComp?.disabled ?? {};
+const fuPadding = String(fuSizeMd.padding ?? '').split(/\s+/);
+const fuPaddingY = fuPadding[0] ?? '6px';
+const fuPaddingX = fuPadding[1] ?? fuPadding[0] ?? '16px';
+export const FILEUPLOAD_TOKENS: FileUploadTokens = {
+  containerHeight: fuSizeMd.height ?? '40px',
+  containerBorderRadius: fuContainer.borderRadius ?? fuSizeMd.borderRadius ?? '8px',
+  containerBackground: fuContainer.background ?? '#ffffff',
+  containerBackgroundWhite: fuContainer.backgroundWhite ?? fuContainer.background ?? '#ffffff',
+  containerBorder: fuContainer.border ?? '1px solid #d1d5db',
+  containerBorderFocus: fuContainer.borderFocus ?? '2px solid #2563eb',
+  containerBorderError: fuContainer.borderError ?? '2px solid #dc2626',
+  containerPaddingY: fuPaddingY,
+  containerPaddingX: fuPaddingX,
+  containerGap: fuContainer.gap ?? '12px',
+  labelFontSize: fuLabel.fontSize ?? '14px',
+  labelFontWeight:
+    typeof fuLabel.fontWeight === 'string' ?
+      parseInt(fuLabel.fontWeight, 10)
+    : (fuLabel.fontWeight ?? 500),
+  labelFontFamily: fuLabel.fontFamily ?? '"Inter", sans-serif',
+  labelColor: fuLabel.color ?? '#374151',
+  labelRequiredColor: fuLabel.requiredColor ?? '#dc2626',
+  labelMarginBottom: fuLabel.marginBottom ?? '8px',
+  buttonFontSize: fuSizeMd.fontSize ?? fuButton.fontSize ?? '14px',
+  buttonFontWeight:
+    typeof fuButton.fontWeight === 'string' ?
+      parseInt(fuButton.fontWeight, 10)
+    : (fuButton.fontWeight ?? 500),
+  buttonFontFamily: fuButton.fontFamily ?? '"Inter", sans-serif',
+  buttonColor: fuButton.color ?? '#2563eb',
+  buttonBackground: fuButton.background ?? '#ffffff',
+  buttonBorder: fuButton.border ?? '1px solid #d1d5db',
+  buttonBorderRadius: fuButton.borderRadius ?? fuSizeMd.borderRadius ?? '4px',
+  buttonHeight: fuSizeMd.height ?? fuButton.height ?? '40px',
+  buttonPaddingY: fuPaddingY,
+  buttonPaddingX: fuPaddingX,
+  placeholderFontSize: fuSizeMd.fontSize ?? fuPlaceholder.fontSize ?? '14px',
+  placeholderFontFamily: fuPlaceholder.fontFamily ?? '"Inter", sans-serif',
+  placeholderColor: fuPlaceholder.color ?? '#6b7280',
+  disabledOpacity: fuDisabled.opacity ?? '0.5',
+};
+
+const defaultFileUploadTokens = FILEUPLOAD_TOKENS;
+
+export type FileUploadSize = 'sm' | 'md' | 'lg';
+
+/** Build FileUpload tokens from resolved tokens (e.g. from useTokens()). */
+export function getFileUploadTokensFromResolved(
+  resolved: ResolvedTokens,
+  size: FileUploadSize = 'md'
+): FileUploadTokens {
+  const fu = resolved.components?.fileupload as Record<string, any> | undefined;
+  if (!fu) return defaultFileUploadTokens;
+  const sizeTokens = (fu.size ?? {})[size] ?? fu.size?.md ?? {};
+  const paddingParts = String(sizeTokens.padding ?? '').split(/\s+/);
+  const paddingY = paddingParts[0] ?? defaultFileUploadTokens.containerPaddingY;
+  const paddingX = paddingParts[1] ?? paddingParts[0] ?? defaultFileUploadTokens.containerPaddingX;
+  const c = fu.container ?? {};
+  const l = fu.label ?? {};
+  const b = fu.button ?? {};
+  const p = fu.placeholder ?? {};
+  const d = fu.disabled ?? {};
+  return {
+    containerHeight: sizeTokens.height ?? defaultFileUploadTokens.containerHeight,
+    containerBorderRadius:
+      c.borderRadius ?? sizeTokens.borderRadius ?? defaultFileUploadTokens.containerBorderRadius,
+    containerBackground: c.background ?? defaultFileUploadTokens.containerBackground,
+    containerBackgroundWhite: c.backgroundWhite ?? defaultFileUploadTokens.containerBackgroundWhite,
+    containerBorder: c.border ?? defaultFileUploadTokens.containerBorder,
+    containerBorderFocus: c.borderFocus ?? defaultFileUploadTokens.containerBorderFocus,
+    containerBorderError: c.borderError ?? defaultFileUploadTokens.containerBorderError,
+    containerPaddingY: paddingY,
+    containerPaddingX: paddingX,
+    containerGap: c.gap ?? defaultFileUploadTokens.containerGap,
+    labelFontSize: l.fontSize ?? defaultFileUploadTokens.labelFontSize,
+    labelFontWeight:
+      typeof l.fontWeight === 'string' ?
+        parseInt(l.fontWeight, 10)
+      : (l.fontWeight ?? defaultFileUploadTokens.labelFontWeight),
+    labelFontFamily: l.fontFamily ?? defaultFileUploadTokens.labelFontFamily,
+    labelColor: l.color ?? defaultFileUploadTokens.labelColor,
+    labelRequiredColor: l.requiredColor ?? defaultFileUploadTokens.labelRequiredColor,
+    labelMarginBottom: l.marginBottom ?? defaultFileUploadTokens.labelMarginBottom,
+    buttonFontSize: sizeTokens.fontSize ?? defaultFileUploadTokens.buttonFontSize,
+    buttonFontWeight:
+      typeof b.fontWeight === 'string' ?
+        parseInt(b.fontWeight, 10)
+      : (b.fontWeight ?? defaultFileUploadTokens.buttonFontWeight),
+    buttonFontFamily: b.fontFamily ?? defaultFileUploadTokens.buttonFontFamily,
+    buttonColor: b.color ?? defaultFileUploadTokens.buttonColor,
+    buttonBackground: b.background ?? defaultFileUploadTokens.buttonBackground,
+    buttonBorder: b.border ?? defaultFileUploadTokens.buttonBorder,
+    buttonBorderRadius:
+      b.borderRadius ?? sizeTokens.borderRadius ?? defaultFileUploadTokens.buttonBorderRadius,
+    buttonHeight: sizeTokens.height ?? defaultFileUploadTokens.buttonHeight,
+    buttonPaddingY: paddingY,
+    buttonPaddingX: paddingX,
+    placeholderFontSize:
+      p.fontSize ?? sizeTokens.fontSize ?? defaultFileUploadTokens.placeholderFontSize,
+    placeholderFontFamily: p.fontFamily ?? defaultFileUploadTokens.placeholderFontFamily,
+    placeholderColor: p.color ?? defaultFileUploadTokens.placeholderColor,
+    disabledOpacity: d.opacity ?? defaultFileUploadTokens.disabledOpacity,
+  };
+}
+
+// UploadDropzone tokens (from components/uploaddropzone.json)
+export interface UploadDropzoneTokens {
+  titleFontSize: string;
+  titleFontWeight: number;
+  titleFontFamily: string;
+  titleLineHeight: string;
+  titleColor: string;
+  titleMarginBottom: string;
+  zoneBackground: string;
+  zoneBorder: string;
+  zoneBorderActive: string;
+  zoneBackgroundActive: string;
+  zoneBorderRadius: string;
+  zonePaddingY: string;
+  zonePaddingX: string;
+  zoneGap: string;
+  iconSize: string;
+  iconMarginBottom: string;
+  iconBackground: string;
+  iconColor: string;
+  iconBorderRadius: string;
+  iconBorder: string;
+  instructionFontSize: string;
+  instructionFontWeight: number;
+  instructionFontFamily: string;
+  instructionLineHeight: string;
+  instructionColor: string;
+  instructionMarginBottom: string;
+  hintFontSize: string;
+  hintFontWeight: number;
+  hintFontFamily: string;
+  hintLineHeight: string;
+  hintColor: string;
+  hintMarginBottom: string;
+  buttonFontSize: string;
+  buttonFontWeight: number;
+  buttonFontFamily: string;
+  buttonColor: string;
+  buttonBackground: string;
+  buttonBorder: string;
+  buttonBorderRadius: string;
+  buttonPaddingY: string;
+  buttonPaddingX: string;
+  selectedFileFontSize: string;
+  selectedFileFontFamily: string;
+  selectedFileColor: string;
+  selectedFileMarginTop: string;
+  disabledOpacity: string;
+}
+
+const udComp = components.uploaddropzone as Record<string, any> | undefined;
+const udTitle = udComp?.title ?? {};
+const udZone = udComp?.zone ?? {};
+const udIcon = udComp?.icon ?? {};
+const udInstruction = udComp?.instruction ?? {};
+const udHint = udComp?.hint ?? {};
+const udButton = udComp?.button ?? {};
+const udSelectedFile = udComp?.selectedFile ?? {};
+const udDisabled = udComp?.disabled ?? {};
+export const UPLOADDROPZONE_TOKENS: UploadDropzoneTokens = {
+  titleFontSize: udTitle.fontSize ?? '16px',
+  titleFontWeight:
+    typeof udTitle.fontWeight === 'string' ?
+      parseInt(udTitle.fontWeight, 10)
+    : (udTitle.fontWeight ?? 600),
+  titleFontFamily: udTitle.fontFamily ?? '"Inter", sans-serif',
+  titleLineHeight: udTitle.lineHeight ?? '1.5',
+  titleColor: udTitle.color ?? '#1f1f1f',
+  titleMarginBottom: udTitle.marginBottom ?? '12px',
+  zoneBackground: udZone.background ?? '#f9fafb',
+  zoneBorder: udZone.border ?? '2px dashed #c8d0d5',
+  zoneBorderActive: udZone.borderActive ?? '2px dashed #00545e',
+  zoneBackgroundActive: udZone.backgroundActive ?? '#dbeafe',
+  zoneBorderRadius: udZone.borderRadius ?? '8px',
+  zonePaddingY: udZone.paddingY ?? '24px',
+  zonePaddingX: udZone.paddingX ?? '24px',
+  zoneGap: udZone.gap ?? '0px',
+  iconSize: udIcon.size ?? '48px',
+  iconMarginBottom: udIcon.marginBottom ?? '12px',
+  iconBackground: udIcon.background ?? '#dbeafe',
+  iconColor: udIcon.color ?? '#00545e',
+  iconBorderRadius: udIcon.borderRadius ?? '8px',
+  iconBorder: udIcon.border ?? '1px solid #00545e',
+  instructionFontSize: udInstruction.fontSize ?? '14px',
+  instructionFontWeight:
+    typeof udInstruction.fontWeight === 'string' ?
+      parseInt(udInstruction.fontWeight, 10)
+    : (udInstruction.fontWeight ?? 500),
+  instructionFontFamily: udInstruction.fontFamily ?? '"Inter", sans-serif',
+  instructionLineHeight: udInstruction.lineHeight ?? '1.5',
+  instructionColor: udInstruction.color ?? '#1f1f1f',
+  instructionMarginBottom: udInstruction.marginBottom ?? '8px',
+  hintFontSize: udHint.fontSize ?? '12px',
+  hintFontWeight:
+    typeof udHint.fontWeight === 'string' ?
+      parseInt(udHint.fontWeight, 10)
+    : (udHint.fontWeight ?? 400),
+  hintFontFamily: udHint.fontFamily ?? '"Inter", sans-serif',
+  hintLineHeight: udHint.lineHeight ?? '1.5',
+  hintColor: udHint.color ?? '#5a6b77',
+  hintMarginBottom: udHint.marginBottom ?? '12px',
+  buttonFontSize: udButton.fontSize ?? '12px',
+  buttonFontWeight:
+    typeof udButton.fontWeight === 'string' ?
+      parseInt(udButton.fontWeight, 10)
+    : (udButton.fontWeight ?? 400),
+  buttonFontFamily: udButton.fontFamily ?? '"Inter", sans-serif',
+  buttonColor: udButton.color ?? '#00545e',
+  buttonBackground: udButton.background ?? '#ffffff',
+  buttonBorder: udButton.border ?? '1px solid #00545e',
+  buttonBorderRadius: udButton.borderRadius ?? '50px',
+  buttonPaddingY: udButton.paddingY ?? '8px',
+  buttonPaddingX: udButton.paddingX ?? '24px',
+  selectedFileFontSize: udSelectedFile.fontSize ?? '12px',
+  selectedFileFontFamily: udSelectedFile.fontFamily ?? '"Inter", sans-serif',
+  selectedFileColor: udSelectedFile.color ?? '#5a6b77',
+  selectedFileMarginTop: udSelectedFile.marginTop ?? '16px',
+  disabledOpacity: udDisabled.opacity ?? '0.5',
+};
+
+const defaultUploadDropzoneTokens = UPLOADDROPZONE_TOKENS;
+
+// PhoneField tokens (from components/phonefield.json)
+export interface PhoneFieldTokens {
+  borderRadiusSm: string;
+  borderRadiusMd: string;
+  borderRadiusLg: string;
+  selectorWidthSm: string;
+  selectorWidthMd: string;
+  selectorWidthLg: string;
+  labelFontSize: string;
+  labelFontWeight: number;
+  labelMarginBottom: string;
+  labelColor: string;
+  labelRequiredColor: string;
+  fontFamily: string;
+  disabledOpacity: string;
+  outlineDefault: string;
+  outlineError: string;
+  selectorBackground: string;
+  selectorBackgroundWhite: string;
+  selectorBorderRight: string;
+}
+
+const pfComp = components.phonefield as Record<string, any> | undefined;
+const pfSize = pfComp?.size ?? {};
+const pfSizeSm = pfSize.sm ?? {};
+const pfSizeMd = pfSize.md ?? {};
+const pfSizeLg = pfSize.lg ?? {};
+const pfLabel = pfComp?.label ?? {};
+const pfContainer = pfComp?.container ?? {};
+const pfSelector = pfComp?.selector ?? {};
+export const PHONEFIELD_TOKENS: PhoneFieldTokens = {
+  borderRadiusSm: pfSizeSm.borderRadius ?? '8px',
+  borderRadiusMd: pfSizeMd.borderRadius ?? '12px',
+  borderRadiusLg: pfSizeLg.borderRadius ?? '12px',
+  selectorWidthSm: String(pfSizeSm.selectorWidth ?? 100),
+  selectorWidthMd: String(pfSizeMd.selectorWidth ?? 110),
+  selectorWidthLg: String(pfSizeLg.selectorWidth ?? 120),
+  labelFontSize: pfLabel.fontSize ?? '14px',
+  labelFontWeight:
+    typeof pfLabel.fontWeight === 'string' ?
+      parseInt(pfLabel.fontWeight, 10)
+    : (pfLabel.fontWeight ?? 500),
+  labelMarginBottom: pfLabel.marginBottom ?? '8px',
+  labelColor: pfLabel.color ?? '#374151',
+  labelRequiredColor: pfLabel.requiredColor ?? '#dc2626',
+  fontFamily: pfComp?.fontFamily ?? '"Inter", sans-serif',
+  disabledOpacity: pfComp?.disabledOpacity ?? '0.5',
+  outlineDefault: pfComp?.outline?.default ?? pfContainer.border ?? '2px solid transparent',
+  outlineError: pfComp?.outline?.error ?? pfContainer.borderError ?? '2px solid #dc2626',
+  selectorBackground: pfSelector.background ?? '#F5F5F5',
+  selectorBackgroundWhite: pfSelector.backgroundWhite ?? pfSelector.background ?? '#F5F5F5',
+  selectorBorderRight: pfSelector.borderRight ?? '1px solid #E0E0E0',
+};
+
+const defaultPhoneFieldTokens = PHONEFIELD_TOKENS;
+
+/** Build PhoneField tokens from resolved tokens (e.g. from useTokens()). */
+export function getPhoneFieldTokensFromResolved(resolved: ResolvedTokens): PhoneFieldTokens {
+  const pf = resolved.components?.phonefield as Record<string, any> | undefined;
+  if (!pf) return defaultPhoneFieldTokens;
+  const size = pf.size ?? {};
+  const sm = size.sm ?? {};
+  const md = size.md ?? {};
+  const lg = size.lg ?? {};
+  const label = pf.label ?? {};
+  const container = pf.container ?? {};
+  const selector = pf.selector ?? {};
+  return {
+    borderRadiusSm: sm.borderRadius ?? defaultPhoneFieldTokens.borderRadiusSm,
+    borderRadiusMd: md.borderRadius ?? defaultPhoneFieldTokens.borderRadiusMd,
+    borderRadiusLg: lg.borderRadius ?? defaultPhoneFieldTokens.borderRadiusLg,
+    selectorWidthSm: String(sm.selectorWidth ?? defaultPhoneFieldTokens.selectorWidthSm),
+    selectorWidthMd: String(md.selectorWidth ?? defaultPhoneFieldTokens.selectorWidthMd),
+    selectorWidthLg: String(lg.selectorWidth ?? defaultPhoneFieldTokens.selectorWidthLg),
+    labelFontSize: label.fontSize ?? defaultPhoneFieldTokens.labelFontSize,
+    labelFontWeight:
+      typeof label.fontWeight === 'string' ?
+        parseInt(label.fontWeight, 10)
+      : (label.fontWeight ?? defaultPhoneFieldTokens.labelFontWeight),
+    labelMarginBottom: label.marginBottom ?? defaultPhoneFieldTokens.labelMarginBottom,
+    labelColor: label.color ?? defaultPhoneFieldTokens.labelColor,
+    labelRequiredColor: label.requiredColor ?? defaultPhoneFieldTokens.labelRequiredColor,
+    fontFamily: pf.fontFamily ?? defaultPhoneFieldTokens.fontFamily,
+    disabledOpacity: pf.disabledOpacity ?? defaultPhoneFieldTokens.disabledOpacity,
+    outlineDefault: container.border ?? defaultPhoneFieldTokens.outlineDefault,
+    outlineError: container.borderError ?? defaultPhoneFieldTokens.outlineError,
+    selectorBackground: selector.background ?? defaultPhoneFieldTokens.selectorBackground,
+    selectorBackgroundWhite:
+      selector.backgroundWhite ?? defaultPhoneFieldTokens.selectorBackgroundWhite,
+    selectorBorderRight: selector.borderRight ?? defaultPhoneFieldTokens.selectorBorderRight,
+  };
+}
+
+// Badge tokens (from components/badge.json)
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export interface BadgeTokens {
+  heightXs: string;
+  heightSm: string;
+  heightMd: string;
+  heightLg: string;
+  paddingXs: string;
+  paddingSm: string;
+  paddingMd: string;
+  paddingLg: string;
+  fontSizeXs: string;
+  fontSizeSm: string;
+  fontSizeMd: string;
+  fontSizeLg: string;
+  borderRadiusXs: string;
+  borderRadiusSm: string;
+  borderRadiusMd: string;
+  borderRadiusLg: string;
+  removeIconSizeXs: number;
+  removeIconSizeSm: number;
+  removeIconSizeMd: number;
+  removeIconSizeLg: number;
+  background: string;
+  backgroundWhite: string;
+  color: string;
+  removeButtonColor: string;
+  removeButtonHoverColor: string;
+  boxShadow: string;
+  borderColor: string;
+}
+
+const badgeComp = components.badge as Record<string, any> | undefined;
+const badgeSize = badgeComp?.size ?? {};
+const badgeSizeXs = badgeSize.xs ?? {};
+const badgeSizeSm = badgeSize.sm ?? {};
+const badgeSizeMd = badgeSize.md ?? {};
+const badgeSizeLg = badgeSize.lg ?? {};
+export const BADGE_TOKENS: BadgeTokens = {
+  heightXs: badgeSizeXs.height ?? '20px',
+  heightSm: badgeSizeSm.height ?? '28px',
+  heightMd: badgeSizeMd.height ?? '40px',
+  heightLg: badgeSizeLg.height ?? '44px',
+  paddingXs: badgeSizeXs.padding ?? '2px 6px',
+  paddingSm: badgeSizeSm.padding ?? '4px 8px',
+  paddingMd: badgeSizeMd.padding ?? '7px 12px 7px 8px',
+  paddingLg: badgeSizeLg.padding ?? '8px 14px 8px 10px',
+  fontSizeXs: badgeSizeXs.fontSize ?? '10px',
+  fontSizeSm: badgeSizeSm.fontSize ?? '12px',
+  fontSizeMd: badgeSizeMd.fontSize ?? '14px',
+  fontSizeLg: badgeSizeLg.fontSize ?? '14px',
+  borderRadiusXs: badgeSizeXs.borderRadius ?? '50px',
+  borderRadiusSm: badgeSizeSm.borderRadius ?? '50px',
+  borderRadiusMd: badgeSizeMd.borderRadius ?? '50px',
+  borderRadiusLg: badgeSizeLg.borderRadius ?? '50px',
+  removeIconSizeXs: parsePxToNumber(badgeSizeXs.removeIconSize) ?? 8,
+  removeIconSizeSm: parsePxToNumber(badgeSizeSm.removeIconSize) ?? 10,
+  removeIconSizeMd: parsePxToNumber(badgeSizeMd.removeIconSize) ?? 12,
+  removeIconSizeLg: parsePxToNumber(badgeSizeLg.removeIconSize) ?? 14,
+  background: badgeComp?.background ?? '#ffffff',
+  backgroundWhite: badgeComp?.backgroundWhite ?? '#ffffff',
+  color: badgeComp?.color ?? '#161616',
+  removeButtonColor: badgeComp?.removeButtonColor ?? '#161616',
+  removeButtonHoverColor: badgeComp?.removeButtonHoverColor ?? '#6b7280',
+  boxShadow: badgeComp?.boxShadow ?? '0 1px 2px rgba(0, 0, 0, 0.05)',
+  borderColor: badgeComp?.borderColor ?? '#E7EBEE',
+};
+
+const defaultBadgeTokens = BADGE_TOKENS;
+
+/** Build Badge tokens from resolved tokens (e.g. from useTokens()). */
+export function getBadgeTokensFromResolved(resolved: ResolvedTokens): BadgeTokens {
+  const b = resolved.components?.badge as Record<string, any> | undefined;
+  if (!b) return defaultBadgeTokens;
+  const size = b.size ?? {};
+  const xs = size.xs ?? {};
+  const sm = size.sm ?? {};
+  const md = size.md ?? {};
+  const lg = size.lg ?? {};
+  return {
+    heightXs: xs.height ?? defaultBadgeTokens.heightXs,
+    heightSm: sm.height ?? defaultBadgeTokens.heightSm,
+    heightMd: md.height ?? defaultBadgeTokens.heightMd,
+    heightLg: lg.height ?? defaultBadgeTokens.heightLg,
+    paddingXs: xs.padding ?? defaultBadgeTokens.paddingXs,
+    paddingSm: sm.padding ?? defaultBadgeTokens.paddingSm,
+    paddingMd: md.padding ?? defaultBadgeTokens.paddingMd,
+    paddingLg: lg.padding ?? defaultBadgeTokens.paddingLg,
+    fontSizeXs: xs.fontSize ?? defaultBadgeTokens.fontSizeXs,
+    fontSizeSm: sm.fontSize ?? defaultBadgeTokens.fontSizeSm,
+    fontSizeMd: md.fontSize ?? defaultBadgeTokens.fontSizeMd,
+    fontSizeLg: lg.fontSize ?? defaultBadgeTokens.fontSizeLg,
+    borderRadiusXs: xs.borderRadius ?? defaultBadgeTokens.borderRadiusXs,
+    borderRadiusSm: sm.borderRadius ?? defaultBadgeTokens.borderRadiusSm,
+    borderRadiusMd: md.borderRadius ?? defaultBadgeTokens.borderRadiusMd,
+    borderRadiusLg: lg.borderRadius ?? defaultBadgeTokens.borderRadiusLg,
+    removeIconSizeXs: parsePxToNumber(xs.removeIconSize) ?? defaultBadgeTokens.removeIconSizeXs,
+    removeIconSizeSm: parsePxToNumber(sm.removeIconSize) ?? defaultBadgeTokens.removeIconSizeSm,
+    removeIconSizeMd: parsePxToNumber(md.removeIconSize) ?? defaultBadgeTokens.removeIconSizeMd,
+    removeIconSizeLg: parsePxToNumber(lg.removeIconSize) ?? defaultBadgeTokens.removeIconSizeLg,
+    background: b.background ?? defaultBadgeTokens.background,
+    backgroundWhite: b.backgroundWhite ?? defaultBadgeTokens.backgroundWhite,
+    color: b.color ?? defaultBadgeTokens.color,
+    removeButtonColor: b.removeButtonColor ?? defaultBadgeTokens.removeButtonColor,
+    removeButtonHoverColor: b.removeButtonHoverColor ?? defaultBadgeTokens.removeButtonHoverColor,
+    boxShadow: b.boxShadow ?? defaultBadgeTokens.boxShadow,
+    borderColor: b.borderColor ?? defaultBadgeTokens.borderColor,
+  };
+}
+
+// FilterPopover tokens (from components/filterpopover.json)
+export interface FilterPopoverTokens {
+  minWidth: string;
+  minHeight: string;
+  maxHeight: string;
+  padding: string;
+  background: string;
+  border: string;
+  borderRadius: string;
+  innerBorderRadius: string;
+  boxShadow: string;
+  headerBackground: string;
+  headerPadding: string;
+  headerTitleFontSize: string;
+  headerTitleFontWeight: string;
+  headerTitleColor: string;
+  headerMarginBottom: string;
+  contentPadding: string;
+  contentGap: string;
+  footerPadding: string;
+  footerMarginTop: string;
+  footerGap: string;
+}
+
+const fpComp = components.filterpopover as Record<string, any> | undefined;
+const fpHeader = fpComp?.header ?? {};
+const fpContent = fpComp?.content ?? {};
+const fpFooter = fpComp?.footer ?? {};
+export const FILTERPOPOVER_TOKENS: FilterPopoverTokens = {
+  minWidth: fpComp?.minWidth ?? '380px',
+  minHeight: fpComp?.minHeight ?? '1px',
+  maxHeight: fpComp?.maxHeight ?? 'calc(100vh - 156px)',
+  padding: fpComp?.padding ?? '16px',
+  background: fpComp?.background ?? '#FFFFFF',
+  border: fpComp?.border ?? '1px solid #E7EBEE',
+  borderRadius: fpComp?.borderRadius ?? '16px',
+  innerBorderRadius: fpComp?.innerBorderRadius ?? '16px 16px 0 0',
+  boxShadow:
+    fpComp?.boxShadow ??
+    '0px 3px 15px -3px rgba(16, 24, 40, 0.1), 0px 2px 8px -4px rgba(16, 24, 40, 0.1)',
+  headerBackground: fpHeader.background ?? '#FAF8F4',
+  headerPadding: fpHeader.padding ?? '16px',
+  headerTitleFontSize: fpHeader.titleFontSize ?? '16px',
+  headerTitleFontWeight: fpHeader.titleFontWeight ?? '500',
+  headerTitleColor: fpHeader.titleColor ?? '#1F1F1F',
+  headerMarginBottom: fpHeader.marginBottom ?? '0px',
+  contentPadding: fpContent.padding ?? '16px',
+  contentGap: fpContent.gap ?? '12px',
+  footerPadding: fpFooter.padding ?? '16px',
+  footerMarginTop: fpFooter.marginTop ?? '0px',
+  footerGap: fpFooter.gap ?? '16px',
+};
+
+/** Build FilterPopover tokens from resolved tokens (e.g. from useTokens()). Responsive values (minWidth, minHeight, padding, borderRadius) update automatically per breakpoint. */
+export function getFilterPopoverTokensFromResolved(resolved: ResolvedTokens): FilterPopoverTokens {
+  const fp = resolved.components?.filterpopover as Record<string, any> | undefined;
+  if (!fp) return FILTERPOPOVER_TOKENS;
+  const header = fp.header ?? {};
+  const content = fp.content ?? {};
+  const footer = fp.footer ?? {};
+  return {
+    minWidth: fp.minWidth ?? FILTERPOPOVER_TOKENS.minWidth,
+    minHeight: fp.minHeight ?? FILTERPOPOVER_TOKENS.minHeight,
+    maxHeight: fp.maxHeight ?? FILTERPOPOVER_TOKENS.maxHeight,
+    padding: fp.padding ?? FILTERPOPOVER_TOKENS.padding,
+    background: fp.background ?? FILTERPOPOVER_TOKENS.background,
+    border: fp.border ?? FILTERPOPOVER_TOKENS.border,
+    borderRadius: fp.borderRadius ?? FILTERPOPOVER_TOKENS.borderRadius,
+    innerBorderRadius: fp.innerBorderRadius ?? FILTERPOPOVER_TOKENS.innerBorderRadius,
+    boxShadow: fp.boxShadow ?? FILTERPOPOVER_TOKENS.boxShadow,
+    headerBackground: header.background ?? FILTERPOPOVER_TOKENS.headerBackground,
+    headerPadding: header.padding ?? FILTERPOPOVER_TOKENS.headerPadding,
+    headerTitleFontSize: header.titleFontSize ?? FILTERPOPOVER_TOKENS.headerTitleFontSize,
+    headerTitleFontWeight: header.titleFontWeight ?? FILTERPOPOVER_TOKENS.headerTitleFontWeight,
+    headerTitleColor: header.titleColor ?? FILTERPOPOVER_TOKENS.headerTitleColor,
+    headerMarginBottom: header.marginBottom ?? FILTERPOPOVER_TOKENS.headerMarginBottom,
+    contentPadding: content.padding ?? FILTERPOPOVER_TOKENS.contentPadding,
+    contentGap: content.gap ?? FILTERPOPOVER_TOKENS.contentGap,
+    footerPadding: footer.padding ?? FILTERPOPOVER_TOKENS.footerPadding,
+    footerMarginTop: footer.marginTop ?? FILTERPOPOVER_TOKENS.footerMarginTop,
+    footerGap: footer.gap ?? FILTERPOPOVER_TOKENS.footerGap,
+  };
+}
+
+/** Build UploadDropzone tokens from resolved tokens (e.g. from useTokens()). */
+export function getUploadDropzoneTokensFromResolved(
+  resolved: ResolvedTokens
+): UploadDropzoneTokens {
+  const ud = resolved.components?.uploaddropzone as Record<string, any> | undefined;
+  if (!ud) return defaultUploadDropzoneTokens;
+  const t = ud.title ?? {};
+  const z = ud.zone ?? {};
+  const i = ud.icon ?? {};
+  const inst = ud.instruction ?? {};
+  const h = ud.hint ?? {};
+  const b = ud.button ?? {};
+  const sf = ud.selectedFile ?? {};
+  const d = ud.disabled ?? {};
+  return {
+    titleFontSize: t.fontSize ?? defaultUploadDropzoneTokens.titleFontSize,
+    titleFontWeight:
+      typeof t.fontWeight === 'string' ?
+        parseInt(t.fontWeight, 10)
+      : (t.fontWeight ?? defaultUploadDropzoneTokens.titleFontWeight),
+    titleFontFamily: t.fontFamily ?? defaultUploadDropzoneTokens.titleFontFamily,
+    titleLineHeight: t.lineHeight ?? defaultUploadDropzoneTokens.titleLineHeight,
+    titleColor: t.color ?? defaultUploadDropzoneTokens.titleColor,
+    titleMarginBottom: t.marginBottom ?? defaultUploadDropzoneTokens.titleMarginBottom,
+    zoneBackground: z.background ?? defaultUploadDropzoneTokens.zoneBackground,
+    zoneBorder: z.border ?? defaultUploadDropzoneTokens.zoneBorder,
+    zoneBorderActive: z.borderActive ?? defaultUploadDropzoneTokens.zoneBorderActive,
+    zoneBackgroundActive: z.backgroundActive ?? defaultUploadDropzoneTokens.zoneBackgroundActive,
+    zoneBorderRadius: z.borderRadius ?? defaultUploadDropzoneTokens.zoneBorderRadius,
+    zonePaddingY: z.paddingY ?? defaultUploadDropzoneTokens.zonePaddingY,
+    zonePaddingX: z.paddingX ?? defaultUploadDropzoneTokens.zonePaddingX,
+    zoneGap: z.gap ?? defaultUploadDropzoneTokens.zoneGap,
+    iconSize: i.size ?? defaultUploadDropzoneTokens.iconSize,
+    iconMarginBottom: i.marginBottom ?? defaultUploadDropzoneTokens.iconMarginBottom,
+    iconBackground: i.background ?? defaultUploadDropzoneTokens.iconBackground,
+    iconColor: i.color ?? defaultUploadDropzoneTokens.iconColor,
+    iconBorderRadius: i.borderRadius ?? defaultUploadDropzoneTokens.iconBorderRadius,
+    iconBorder: i.border ?? defaultUploadDropzoneTokens.iconBorder,
+    instructionFontSize: inst.fontSize ?? defaultUploadDropzoneTokens.instructionFontSize,
+    instructionFontWeight:
+      typeof inst.fontWeight === 'string' ?
+        parseInt(inst.fontWeight, 10)
+      : (inst.fontWeight ?? defaultUploadDropzoneTokens.instructionFontWeight),
+    instructionFontFamily: inst.fontFamily ?? defaultUploadDropzoneTokens.instructionFontFamily,
+    instructionLineHeight: inst.lineHeight ?? defaultUploadDropzoneTokens.instructionLineHeight,
+    instructionColor: inst.color ?? defaultUploadDropzoneTokens.instructionColor,
+    instructionMarginBottom:
+      inst.marginBottom ?? defaultUploadDropzoneTokens.instructionMarginBottom,
+    hintFontSize: h.fontSize ?? defaultUploadDropzoneTokens.hintFontSize,
+    hintFontWeight:
+      typeof h.fontWeight === 'string' ?
+        parseInt(h.fontWeight, 10)
+      : (h.fontWeight ?? defaultUploadDropzoneTokens.hintFontWeight),
+    hintFontFamily: h.fontFamily ?? defaultUploadDropzoneTokens.hintFontFamily,
+    hintLineHeight: h.lineHeight ?? defaultUploadDropzoneTokens.hintLineHeight,
+    hintColor: h.color ?? defaultUploadDropzoneTokens.hintColor,
+    hintMarginBottom: h.marginBottom ?? defaultUploadDropzoneTokens.hintMarginBottom,
+    buttonFontSize: b.fontSize ?? defaultUploadDropzoneTokens.buttonFontSize,
+    buttonFontWeight:
+      typeof b.fontWeight === 'string' ?
+        parseInt(b.fontWeight, 10)
+      : (b.fontWeight ?? defaultUploadDropzoneTokens.buttonFontWeight),
+    buttonFontFamily: b.fontFamily ?? defaultUploadDropzoneTokens.buttonFontFamily,
+    buttonColor: b.color ?? defaultUploadDropzoneTokens.buttonColor,
+    buttonBackground: b.background ?? defaultUploadDropzoneTokens.buttonBackground,
+    buttonBorder: b.border ?? defaultUploadDropzoneTokens.buttonBorder,
+    buttonBorderRadius: b.borderRadius ?? defaultUploadDropzoneTokens.buttonBorderRadius,
+    buttonPaddingY: b.paddingY ?? defaultUploadDropzoneTokens.buttonPaddingY,
+    buttonPaddingX: b.paddingX ?? defaultUploadDropzoneTokens.buttonPaddingX,
+    selectedFileFontSize: sf.fontSize ?? defaultUploadDropzoneTokens.selectedFileFontSize,
+    selectedFileFontFamily: sf.fontFamily ?? defaultUploadDropzoneTokens.selectedFileFontFamily,
+    selectedFileColor: sf.color ?? defaultUploadDropzoneTokens.selectedFileColor,
+    selectedFileMarginTop: sf.marginTop ?? defaultUploadDropzoneTokens.selectedFileMarginTop,
+    disabledOpacity: d.opacity ?? defaultUploadDropzoneTokens.disabledOpacity,
+  };
+}
+
+// Loader token types (aligned with components/loader.json).
+export interface LoaderTokens {
+  backdropBackground: string;
+  backdropOpacity: string;
+  backdropZIndex: string;
+  dotColor: string;
+  dotSize: string;
+  dotActiveSpread: string;
+  dotGap: string;
+}
+
+const loaderComp = components.loader as Record<string, any> | undefined;
+export const LOADER_TOKENS: LoaderTokens = {
+  backdropBackground: loaderComp?.backdrop?.background ?? '#000000',
+  backdropOpacity: loaderComp?.backdrop?.opacity ?? '0.5',
+  backdropZIndex: loaderComp?.backdrop?.zIndex ?? '9999',
+  dotColor: loaderComp?.dot?.color ?? '#00545E',
+  dotSize: loaderComp?.dot?.size ?? '4px',
+  dotActiveSpread: loaderComp?.dot?.activeSpread ?? '4px',
+  dotGap: loaderComp?.dot?.gap ?? '20px',
+};
+
+const defaultLoaderTokens = LOADER_TOKENS;
+
+/** Build Loader tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when theme mode (light/dark) or brand changes. */
+export function getLoaderTokensFromResolved(resolved: ResolvedTokens): LoaderTokens {
+  const l = resolved.components?.loader as Record<string, any> | undefined;
+  if (!l) return defaultLoaderTokens;
+  return {
+    backdropBackground: l.backdrop?.background ?? defaultLoaderTokens.backdropBackground,
+    backdropOpacity: l.backdrop?.opacity ?? defaultLoaderTokens.backdropOpacity,
+    backdropZIndex: l.backdrop?.zIndex ?? defaultLoaderTokens.backdropZIndex,
+    dotColor: l.dot?.color ?? defaultLoaderTokens.dotColor,
+    dotSize: l.dot?.size ?? defaultLoaderTokens.dotSize,
+    dotActiveSpread: l.dot?.activeSpread ?? defaultLoaderTokens.dotActiveSpread,
+    dotGap: l.dot?.gap ?? defaultLoaderTokens.dotGap,
+  };
+}
+
+// Skeleton token types (aligned with components/skeleton.json).
+export interface SkeletonTokens {
+  baseColor: string;
+  highlightColor: string;
+}
+
+const skeletonComp = components.skeleton as Record<string, any> | undefined;
+export const SKELETON_TOKENS: SkeletonTokens = {
+  baseColor: skeletonComp?.baseColor ?? '#e5e9eb',
+  highlightColor: skeletonComp?.highlightColor ?? '#f3f5f6',
+};
+
+const defaultSkeletonTokens = SKELETON_TOKENS;
+
+/** Build Skeleton tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when theme mode (light/dark) or brand changes. */
+export function getSkeletonTokensFromResolved(resolved: ResolvedTokens): SkeletonTokens {
+  const s = resolved.components?.skeleton as Record<string, any> | undefined;
+  if (!s) return defaultSkeletonTokens;
+  return {
+    baseColor: s.baseColor ?? defaultSkeletonTokens.baseColor,
+    highlightColor: s.highlightColor ?? defaultSkeletonTokens.highlightColor,
+  };
+}
+
+// DataTable token types (aligned with components/datatable.json).
+export interface DataTableTokens {
+  headerBackground: string;
+  headerColor: string;
+  headerFontWeight: string;
+  headerFontSize: string;
+  headerPadding: string;
+  headerBorderBottom: string;
+  headerBorderRight: string;
+  cellPadding: string;
+  cellFontSize: string;
+  cellColor: string;
+  cellBorderBottom: string;
+  rowBackground: string;
+  rowStripeBackground: string;
+  rowHoverBackground: string;
+  skeletonBaseColor: string;
+  skeletonHeight: string;
+  skeletonRadius: string;
+  emptyStateColor: string;
+  emptyStateFontSize: string;
+  tableBorder: string;
+  sortIconWidth: string;
+  sortIconHeight: string;
+}
+
+const datatableComp = components.datatable as Record<string, any> | undefined;
+export const DATATABLE_TOKENS: DataTableTokens = {
+  headerBackground: datatableComp?.header?.background ?? '#F9FAFB',
+  headerColor: datatableComp?.header?.color ?? '#00545E',
+  headerFontWeight: String(datatableComp?.header?.fontWeight ?? '600'),
+  headerFontSize: datatableComp?.header?.fontSize ?? '12px',
+  headerPadding: datatableComp?.header?.padding ?? '16px',
+  headerBorderBottom: datatableComp?.header?.borderBottom ?? '#E5E7EB',
+  headerBorderRight: datatableComp?.header?.borderRight ?? '#00545E',
+  cellPadding: datatableComp?.cell?.padding ?? '16px',
+  cellFontSize: datatableComp?.cell?.fontSize ?? '12px',
+  cellColor: datatableComp?.cell?.color ?? 'rgba(0,0,0,0.87)',
+  cellBorderBottom: datatableComp?.cell?.borderBottom ?? '#E5E7EB',
+  rowBackground: datatableComp?.row?.background ?? '#FFFFFF',
+  rowStripeBackground: datatableComp?.row?.stripeBackground ?? '#F3F5F6',
+  rowHoverBackground: datatableComp?.row?.hoverBackground ?? '#F3F4F6',
+  skeletonBaseColor: datatableComp?.skeleton?.baseColor ?? '#f3f4f6',
+  skeletonHeight: datatableComp?.skeleton?.height ?? '16px',
+  skeletonRadius: datatableComp?.skeleton?.borderRadius ?? '4px',
+  emptyStateColor: datatableComp?.emptyState?.color ?? '#6B7280',
+  emptyStateFontSize: datatableComp?.emptyState?.fontSize ?? '16px',
+  tableBorder: datatableComp?.table?.border ?? '1px solid #E5E7EB',
+  sortIconWidth: datatableComp?.sortIcon?.width ?? '16px',
+  sortIconHeight: datatableComp?.sortIcon?.height ?? '16px',
+};
+
+const defaultDataTableTokens = DATATABLE_TOKENS;
+
+/** Build DataTable tokens from resolved tokens (e.g. from useTokens()). */
+export function getDataTableTokensFromResolved(resolved: ResolvedTokens): DataTableTokens {
+  const d = resolved.components?.datatable as Record<string, any> | undefined;
+  if (!d) return defaultDataTableTokens;
+  return {
+    headerBackground: d.header?.background ?? defaultDataTableTokens.headerBackground,
+    headerColor: d.header?.color ?? defaultDataTableTokens.headerColor,
+    headerFontWeight: String(d.header?.fontWeight ?? defaultDataTableTokens.headerFontWeight),
+    headerFontSize: d.header?.fontSize ?? defaultDataTableTokens.headerFontSize,
+    headerPadding: d.header?.padding ?? defaultDataTableTokens.headerPadding,
+    headerBorderBottom: d.header?.borderBottom ?? defaultDataTableTokens.headerBorderBottom,
+    headerBorderRight: d.header?.borderRight ?? defaultDataTableTokens.headerBorderRight,
+    cellPadding: d.cell?.padding ?? defaultDataTableTokens.cellPadding,
+    cellFontSize: d.cell?.fontSize ?? defaultDataTableTokens.cellFontSize,
+    cellColor: d.cell?.color ?? defaultDataTableTokens.cellColor,
+    cellBorderBottom: d.cell?.borderBottom ?? defaultDataTableTokens.cellBorderBottom,
+    rowBackground: d.row?.background ?? defaultDataTableTokens.rowBackground,
+    rowStripeBackground: d.row?.stripeBackground ?? defaultDataTableTokens.rowStripeBackground,
+    rowHoverBackground: d.row?.hoverBackground ?? defaultDataTableTokens.rowHoverBackground,
+    skeletonBaseColor: d.skeleton?.baseColor ?? defaultDataTableTokens.skeletonBaseColor,
+    skeletonHeight: d.skeleton?.height ?? defaultDataTableTokens.skeletonHeight,
+    skeletonRadius: d.skeleton?.borderRadius ?? defaultDataTableTokens.skeletonRadius,
+    emptyStateColor: d.emptyState?.color ?? defaultDataTableTokens.emptyStateColor,
+    emptyStateFontSize: d.emptyState?.fontSize ?? defaultDataTableTokens.emptyStateFontSize,
+    tableBorder: d.table?.border ?? defaultDataTableTokens.tableBorder,
+    sortIconWidth: d.sortIcon?.width ?? defaultDataTableTokens.sortIconWidth,
+    sortIconHeight: d.sortIcon?.height ?? defaultDataTableTokens.sortIconHeight,
+  };
+}
+
+export interface ProgressTokens {
+  height: string;
+  borderRadius: string;
+  trackBackground: string;
+  barBackground: string;
+}
+
+const progressComp = defaultResolved.components?.progress;
+export const PROGRESS_TOKENS: ProgressTokens = {
+  height: progressComp?.height ?? '8px',
+  borderRadius: progressComp?.borderRadius ?? '4px',
+  trackBackground: progressComp?.track?.background ?? '#E0E0E0',
+  barBackground: progressComp?.bar?.background ?? '#1976d2',
+};
+
+export function getProgressTokensFromResolved(resolved: ResolvedTokens): ProgressTokens {
+  const p = resolved.components?.progress as Record<string, any> | undefined;
+  if (!p) return PROGRESS_TOKENS;
+  return {
+    height: p.height ?? PROGRESS_TOKENS.height,
+    borderRadius: p.borderRadius ?? PROGRESS_TOKENS.borderRadius,
+    trackBackground: p.track?.background ?? PROGRESS_TOKENS.trackBackground,
+    barBackground: p.bar?.background ?? PROGRESS_TOKENS.barBackground,
+  };
+}
+
+export interface StatCardTokens {
+  surfaceBackground: string;
+  border: string;
+  borderRadius: string;
+  padding: string;
+  gap: string;
+  iconWellSize: string;
+  iconWellBorderRadius: string;
+  iconWellAccentMixPercent: string;
+  labelFontSize: string;
+  labelFontWeight: string | number;
+  labelColor: string;
+  valueFontSize: string;
+  valueFontWeight: string | number;
+  valueColor: string;
+}
+
+const statCardComp = defaultResolved.components?.statCard as Record<string, any> | undefined;
+
+export const STAT_CARD_TOKENS: StatCardTokens = {
+  surfaceBackground: statCardComp?.surfaceBackground ?? '#ffffff',
+  border: statCardComp?.border ?? '1px solid #E5E7EB',
+  borderRadius: statCardComp?.borderRadius ?? '12px',
+  padding: statCardComp?.padding ?? '12px 16px',
+  gap: statCardComp?.gap ?? '12px',
+  iconWellSize: statCardComp?.iconWell?.size ?? '34px',
+  iconWellBorderRadius: statCardComp?.iconWell?.borderRadius ?? '8px',
+  iconWellAccentMixPercent: String(statCardComp?.iconWell?.accentMixPercent ?? '14'),
+  labelFontSize: statCardComp?.label?.fontSize ?? '12px',
+  labelFontWeight: statCardComp?.label?.fontWeight ?? 600,
+  labelColor: statCardComp?.label?.color ?? '#6B7280',
+  valueFontSize: statCardComp?.value?.fontSize ?? '18px',
+  valueFontWeight: statCardComp?.value?.fontWeight ?? 700,
+  valueColor: statCardComp?.value?.color ?? '#111827',
+};
+
+export function getStatCardTokensFromResolved(resolved: ResolvedTokens): StatCardTokens {
+  const s = resolved.components?.statCard as Record<string, any> | undefined;
+  if (!s) return STAT_CARD_TOKENS;
+  const well = s.iconWell ?? {};
+  const label = s.label ?? {};
+  const value = s.value ?? {};
+  return {
+    surfaceBackground: s.surfaceBackground ?? STAT_CARD_TOKENS.surfaceBackground,
+    border: s.border ?? STAT_CARD_TOKENS.border,
+    borderRadius: s.borderRadius ?? STAT_CARD_TOKENS.borderRadius,
+    padding: s.padding ?? STAT_CARD_TOKENS.padding,
+    gap: s.gap ?? STAT_CARD_TOKENS.gap,
+    iconWellSize: well.size ?? STAT_CARD_TOKENS.iconWellSize,
+    iconWellBorderRadius: well.borderRadius ?? STAT_CARD_TOKENS.iconWellBorderRadius,
+    iconWellAccentMixPercent: String(
+      well.accentMixPercent ?? STAT_CARD_TOKENS.iconWellAccentMixPercent
+    ),
+    labelFontSize: label.fontSize ?? STAT_CARD_TOKENS.labelFontSize,
+    labelFontWeight: label.fontWeight ?? STAT_CARD_TOKENS.labelFontWeight,
+    labelColor: label.color ?? STAT_CARD_TOKENS.labelColor,
+    valueFontSize: value.fontSize ?? STAT_CARD_TOKENS.valueFontSize,
+    valueFontWeight: value.fontWeight ?? STAT_CARD_TOKENS.valueFontWeight,
+    valueColor: value.color ?? STAT_CARD_TOKENS.valueColor,
+  };
+}
+
+export interface StepperTokens {
+  gap: string;
+  stepGap: string;
+  line: {
+    width: string;
+    height: string;
+    completedBackground: string;
+    pendingBackground: string;
+  };
+  indicator: {
+    size: string;
+    borderWidth: string;
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+    completedBackground: string;
+    completedBorder: string;
+    completedColor: string;
+    activeBackground: string;
+    activeBorder: string;
+    activeColor: string;
+    pendingBackground: string;
+    pendingBorder: string;
+    pendingColor: string;
+  };
+  label: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+    completedColor: string;
+    activeColor: string;
+    pendingColor: string;
+  };
+}
+
+const stepperComp = defaultResolved.components?.stepper;
+export const STEPPER_TOKENS: StepperTokens = {
+  gap: stepperComp?.gap ?? '8px',
+  stepGap: stepperComp?.stepGap ?? '8px',
+  line: {
+    width: stepperComp?.line?.width ?? '40px',
+    height: stepperComp?.line?.height ?? '2px',
+    completedBackground: stepperComp?.line?.completedBackground ?? '#198754',
+    pendingBackground: stepperComp?.line?.pendingBackground ?? '#D1D5DB',
+  },
+  indicator: {
+    size: stepperComp?.indicator?.size ?? '34px',
+    borderWidth: stepperComp?.indicator?.borderWidth ?? '2px',
+    fontFamily: stepperComp?.indicator?.fontFamily ?? '"Inter", sans-serif',
+    fontSize: stepperComp?.indicator?.fontSize ?? '16px',
+    fontWeight: String(stepperComp?.indicator?.fontWeight ?? '600'),
+    lineHeight: stepperComp?.indicator?.lineHeight ?? '24px',
+    completedBackground: stepperComp?.indicator?.completedBackground ?? '#198754',
+    completedBorder: stepperComp?.indicator?.completedBorder ?? '#198754',
+    completedColor: stepperComp?.indicator?.completedColor ?? '#ffffff',
+    activeBackground: stepperComp?.indicator?.activeBackground ?? '#e8f5ec',
+    activeBorder: stepperComp?.indicator?.activeBorder ?? '#198754',
+    activeColor: stepperComp?.indicator?.activeColor ?? '#2e3f2d',
+    pendingBackground: stepperComp?.indicator?.pendingBackground ?? '#ffffff',
+    pendingBorder: stepperComp?.indicator?.pendingBorder ?? '#D1D5DB',
+    pendingColor: stepperComp?.indicator?.pendingColor ?? '#9CA3AF',
+  },
+  label: {
+    fontFamily: stepperComp?.label?.fontFamily ?? '"Inter", sans-serif',
+    fontSize: stepperComp?.label?.fontSize ?? '32px',
+    fontWeight: String(stepperComp?.label?.fontWeight ?? '600'),
+    lineHeight: stepperComp?.label?.lineHeight ?? '24px',
+    completedColor: stepperComp?.label?.completedColor ?? '#2e3f2d',
+    activeColor: stepperComp?.label?.activeColor ?? '#2e3f2d',
+    pendingColor: stepperComp?.label?.pendingColor ?? '#9CA3AF',
+  },
+};
+
+export function getStepperTokensFromResolved(resolved: ResolvedTokens): StepperTokens {
+  const s = resolved.components?.stepper as Record<string, any> | undefined;
+  if (!s) return STEPPER_TOKENS;
+
+  return {
+    gap: s.gap ?? STEPPER_TOKENS.gap,
+    stepGap: s.stepGap ?? STEPPER_TOKENS.stepGap,
+    line: {
+      width: s.line?.width ?? STEPPER_TOKENS.line.width,
+      height: s.line?.height ?? STEPPER_TOKENS.line.height,
+      completedBackground: s.line?.completedBackground ?? STEPPER_TOKENS.line.completedBackground,
+      pendingBackground: s.line?.pendingBackground ?? STEPPER_TOKENS.line.pendingBackground,
+    },
+    indicator: {
+      size: s.indicator?.size ?? STEPPER_TOKENS.indicator.size,
+      borderWidth: s.indicator?.borderWidth ?? STEPPER_TOKENS.indicator.borderWidth,
+      fontFamily: s.indicator?.fontFamily ?? STEPPER_TOKENS.indicator.fontFamily,
+      fontSize: s.indicator?.fontSize ?? STEPPER_TOKENS.indicator.fontSize,
+      fontWeight: String(s.indicator?.fontWeight ?? STEPPER_TOKENS.indicator.fontWeight),
+      lineHeight: s.indicator?.lineHeight ?? STEPPER_TOKENS.indicator.lineHeight,
+      completedBackground:
+        s.indicator?.completedBackground ?? STEPPER_TOKENS.indicator.completedBackground,
+      completedBorder: s.indicator?.completedBorder ?? STEPPER_TOKENS.indicator.completedBorder,
+      completedColor: s.indicator?.completedColor ?? STEPPER_TOKENS.indicator.completedColor,
+      activeBackground: s.indicator?.activeBackground ?? STEPPER_TOKENS.indicator.activeBackground,
+      activeBorder: s.indicator?.activeBorder ?? STEPPER_TOKENS.indicator.activeBorder,
+      activeColor: s.indicator?.activeColor ?? STEPPER_TOKENS.indicator.activeColor,
+      pendingBackground:
+        s.indicator?.pendingBackground ?? STEPPER_TOKENS.indicator.pendingBackground,
+      pendingBorder: s.indicator?.pendingBorder ?? STEPPER_TOKENS.indicator.pendingBorder,
+      pendingColor: s.indicator?.pendingColor ?? STEPPER_TOKENS.indicator.pendingColor,
+    },
+    label: {
+      fontFamily: s.label?.fontFamily ?? STEPPER_TOKENS.label.fontFamily,
+      fontSize: s.label?.fontSize ?? STEPPER_TOKENS.label.fontSize,
+      fontWeight: String(s.label?.fontWeight ?? STEPPER_TOKENS.label.fontWeight),
+      lineHeight: s.label?.lineHeight ?? STEPPER_TOKENS.label.lineHeight,
+      completedColor: s.label?.completedColor ?? STEPPER_TOKENS.label.completedColor,
+      activeColor: s.label?.activeColor ?? STEPPER_TOKENS.label.activeColor,
+      pendingColor: s.label?.pendingColor ?? STEPPER_TOKENS.label.pendingColor,
+    },
+  };
+}
+
+export interface AccordionTokens {
+  container: {
+    width: string;
+    borderWidth: string;
+    borderColor: string;
+    borderRadius: string;
+    background: string;
+  };
+  header: {
+    padding: string;
+    gap: string;
+    contentGap: string;
+    defaultBackground: string;
+    hoverBackground: string;
+    expandedBackground: string;
+  };
+  statusIcon: {
+    size: string;
+    background: string;
+    color: string;
+    symbol: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+  };
+  title: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+    color: string;
+  };
+  subtitle: {
+    fontFamily: string;
+    fontSize: string;
+    fontStyle: string;
+    fontWeight: string;
+    lineHeight: string;
+    color: string;
+  };
+  actionIcon: {
+    size: string;
+    color: string;
+    strokeWidth: string;
+  };
+  content: {
+    padding: string;
+    background: string;
+  };
+}
+
+const accordionComp = defaultResolved.components?.accordion;
+export const ACCORDION_TOKENS: AccordionTokens = {
+  container: {
+    width: accordionComp?.container?.width ?? '100%',
+    borderWidth: accordionComp?.container?.borderWidth ?? '1px',
+    borderColor: accordionComp?.container?.borderColor ?? '#D4DDE1',
+    borderRadius: accordionComp?.container?.borderRadius ?? '12px',
+    background: accordionComp?.container?.background ?? '#ffffff',
+  },
+  header: {
+    padding: accordionComp?.header?.padding ?? '20px',
+    gap: accordionComp?.header?.gap ?? '16px',
+    contentGap: accordionComp?.header?.contentGap ?? '16px',
+    defaultBackground: accordionComp?.header?.defaultBackground ?? '#f5f7f8',
+    hoverBackground: accordionComp?.header?.hoverBackground ?? '#ffffff',
+    expandedBackground: accordionComp?.header?.expandedBackground ?? '#e7f2d4',
+  },
+  statusIcon: {
+    size: accordionComp?.statusIcon?.size ?? '40px',
+    background: accordionComp?.statusIcon?.background ?? '#6B8F00',
+    color: accordionComp?.statusIcon?.color ?? '#ffffff',
+    symbol: accordionComp?.statusIcon?.symbol ?? '✓',
+    fontSize: accordionComp?.statusIcon?.fontSize ?? '20px',
+    fontWeight: String(accordionComp?.statusIcon?.fontWeight ?? '700'),
+    lineHeight: accordionComp?.statusIcon?.lineHeight ?? '20px',
+  },
+  title: {
+    fontFamily: accordionComp?.title?.fontFamily ?? '"Inter", sans-serif',
+    fontSize: accordionComp?.title?.fontSize ?? '34px',
+    fontWeight: String(accordionComp?.title?.fontWeight ?? '600'),
+    lineHeight: accordionComp?.title?.lineHeight ?? '40px',
+    color: accordionComp?.title?.color ?? '#22313A',
+  },
+  subtitle: {
+    fontFamily: accordionComp?.subtitle?.fontFamily ?? '"Inter", sans-serif',
+    fontSize: accordionComp?.subtitle?.fontSize ?? '30px',
+    fontStyle: accordionComp?.subtitle?.fontStyle ?? 'italic',
+    fontWeight: String(accordionComp?.subtitle?.fontWeight ?? '500'),
+    lineHeight: accordionComp?.subtitle?.lineHeight ?? '32px',
+    color: accordionComp?.subtitle?.color ?? '#56636A',
+  },
+  actionIcon: {
+    size: accordionComp?.actionIcon?.size ?? '24px',
+    color: accordionComp?.actionIcon?.color ?? '#6B8F00',
+    strokeWidth: accordionComp?.actionIcon?.strokeWidth ?? '2px',
+  },
+  content: {
+    padding: accordionComp?.content?.padding ?? '20px',
+    background: accordionComp?.content?.background ?? '#ffffff',
+  },
+};
+
+export function getAccordionTokensFromResolved(resolved: ResolvedTokens): AccordionTokens {
+  const a = resolved.components?.accordion as Record<string, any> | undefined;
+  if (!a) return ACCORDION_TOKENS;
+
+  return {
+    container: {
+      width: a.container?.width ?? ACCORDION_TOKENS.container.width,
+      borderWidth: a.container?.borderWidth ?? ACCORDION_TOKENS.container.borderWidth,
+      borderColor: a.container?.borderColor ?? ACCORDION_TOKENS.container.borderColor,
+      borderRadius: a.container?.borderRadius ?? ACCORDION_TOKENS.container.borderRadius,
+      background: a.container?.background ?? ACCORDION_TOKENS.container.background,
+    },
+    header: {
+      padding: a.header?.padding ?? ACCORDION_TOKENS.header.padding,
+      gap: a.header?.gap ?? ACCORDION_TOKENS.header.gap,
+      contentGap: a.header?.contentGap ?? ACCORDION_TOKENS.header.contentGap,
+      defaultBackground: a.header?.defaultBackground ?? ACCORDION_TOKENS.header.defaultBackground,
+      hoverBackground: a.header?.hoverBackground ?? ACCORDION_TOKENS.header.hoverBackground,
+      expandedBackground:
+        a.header?.expandedBackground ?? ACCORDION_TOKENS.header.expandedBackground,
+    },
+    statusIcon: {
+      size: a.statusIcon?.size ?? ACCORDION_TOKENS.statusIcon.size,
+      background: a.statusIcon?.background ?? ACCORDION_TOKENS.statusIcon.background,
+      color: a.statusIcon?.color ?? ACCORDION_TOKENS.statusIcon.color,
+      symbol: a.statusIcon?.symbol ?? ACCORDION_TOKENS.statusIcon.symbol,
+      fontSize: a.statusIcon?.fontSize ?? ACCORDION_TOKENS.statusIcon.fontSize,
+      fontWeight: String(a.statusIcon?.fontWeight ?? ACCORDION_TOKENS.statusIcon.fontWeight),
+      lineHeight: a.statusIcon?.lineHeight ?? ACCORDION_TOKENS.statusIcon.lineHeight,
+    },
+    title: {
+      fontFamily: a.title?.fontFamily ?? ACCORDION_TOKENS.title.fontFamily,
+      fontSize: a.title?.fontSize ?? ACCORDION_TOKENS.title.fontSize,
+      fontWeight: String(a.title?.fontWeight ?? ACCORDION_TOKENS.title.fontWeight),
+      lineHeight: a.title?.lineHeight ?? ACCORDION_TOKENS.title.lineHeight,
+      color: a.title?.color ?? ACCORDION_TOKENS.title.color,
+    },
+    subtitle: {
+      fontFamily: a.subtitle?.fontFamily ?? ACCORDION_TOKENS.subtitle.fontFamily,
+      fontSize: a.subtitle?.fontSize ?? ACCORDION_TOKENS.subtitle.fontSize,
+      fontStyle: a.subtitle?.fontStyle ?? ACCORDION_TOKENS.subtitle.fontStyle,
+      fontWeight: String(a.subtitle?.fontWeight ?? ACCORDION_TOKENS.subtitle.fontWeight),
+      lineHeight: a.subtitle?.lineHeight ?? ACCORDION_TOKENS.subtitle.lineHeight,
+      color: a.subtitle?.color ?? ACCORDION_TOKENS.subtitle.color,
+    },
+    actionIcon: {
+      size: a.actionIcon?.size ?? ACCORDION_TOKENS.actionIcon.size,
+      color: a.actionIcon?.color ?? ACCORDION_TOKENS.actionIcon.color,
+      strokeWidth: a.actionIcon?.strokeWidth ?? ACCORDION_TOKENS.actionIcon.strokeWidth,
+    },
+    content: {
+      padding: a.content?.padding ?? ACCORDION_TOKENS.content.padding,
+      background: a.content?.background ?? ACCORDION_TOKENS.content.background,
+    },
+  };
+}
+
+// ReportCard tokens
+export interface ReportCardTokens {
+  headerBackground: string;
+  headerColor: string;
+  bodyBackground: string;
+  dividerColor: string;
+  bulletColor: string;
+  itemColor: string;
+  itemHoverColor: string;
+  borderRadius: string;
+  shadow: string;
+}
+
+const reportCardComp = (components as any).reportcard as Record<string, any> | undefined;
+export const REPORT_CARD_TOKENS: ReportCardTokens = {
+  headerBackground: reportCardComp?.header?.background ?? '#52760A',
+  headerColor: reportCardComp?.header?.color ?? '#ffffff',
+  bodyBackground: reportCardComp?.body?.background ?? '#ffffff',
+  dividerColor: reportCardComp?.body?.dividerColor ?? '#E5E9EB',
+  bulletColor: reportCardComp?.body?.bulletColor ?? '#D1D5DB',
+  itemColor: reportCardComp?.body?.itemColor ?? '#4B5563',
+  itemHoverColor: reportCardComp?.body?.itemHoverColor ?? '#52760A',
+  borderRadius: reportCardComp?.borderRadius ?? '8px',
+  shadow: reportCardComp?.shadow ?? '0 1px 4px rgba(0,0,0,0.08)',
+};
+
+const defaultReportCardTokens = REPORT_CARD_TOKENS;
+
+/** Build ReportCard tokens from resolved tokens (e.g. from useTokens()). Use this so tokens update when theme mode (light/dark) or brand changes. */
+export function getReportCardTokensFromResolved(resolved: ResolvedTokens): ReportCardTokens {
+  const rc = (resolved.components as any)?.reportcard as Record<string, any> | undefined;
+  if (!rc) return defaultReportCardTokens;
+  return {
+    headerBackground: rc.header?.background ?? defaultReportCardTokens.headerBackground,
+    headerColor: rc.header?.color ?? defaultReportCardTokens.headerColor,
+    bodyBackground: rc.body?.background ?? defaultReportCardTokens.bodyBackground,
+    dividerColor: rc.body?.dividerColor ?? defaultReportCardTokens.dividerColor,
+    bulletColor: rc.body?.bulletColor ?? defaultReportCardTokens.bulletColor,
+    itemColor: rc.body?.itemColor ?? defaultReportCardTokens.itemColor,
+    itemHoverColor: rc.body?.itemHoverColor ?? defaultReportCardTokens.itemHoverColor,
+    borderRadius: rc.borderRadius ?? defaultReportCardTokens.borderRadius,
+    shadow: rc.shadow ?? defaultReportCardTokens.shadow,
+  };
+}
+
+// Spacing (legacy format)
+export const spacing = {
+  xs: foundation.spacing['1'],
+  sm: foundation.spacing['2'],
+  md: foundation.spacing['3'],
+  lg: foundation.spacing['4'],
+};