/**
 * Appearance System Types
 * Week 21 V2 - Visual Element Editor
 * 
 * @since 1.5.0
 */

// ============================================================
// Field Value Types (Link/Unlink System)
// ============================================================

/**
 * Reference to a global value
 */
export interface GlobalRef {
    type: 'global';
    ref: string; // e.g., "colors.primary" or "typography.body.size"
}

/**
 * Custom value (unlinked from global)
 */
export interface CustomValue {
    type: 'custom';
    value: string;
}

/**
 * Inherit value from the default preset at the same field path.
 * Resolved server-side by the bot resolver before reaching the frontend widget.
 */
export interface DefaultRef {
    type: 'default';
}

/**
 * A field value can be linked to global, custom, or inherited from the default preset
 */
export type FieldValue = GlobalRef | CustomValue | DefaultRef;

/**
 * Helper to check if a field value is a global reference
 */
export function isGlobalRef(value: FieldValue): value is GlobalRef {
    return value?.type === 'global';
}

/**
 * Helper to check if a field value is a custom value
 */
export function isCustomValue(value: FieldValue): value is CustomValue {
    return value?.type === 'custom';
}

/**
 * Helper to check if a field value inherits from the default preset
 */
export function isDefaultRef(value: FieldValue): value is DefaultRef {
    return value?.type === 'default';
}

/**
 * Create a global reference
 * @param section - Section name (e.g., 'colors', 'typography')
 * @param key - Optional key within section (e.g., 'primary', 'fontFamily')
 */
export function createGlobalRef(section: string, key?: string): GlobalRef {
    const ref = key ? `${section}.${key}` : section;
    return { type: 'global', ref };
}

/**
 * Create a custom value
 */
export function createCustomValue(value: string): CustomValue {
    return { type: 'custom', value };
}

/**
 * Create a default reference (inherit from default preset)
 */
export function createDefaultRef(): DefaultRef {
    return { type: 'default' };
}

/**
 * Recursively convert all non-color FieldValue entries in a settings object
 * to { type: 'default' } for initializing new non-default presets.
 * Color global refs (colors.*) are preserved since they still use global linking.
 */
export function toDefaultRefSettings<T>(settings: T): T {
    if (settings === null || settings === undefined) return settings;
    if (typeof settings !== 'object') return settings;
    if (Array.isArray(settings)) return settings.map(item => toDefaultRefSettings(item)) as T;

    const obj = settings as Record<string, any>;
    if (obj.type === 'custom') return createDefaultRef() as T;
    if (obj.type === 'global') {
        if (typeof obj.ref === 'string' && (obj.ref.startsWith('colors.') || obj.ref.startsWith('typography.'))) {
            return settings;
        }
        return createDefaultRef() as T;
    }
    if (obj.type === 'default') return settings;

    const result: Record<string, any> = {};
    for (const key of Object.keys(obj)) {
        result[key] = toDefaultRefSettings(obj[key]);
    }
    return result as T;
}

// ============================================================
// Shared UI-safe enums/unions (must live in types/*, not components)
// ============================================================

/**
 * Header avatar/icon picker options (Lucide icon names).
 * Curated set of ~150 common UI/action/navigation/commerce icons.
 * Kept in `types/*` so UI components can share the union without circular deps.
 */
export const HEADER_AVATAR_ICON_OPTIONS = [
    // === Bots & AI ===
    'bot',
    'sparkles',
    'wand-2',
    'brain',
    'cpu',
    
    // === Communication ===
    'message-circle',
    'message-square',
    'messages-square',
    'mail',
    'mail-open',
    'inbox',
    'send',
    'at-sign',
    'phone',
    'phone-call',
    'phone-incoming',
    'phone-outgoing',
    'phone-off',
    'headphones',
    'mic',
    'mic-off',
    'volume-2',
    'volume-x',
    
    // === Users & People ===
    'user',
    'users',
    'user-check',
    'user-plus',
    'user-minus',
    'user-x',
    'user-cog',
    'contact',
    'smile',
    'frown',
    'meh',
    
    // === Actions & Controls ===
    'play',
    'pause',
    'stop-circle',
    'skip-forward',
    'skip-back',
    'rewind',
    'fast-forward',
    'rotate-ccw',
    'rotate-cw',
    'refresh-cw',
    'refresh-ccw',
    'repeat',
    'repeat-1',
    'shuffle',
    'check',
    'check-circle',
    'check-square',
    'x',
    'x-circle',
    'x-square',
    'plus',
    'plus-circle',
    'plus-square',
    'minus',
    'minus-circle',
    'minus-square',
    'edit',
    'edit-2',
    'edit-3',
    'trash',
    'trash-2',
    'copy',
    'clipboard',
    'clipboard-check',
    'download',
    'upload',
    'share',
    'share-2',
    'external-link',
    'link',
    'link-2',
    'unlink',
    
    // === Navigation ===
    'home',
    'menu',
    'more-horizontal',
    'more-vertical',
    'chevron-up',
    'chevron-down',
    'chevron-left',
    'chevron-right',
    'arrow-up',
    'arrow-down',
    'arrow-left',
    'arrow-right',
    'arrow-up-right',
    'arrow-down-left',
    'corner-up-left',
    'corner-up-right',
    'move',
    'maximize',
    'maximize-2',
    'minimize',
    'minimize-2',
    'expand',
    'shrink',
    
    // === Media & Files ===
    'image',
    'video',
    'camera',
    'film',
    'music',
    'file',
    'file-text',
    'file-plus',
    'file-minus',
    'folder',
    'folder-open',
    'folder-plus',
    'archive',
    'paperclip',
    
    // === Interface ===
    'monitor',
    'smartphone',
    'tablet',
    'laptop',
    'tv',
    'eye',
    'eye-off',
    'search',
    'zoom-in',
    'zoom-out',
    'filter',
    'sliders',
    'settings',
    'wrench',
    'help-circle',
    'info',
    'alert-circle',
    'alert-triangle',
    'bell',
    'bell-off',
    'bell-ring',
    
    // === Time & Calendar ===
    'calendar',
    'calendar-days',
    'clock',
    'timer',
    'hourglass',
    'alarm-clock',
    'watch',
    
    // === Location & Travel ===
    'map',
    'map-pin',
    'navigation',
    'compass',
    'globe',
    'plane',
    'car',
    'truck',
    'building',
    'building-2',
    
    // === Commerce ===
    'shopping-bag',
    'shopping-cart',
    'credit-card',
    'wallet',
    'banknote',
    'receipt',
    'tag',
    'tags',
    'percent',
    'gift',
    'package',
    'box',
    'briefcase',
    
    // === Social & Ratings ===
    'heart',
    'heart-off',
    'thumbs-up',
    'thumbs-down',
    'star',
    'star-off',
    'award',
    'trophy',
    'medal',
    'flag',
    'bookmark',
    'bookmark-plus',
    
    // === Security ===
    'lock',
    'unlock',
    'key',
    'shield',
    'shield-check',
    'shield-off',
    'fingerprint',
    'scan',
    
    // === Lifestyle ===
    'coffee',
    'utensils',
    'wine',
    'pizza',
    'apple',
    'sun',
    'moon',
    'cloud',
    'umbrella',
    
    // === Misc ===
    'zap',
    'battery',
    'battery-charging',
    'wifi',
    'bluetooth',
    'power',
    'power-off',
    'plug',
    'loader',
    'loader-2',
    'circle',
    'square',
    'triangle',
    'hexagon',
    'octagon',
    'hash',
    'type',
    'bold',
    'italic',
    'underline',
    'list',
    'list-ordered',
    'align-left',
    'align-center',
    'align-right',
    'code',
    'code-2',
    'terminal',
    'database',
    'server',
    'hard-drive',
    'save',
    'printer',
    'qr-code',
    'grip',
    'layers',
    'layout',
    'grid',
    'columns',
    'rows',
    'sidebar',
    'panel-left',
    'panel-right',
] as const;

export type HeaderAvatarIconName = (typeof HEADER_AVATAR_ICON_OPTIONS)[number];

/**
 * Chat bubble icon names.
 * - Supports the full Lucide list (HeaderAvatarIconName)
 * - Keeps compatibility with legacy bubble icon keys used in older presets
 */
export type ChatBubbleIconName =
    | HeaderAvatarIconName
    | 'robot'
    | 'chat'
    | 'message'
    | 'sparkles'
    | 'headphones'
    | 'custom';

/**
 * Wide icon list for the chat bubble icon picker.
 * We reuse the same safe Lucide set as the header avatar picker.
 */
export const CHAT_BUBBLE_ICON_OPTIONS = HEADER_AVATAR_ICON_OPTIONS;

// ============================================================
// Global Values Types
// ============================================================

/**
 * Color palette entry with stable ID for reference integrity
 */
export interface ColorEntry {
    id: string;
    name: string;
    value: string;
}

/**
 * Generate a stable unique ID for custom colors (e.g., 'c_abc1234')
 */
export function generateColorId(): string {
    return 'c_' + Math.random().toString(36).substring(2, 9);
}

/**
 * Built-in colors that are always present
 */
export interface BuiltInColors {
    primary: string;
    secondary: string;
    accent: string;
    text: string;
    textSecondary: string;
    textLight: string;
    textMuted: string;
    textSubtle: string;
    background: string;
    backgroundDark: string;
    surface: string;
    surfaceSubtle: string;
    border: string;
    success: string;
    successLight: string;
    warning: string;
    error: string;
    // Extended colors for global linking
    transparent: string;
    overlayLight: string;
    borderSoft: string;
    primaryHover: string;
    primarySoft: string;
    whatsappHover: string;
}

/**
 * Typography scale entry - matches Elementor's typography controls
 */
export interface TypographyEntry {
    fontFamily?: string;      // סוג - Font family
    fontSize: string;         // גודל - Size with unit (px, em, rem)
    fontWeight: string;       // משקל - Weight (100-900)
    textTransform?: string;   // טרנספורמציה - Transform (none, uppercase, lowercase, capitalize)
    textAlign?: string;       // יישור - Align (start, end, left, right, center, justify)
    fontStyle?: string;       // סגנון - Style (normal, italic)
    textDecoration?: string;  // עיטור - Decoration (none, underline, line-through, overline)
    lineHeight: string;       // גובה שורה - Line height
    letterSpacing?: string;   // ריווח אותיות - Letter spacing
    wordSpacing?: string;     // ריווח מילים - Word spacing
}

/**
 * Custom typography scale - matches Elementor's custom fonts
 */
export interface CustomTypographyScale {
    id: string;
    name: string;
    fontFamily?: string;      // סוג
    fontSize: string;         // גודל
    fontWeight: string;       // משקל
    textTransform?: string;   // טרנספורמציה
    textAlign?: string;       // יישור
    fontStyle?: string;       // סגנון
    textDecoration?: string;  // עיטור
    lineHeight: string;       // גובה שורה
    letterSpacing?: string;   // ריווח אותיות
    wordSpacing?: string;     // ריווח מילים
}

/**
 * Typography settings with 15 default scales:
 * - 3 Headings (headingLarge, headingMedium, headingSmall) - weight 600
 * - 3 Body texts (bodyLarge, body, bodySmall) - weight 400
 * - 3 Buttons (buttonLarge, button, buttonSmall) - weight 600
 * - 3 Labels (labelLarge, label, labelSmall) - weight 500
 * - 3 Inputs (inputLarge, input, inputSmall) - weight 400
 * Plus legacy scales for backwards compatibility (heading, small)
 */
export interface TypographySettings {
    fontFamily: string;
    
    // Headings (weight 600)
    headingLarge: TypographyEntry;
    headingMedium: TypographyEntry;
    headingSmall: TypographyEntry;

    /**
     * Dedicated scale for product price (Product Card → מחיר).
     * Optional for backwards compatibility with older presets/global objects.
     */
    productPrice?: TypographyEntry;
    
    // Body texts (weight 400)
    bodyLarge: TypographyEntry;
    body: TypographyEntry;
    bodySmall: TypographyEntry;
    
    // Buttons (weight 600)
    buttonLarge: TypographyEntry;
    button: TypographyEntry;
    buttonSmall: TypographyEntry;
    
    // Labels (weight 500)
    labelLarge: TypographyEntry;
    label: TypographyEntry;
    labelSmall: TypographyEntry;
    confirmationText: TypographyEntry;
    micro: TypographyEntry;
    
    // Inputs (weight 400)
    inputLarge: TypographyEntry;
    input: TypographyEntry;
    inputSmall: TypographyEntry;
    
    // Legacy (backwards compatibility)
    heading: TypographyEntry;
    small: TypographyEntry;
    
    // Custom user-defined scales
    custom?: CustomTypographyScale[];
}

/**
 * Button style settings
 */
export interface ButtonSettings {
    primary: {
        background: string;
        text: string;
        hoverBackground: string;
        hoverText?: string;
        borderRadius: string;
        padding: string;
        borderWidth?: string;
        borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
        borderColor?: string;
        hoverBorderColor?: string;
        boxShadow?: string;
        hoverBoxShadow?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
    };
    secondary: {
        background: string;
        text: string;
        hoverBackground: string;
        hoverText?: string;
        borderRadius: string;
        padding: string;
        borderWidth?: string;
        borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
        borderColor?: string;
        hoverBorderColor?: string;
        boxShadow?: string;
        hoverBoxShadow?: string;
        fontFamily?: string;
        fontSize?: string;
        fontWeight?: string;
    };
}

/**
 * Form field settings
 */
export interface FormFieldSettings {
    background: string;
    text: string;
    border: string;
    focusBorder: string;
    borderRadius: string;
    padding: string;
    placeholderColor: string;
    labelColor: string;
    errorColor: string;
}

/**
 * Effects settings
 */
export interface EffectsSettings {
    shadowNone: string;
    shadowSmall: string;
    shadowMedium: string;
    shadowLarge: string;
    /** Avatar-specific shadow token (Contact Card) */
    shadowAvatar?: string;
    shadowCard: string;
    shadowButton: string;
    shadowPlayButton: string;
    transitionDuration: string;
    transitionTiming: string;
    borderRadiusSmall: string;
    borderRadiusMedium: string;
    borderRadiusLarge: string;
    /** Fully rounded / pill / circle shapes */
    borderRadiusFull: string;
    /** 50% circle radius for avatars */
    borderRadiusCircle?: string;
    /** Pill shape (for rounded buttons) */
    borderRadiusPill: string;
    /**
     * Optional human-friendly names for effect globals.
     * This is UI metadata; the actual effect values remain the canonical CSS strings above.
     */
    labels?: Partial<Record<
        | 'shadowNone'
        | 'shadowSmall'
        | 'shadowMedium'
        | 'shadowLarge'
        | 'shadowAvatar'
        | 'shadowCard'
        | 'shadowButton'
        | 'shadowPlayButton'
        | 'borderRadiusSmall'
        | 'borderRadiusMedium'
        | 'borderRadiusLarge'
        | 'borderRadiusFull'
        | 'borderRadiusCircle'
        | 'borderRadiusPill',
        string
    >>;
}

/**
 * All global values combined.
 * After the default-ref refactor, only colors and typography remain as global tokens.
 * Sizes, spacing, effects, buttons, and formFields are now set directly on the
 * default preset and inherited via { type: 'default' }.
 */
export interface PresetGlobalValues {
    colors: BuiltInColors & {
        custom: ColorEntry[];
    };
    /**
     * Optional linking metadata.
     * Allows a preset-global value to be *linked* to a system-global value (by ref),
     * while still keeping resolved string values in `colors.*` for runtime.
     */
    _links?: {
        colors?: Partial<Record<keyof BuiltInColors, string>>;
    };
    typography: TypographySettings;

    // Legacy fields — present in old presets, stripped by migration.
    // Kept as optional so old data doesn't break TypeScript at runtime.
    sizes?: Record<string, string>;
    spacing?: Record<string, string>;
    buttons?: ButtonSettings;
    formFields?: FormFieldSettings;
    effects?: EffectsSettings;
}

// ============================================================
// Element Settings Types
// ============================================================

/**
 * Element typography settings (Elementor-style)
 */
export interface ElementTypography {
    fontFamily?: FieldValue;
    fontSize?: FieldValue;
    fontWeight?: FieldValue;
    textTransform?: FieldValue;
    textAlign?: FieldValue;
    fontStyle?: FieldValue;
    textDecoration?: FieldValue;
    lineHeight?: FieldValue;
    letterSpacing?: FieldValue;
    textShadow?: FieldValue;
}

/**
 * Header element settings
 */
export interface HeaderElementSettings {
    background: FieldValue;
    text: FieldValue;
    height: FieldValue;
    padding: FieldValue;
    showCloseButton: boolean;
    showMinimizeButton: boolean;
    /** Header container border radius (top corners) */
    borderRadius?: FieldValue;
    /** Header container border style */
    borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
    /** Header container border width */
    borderWidth?: BorderWidthSettings | FieldValue;
    /** Header container border color */
    borderColor?: FieldValue;
    typography?: ElementTypography;
    /** Subtitle typography (content is not controlled here; styles only) */
    subtitleTypography?: ElementTypography;

    // Avatar/Icon wrapper styling (styles only; actual image/content comes from bot settings)
    avatarSize?: FieldValue;
    avatarBackground?: FieldValue;
    avatarBorderRadius?: FieldValue;
    /** Avatar border style (none/solid/dashed/dotted) */
    avatarBorderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
    avatarBorderWidth?: BorderWidthSettings | FieldValue;
    avatarBorderColor?: FieldValue;
    /** Icon color inside the avatar wrapper (separate from header text color) */
    avatarIconColor?: FieldValue;
    /** Size of the icon inside the avatar wrapper */
    avatarIconSize?: FieldValue;
    /** Which fallback icon to show in the avatar wrapper (styles scope; not content strings) */
    avatarIcon?: HeaderAvatarIconName;
    /** Online status indicator (dot) */
    statusIndicatorSize?: FieldValue;
    statusIndicatorBackground?: FieldValue;
    statusIndicatorBorderWidth?: FieldValue;
    statusIndicatorBorderColor?: FieldValue;

    // Header action buttons styling (Close / Reset Chat)
    actionButtonSize?: FieldValue;
    actionIconSize?: FieldValue;
    minimizeButtonStyle?: ButtonStyleSettings;
    closeButtonStyle?: ButtonStyleSettings;
    resetButtonStyle?: ButtonStyleSettings;

    /**
     * Content fields (NOT part of style system scope; values come from ChatBot settings)
     * Kept for backward compatibility / data model, but should not be exposed as style controls.
     */
    logoUrl?: string;
    title?: string;
    subtitle?: string;
}

/**
 * Chat window settings
 */
export interface ChatWindowSettings {
    width: FieldValue;
    height: FieldValue;
    background: FieldValue;
    borderRadius: FieldValue;
    /** Border style/type for the chat window container */
    borderType?: 'none' | 'solid' | 'dashed' | 'dotted';
    /** Border width for the chat window container (legacy single FieldValue or per-side object per protocol template) */
    borderWidth?: BorderWidthSettings | FieldValue;
    /** Border color for the chat window container */
    borderColor?: FieldValue;
    shadow: FieldValue;
    padding: FieldValue;
    /**
     * Messages list area padding (inside the window, around messages).
     * Stored as CSS padding shorthand string (edited via PaddingEditor outputMode="string").
     */
    messagesPadding?: FieldValue;
    /**
     * Vertical spacing between messages (gap).
     * Stored as CSS size string (e.g. "12px").
     */
    messagesGap?: FieldValue;
}

/**
 * Chat bubble settings
 */
export interface ChatBubbleSettings {
    size: FieldValue;
    background: FieldValue;
    icon: ChatBubbleIconName;
    customIconUrl?: string;
    animation: 'none' | 'pulse' | 'bounce' | 'shake' | 'glow' | 'wiggle' | 'float';
    position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
    /** Margin from viewport edges. Legacy presets stored a single FieldValue; new presets store per-side values. */
    margin: FieldValue | { top: string; right: string; bottom: string; left: string };
    /**
     * Icon styling (styles only)
     */
    iconColor?: FieldValue;
    iconSize?: FieldValue;
    /**
     * Effects
     */
    shadow?: FieldValue;
    /**
     * Border (compound controls)
     */
    borderType?: 'none' | 'solid' | 'dashed' | 'dotted';
    /** Border width can be legacy single FieldValue or per-side object (protocol template) */
    borderWidth?: BorderWidthSettings | FieldValue;
    borderColor?: FieldValue;
    borderRadius?: FieldValue;
    /**
     * Unread badge (notification pill)
     */
    unreadBadge?: ChatBubbleUnreadBadgeSettings;
    /**
     * Pulse ring animation (unread)
     */
    pulseRing?: ChatBubblePulseRingSettings;
    /**
     * Fine-tune bubble animations
     */
    animationSettings?: ChatBubbleAnimationSettings;
}

export interface ChatBubbleUnreadBadgeSettings {
    background?: FieldValue;
    textColor?: FieldValue;
    size?: FieldValue;
    minWidth?: FieldValue;
    paddingX?: FieldValue;
    offsetX?: FieldValue;
    offsetY?: FieldValue;
    borderRadius?: FieldValue;
    typography?: ElementTypography;
}

export interface ChatBubblePulseRingSettings {
    color?: FieldValue;
    scale?: FieldValue;
    opacityStart?: FieldValue;
    opacityEnd?: FieldValue;
    duration?: FieldValue;
}

export interface ChatBubbleAnimationSettings {
    pulseScale?: FieldValue;
    pulseDuration?: FieldValue;
    bounceDistance?: FieldValue;
    bounceDuration?: FieldValue;
    shakeRotation?: FieldValue;
    shakeDuration?: FieldValue;
    shakeDelay?: FieldValue;
}

/**
 * User message bubble settings
 */
export interface UserMessageSettings {
    background: FieldValue;
    text: FieldValue;
    borderRadius: FieldValue;
    padding: FieldValue;
    maxWidth: FieldValue;
    fontSize: FieldValue;
    typography?: ElementTypography;
    /** Timestamp (time label) styling */
    timestampTypography?: ElementTypography;
    timestampOpacity?: FieldValue;
    /** Optional user avatar bubble */
    showAvatar?: boolean;
    avatarSize?: FieldValue;
    avatarBackground?: FieldValue;
    avatarIconColor?: FieldValue;
    avatarIconSize?: FieldValue;
}

/**
 * Bot message bubble settings
 */
export interface BotMessageSettings {
    background: FieldValue;
    text: FieldValue;
    borderRadius: FieldValue;
    padding: FieldValue;
    maxWidth: FieldValue;
    fontSize: FieldValue;
    showAvatar: boolean;
    avatarUrl?: string;
    typography?: ElementTypography;
    /** Timestamp (time label) styling */
    timestampTypography?: ElementTypography;
    timestampOpacity?: FieldValue;
    /** Optional bot avatar bubble */
    avatarSize?: FieldValue;
    avatarBackground?: FieldValue;
    avatarIconColor?: FieldValue;
    avatarIconSize?: FieldValue;
}

/**
 * Input area settings
 */
export interface InputAreaSettings {
    background: FieldValue;
    text: FieldValue;
    placeholder: string;
    placeholderColor: FieldValue;
    border: FieldValue;
    borderWidth?: FieldValue;
    borderRadius: FieldValue;
    padding: FieldValue;
    typography?: ElementTypography;
    /** Helper text (below input) */
    helperTextColor?: FieldValue;
    helperTextTypography?: ElementTypography;
    /** Character counter (below helper) */
    counterTextColor?: FieldValue;
    counterTextTypography?: ElementTypography;
    // Legacy send button fields (kept for backward compatibility)
    sendButtonBackground: FieldValue;
    sendButtonIcon: FieldValue;
    sendButtonHoverBackground: FieldValue;
    sendButtonHoverShadow: FieldValue;
    // New comprehensive send button styling (Elementor-style)
    sendButton?: ButtonStyleSettings;
}

/**
 * Typing indicator settings
 */
export interface TypingIndicatorSettings {
    background: FieldValue;
    dotColor: FieldValue;
    dotSize: FieldValue;
    animationSpeed: FieldValue;
}

/**
 * Quick buttons/suggestions settings
 */
export interface QuickButtonsSettings {
    // Legacy fields (kept for backward compatibility)
    background: FieldValue;
    text: FieldValue;
    border: FieldValue;
    borderRadius: FieldValue;
    padding: FieldValue;
    hoverBackground: FieldValue;
    hoverText: FieldValue;
    hoverShadow: FieldValue;
    typography?: ElementTypography;
    /** Container layout (gap/padding around the buttons list) */
    gap?: FieldValue;
    containerPadding?: FieldValue;
    // New comprehensive button styling (Elementor-style)
    buttonStyle?: ButtonStyleSettings;
}

/**
 * All element settings combined
 */
export interface ElementSettings {
    header: HeaderElementSettings;
    chatWindow: ChatWindowSettings;
    chatBubble: ChatBubbleSettings;
    userMessage: UserMessageSettings;
    botMessage: BotMessageSettings;
    inputArea: InputAreaSettings;
    typingIndicator: TypingIndicatorSettings;
    /** @deprecated Quick buttons feature removed - kept for backward compat with stored data */
    quickButtons?: QuickButtonsSettings;
}

// ============================================================
// Preset Types
// ============================================================

/**
 * Full appearance preset with all data
 */
export interface AppearancePreset {
    id: number;
    name: string;
    slug: string;
    description?: string;
    is_default: boolean;
    is_system: boolean;
    
    // Legacy flat fields (backward compatibility)
    primary_color: string;
    secondary_color: string;
    background_color: string;
    header_background: string;
    header_text_color: string;
    user_message_bg: string;
    user_message_text: string;
    bot_message_bg: string;
    bot_message_text: string;
    input_bg: string;
    input_text: string;
    input_border: string;
    button_bg: string;
    button_text: string;
    button_hover_bg: string;
    link_color: string;
    font_family: string;
    font_size_base: string;
    font_size_header: string;
    font_weight_normal: string;
    font_weight_bold: string;
    line_height: string;
    letter_spacing: string;
    bubble_size: string;
    bubble_icon: string;
    bubble_custom_icon?: string;
    bubble_animation: string;
    window_width: string;
    window_height: string;
    window_border_radius: string;
    window_shadow: string;
    custom_css?: string;
    
    // New structured fields (Week 21 V2)
    global_values: PresetGlobalValues | null;
    element_settings: ElementSettings | null;
    
    // Timestamps
    created_at: string;
    updated_at: string;
}

// ============================================================
// Default Values
// ============================================================

/**
 * Default global values for a new preset
 */
export const DEFAULT_GLOBAL_VALUES: PresetGlobalValues = {
    colors: {
        primary: '#3BC2D0',
        secondary: '#E32774',
        accent: '#6366F1',
        // Preset 18 source-of-truth
        text: '#414082',
        textSecondary: '#374151',
        textLight: '#FFFFFF',
        textMuted: '#6B7280',
        textSubtle: '#9CA3AF',
        background: '#FFFFFF',
        backgroundDark: '#1F2937',
        surface: '#F9FAFB',
        surfaceSubtle: '#F3F4F6',
        border: '#E5E7EB',
        success: '#10B981',
        successLight: 'rgba(16,185,129,0.12)',
        warning: '#F59E0B',
        error: '#EF4444',
        // Extended colors for global linking
        transparent: 'transparent',
        overlayLight: 'rgba(255,255,255,0.2)',
        borderSoft: 'rgba(0,0,0,0.05)',
        primaryHover: '#2BA8B5',
        primarySoft: '#3BC2D020',
        whatsappHover: '#20BD5A',
        custom: [
            { id: 'c_online', name: 'Online indicator', value: '#4ADE80' },
        ],
    },
    typography: {
        // Preset 18 source-of-truth
        fontFamily: 'Heebo',
        
        // === HEADINGS (weight 600) ===
        headingLarge: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '22px',
            fontWeight: '600',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        headingMedium: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '18px',
            fontWeight: '600',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        headingSmall: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '16px',
            fontWeight: '600',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },

        // === PRODUCT PRICE (weight 600) ===
        productPrice: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '24px',
            fontWeight: '600',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        
        // === BODY TEXTS (weight 400) ===
        bodyLarge: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '16px',
            fontWeight: '400',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        body: {
            fontFamily: 'Heebo',
            fontSize: '14px',
            fontWeight: '400',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        bodySmall: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '12px',
            fontWeight: '400',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        
        // === BUTTONS (weight 600) ===
        buttonLarge: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '16px',
            fontWeight: '600',
            textTransform: 'none',
            textAlign: 'center',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        button: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '14px',
            fontWeight: '600',
            textTransform: 'none',
            textAlign: 'center',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        buttonSmall: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '12px',
            fontWeight: '600',
            textTransform: 'none',
            textAlign: 'center',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        
        // === LABELS (weight 500) ===
        labelLarge: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '14px',
            fontWeight: '500',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        label: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '12px',
            fontWeight: '500',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        labelSmall: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '10px',
            fontWeight: '500',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },

        // === MICRO + CONFIRMATION (weight 600) ===
        confirmationText: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '11px',
            fontWeight: '600',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        micro: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '9px',
            fontWeight: '600',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        
        // === INPUTS (weight 400) ===
        inputLarge: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '16px',
            fontWeight: '400',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        input: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '14px',
            fontWeight: '400',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        inputSmall: {
            fontFamily: '"Open Sans", sans-serif',
            fontSize: '12px',
            fontWeight: '400',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        
        // === LEGACY (backwards compatibility) ===
        heading: {
            fontFamily: 'Heebo',
            fontSize: '18px',
            fontWeight: '600',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        small: {
            fontFamily: 'Heebo',
            fontSize: '12px',
            fontWeight: '400',
            textTransform: 'none',
            textAlign: 'start',
            fontStyle: 'normal',
            textDecoration: 'none',
            lineHeight: '1.1',
            letterSpacing: '0px',
            wordSpacing: '0px',
        },
        custom: [],
    },
};

/**
 * Default element settings for a new preset
 */
export const DEFAULT_ELEMENT_SETTINGS: ElementSettings = {
    header: {
        background: createGlobalRef('colors.primary'),
        text: createGlobalRef('colors.textLight'),
        // Header container dimensions (globally linked for consistency)
        height: createCustomValue('60px'),
        // Padding uses custom shorthand (preset 18 source of truth: '10px 15px')
        padding: createCustomValue('10px 15px'),
        showCloseButton: true,
        showMinimizeButton: false,
        // Header border compound (style + width + color + radius)
        borderRadius: createCustomValue('16px 16px 16px 16px'),
        borderStyle: 'none',
        // borderWidth uses FieldValue (not per-side) matching preset 18
        borderWidth: createCustomValue('0px'),
        borderColor: createGlobalRef('colors.transparent'),
        title: 'BoostBot',
        subtitle: 'Online',
        // Default typography for header title (global preset-aligned)
        // Workflow rule: every controller must have an explicit stored default value.
        // Typography scale linking: ALL TypographySettings fields must be linked when using a scale.
        typography: {
            fontFamily: createGlobalRef('typography.fontFamily'),
            fontSize: createGlobalRef('typography.headingMedium.fontSize'),
            fontWeight: createGlobalRef('typography.headingMedium.fontWeight'),
            lineHeight: createGlobalRef('typography.headingMedium.lineHeight'),
            textTransform: createGlobalRef('typography.headingMedium.textTransform'),
            fontStyle: createGlobalRef('typography.headingMedium.fontStyle'),
            textDecoration: createGlobalRef('typography.headingMedium.textDecoration'),
            letterSpacing: createGlobalRef('typography.headingMedium.letterSpacing'),
            // textAlign and textShadow are not part of standard typography scales - use custom defaults
            textAlign: createCustomValue('start'),
            textShadow: createCustomValue('none'),
        },
        // Subtitle typography (linked to typography.labelLarge scale)
        // Workflow rule: every controller must have an explicit stored default value.
        // Typography scale linking: ALL TypographySettings fields must be linked when using a scale.
        subtitleTypography: {
            fontFamily: createGlobalRef('typography.fontFamily'),
            fontSize: createGlobalRef('typography.labelLarge.fontSize'),
            fontWeight: createGlobalRef('typography.labelLarge.fontWeight'),
            lineHeight: createGlobalRef('typography.labelLarge.lineHeight'),
            textTransform: createGlobalRef('typography.labelLarge.textTransform'),
            fontStyle: createGlobalRef('typography.labelLarge.fontStyle'),
            textDecoration: createGlobalRef('typography.labelLarge.textDecoration'),
            letterSpacing: createGlobalRef('typography.labelLarge.letterSpacing'),
            // textAlign and textShadow are not part of standard typography scales - use custom defaults
            textAlign: createCustomValue('start'),
            textShadow: createCustomValue('none'),
        },
        // Avatar wrapper sizing and appearance (global-linked for consistency)
        avatarSize: createCustomValue('40px'),
        avatarBackground: createGlobalRef('colors.overlayLight'),
        avatarBorderRadius: createCustomValue('9999px 9999px 9999px 9999px'),
        avatarBorderStyle: 'solid',
        avatarBorderWidth: { top: '2px', right: '2px', bottom: '2px', left: '2px' },
        avatarBorderColor: createGlobalRef('colors.overlayLight'),
        avatarIconColor: createGlobalRef('colors.textLight'),
        avatarIconSize: createCustomValue('18px'),
        avatarIcon: 'bot',
        // Online status indicator (dot)
        statusIndicatorSize: createCustomValue('12px'),
        statusIndicatorBackground: createGlobalRef('colors.custom.0.value'),
        statusIndicatorBorderWidth: createCustomValue('2px'),
        statusIndicatorBorderColor: createGlobalRef('colors.textLight'),
        // Header action buttons (Reset / Close)
        actionButtonSize: createCustomValue('36px'),
        // actionIconSize is legacy fallback only; per-button icon sizes are in ButtonStyleSettings.icon.size
        actionIconSize: createCustomValue('18px'),
        minimizeButtonStyle: (() => {
            const base = createDefaultButtonStyle('ghost');
            return {
                ...base,
                textColor: createGlobalRef('colors.primary'),
                backgroundColor: createGlobalRef('colors.background'),
                borderType: 'none',
                borderWidth: { top: '0px', right: '0px', bottom: '0px', left: '0px' },
                borderColor: createGlobalRef('colors.transparent'),
                borderRadius: createCustomValue('9999px 9999px 9999px 9999px'),
                boxShadow: createCustomValue('none'),
                padding: { top: '8px', right: '8px', bottom: '8px', left: '8px' },
                // Icon settings for minimize button (minus icon by default)
                icon: {
                    icon: 'minus',
                    position: 'only' as const,
                    size: '20px',
                    color: createGlobalRef('colors.primary'),
                    spacing: '0px',
                    hoverColor: createGlobalRef('colors.textLight'),
                },
                hover: {
                    ...base.hover,
                    textColor: createGlobalRef('colors.textLight'),
                    backgroundColor: createGlobalRef('colors.secondary'),
                    borderColor: createGlobalRef('colors.transparent'),
                    boxShadow: createCustomValue('none'),
                },
                transitionDuration: '150ms',
            };
        })(),
        closeButtonStyle: (() => {
            const base = createDefaultButtonStyle('ghost');
            return {
                ...base,
                textColor: createGlobalRef('colors.primary'),
                backgroundColor: createGlobalRef('colors.background'),
                borderType: 'none',
                borderWidth: { top: '0px', right: '0px', bottom: '0px', left: '0px' },
                borderColor: createGlobalRef('colors.transparent'),
                borderRadius: createCustomValue('9999px 9999px 9999px 9999px'),
                boxShadow: createCustomValue('none'),
                padding: { top: '8px', right: '8px', bottom: '8px', left: '8px' },
                // Icon settings for close button (X icon by default)
                icon: {
                    icon: 'x',
                    position: 'only' as const,
                    size: '20px',
                    color: createGlobalRef('colors.primary'),
                    spacing: '0px',
                    hoverColor: createGlobalRef('colors.textLight'),
                },
                hover: {
                    ...base.hover,
                    textColor: createGlobalRef('colors.textLight'),
                    backgroundColor: createGlobalRef('colors.secondary'),
                    borderColor: createGlobalRef('colors.transparent'),
                    boxShadow: createCustomValue('none'),
                },
                transitionDuration: '150ms',
            };
        })(),
        resetButtonStyle: (() => {
            const base = createDefaultButtonStyle('ghost');
            return {
                ...base,
                textColor: createGlobalRef('colors.primary'),
                backgroundColor: createGlobalRef('colors.background'),
                borderType: 'none',
                borderWidth: { top: '0px', right: '0px', bottom: '0px', left: '0px' },
                borderColor: createGlobalRef('colors.transparent'),
                borderRadius: createCustomValue('9999px 9999px 9999px 9999px'),
                boxShadow: createCustomValue('none'),
                padding: { top: '8px', right: '8px', bottom: '8px', left: '8px' },
                // Icon settings for reset button (rotate-ccw icon by default)
                icon: {
                    icon: 'rotate-ccw',
                    position: 'only' as const,
                    size: '20px',
                    color: createGlobalRef('colors.primary'),
                    spacing: '0px',
                    hoverColor: createGlobalRef('colors.textLight'),
                },
                hover: {
                    ...base.hover,
                    textColor: createGlobalRef('colors.textLight'),
                    backgroundColor: createGlobalRef('colors.secondary'),
                    borderColor: createGlobalRef('colors.transparent'),
                    boxShadow: createCustomValue('none'),
                },
                transitionDuration: '150ms',
            };
        })(),
    },
    chatWindow: {
        width: createCustomValue('380px'),
        height: createCustomValue('600px'),
        background: createGlobalRef('colors.background'),
        borderRadius: createCustomValue('16px 16px 16px 16px'),
        // Match preset 18 default border: 1px solid colors.borderSoft
        borderType: 'solid',
        borderWidth: createCustomValue('1px'),
        borderColor: createGlobalRef('colors.borderSoft'),
        shadow: createCustomValue('4px 10px 15px -3px rgba(0, 0, 0, 0.2)'),
        padding: createCustomValue('0px'),
        // Match preset 18 defaults: containerNormal (12px) and spacing.md (12px)
        messagesPadding: createCustomValue('12px'),
        messagesGap: createCustomValue('12px'),
    },
    chatBubble: {
        size: createCustomValue('45px'),
        background: createGlobalRef('colors.primary'),
        // Match preset 18: sparkles icon, no animation, right-aligned offsets
        icon: 'sparkles',
        animation: 'none',
        position: 'bottom-right',
        margin: { top: '20px', right: '75px', bottom: '15px', left: '20px' },
        // Icon styles
        iconColor: createGlobalRef('colors.textLight'),
        iconSize: createCustomValue('28px'),
        // Effects / borders
        shadow: createCustomValue('4px 10px 15px -3px rgba(0, 0, 0, 0.2)'),
        borderType: 'solid',
        borderWidth: createCustomValue('2px'),
        borderColor: createGlobalRef('colors.primary'),
        borderRadius: createCustomValue('9999px 9999px 9999px 9999px'),
        // Unread badge
        unreadBadge: {
            background: createGlobalRef('colors.error'),
            textColor: createGlobalRef('colors.textLight'),
            size: createCustomValue('18px'),
            minWidth: createCustomValue('18px'),
            paddingX: createCustomValue('4px'),
            offsetX: createCustomValue('-4px'),
            offsetY: createCustomValue('-4px'),
            borderRadius: createCustomValue('9999px 9999px 9999px 9999px'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.label.fontSize'),
                fontWeight: createGlobalRef('typography.label.fontWeight'),
                lineHeight: createGlobalRef('typography.label.lineHeight'),
                textTransform: createGlobalRef('typography.label.textTransform'),
                fontStyle: createGlobalRef('typography.label.fontStyle'),
                textDecoration: createGlobalRef('typography.label.textDecoration'),
                letterSpacing: createGlobalRef('typography.label.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        // Pulse ring animation (unread)
        pulseRing: {
            color: createGlobalRef('colors.primary'),
            scale: createCustomValue('1.2'),
            opacityStart: createCustomValue('0.5'),
            opacityEnd: createCustomValue('0'),
            duration: createCustomValue('1.5s'),
        },
        // Animation fine-tuning (applies to bubble animation variants)
        animationSettings: {
            pulseScale: createCustomValue('1.05'),
            pulseDuration: createCustomValue('2s'),
            bounceDistance: createCustomValue('8px'),
            bounceDuration: createCustomValue('0.6s'),
            shakeRotation: createCustomValue('3'),
            shakeDuration: createCustomValue('0.5s'),
            shakeDelay: createCustomValue('3s'),
        },
    },
    userMessage: {
        background: createGlobalRef('colors.primary'),
        text: createGlobalRef('colors.textLight'),
        borderRadius: createCustomValue('8px 8px 8px 8px'),
        padding: createCustomValue('8px 16px'),
        maxWidth: createCustomValue('80%'),
        fontSize: createGlobalRef('typography.body.fontSize'),
        typography: {
            fontFamily: createGlobalRef('typography.fontFamily'),
            fontSize: createGlobalRef('typography.custom.31.fontSize'),
            fontWeight: createGlobalRef('typography.custom.31.fontWeight'),
            lineHeight: createGlobalRef('typography.custom.31.lineHeight'),
            textTransform: createCustomValue('none'),
            fontStyle: createCustomValue('italic'),
            textDecoration: createCustomValue('none'),
            letterSpacing: createCustomValue('0px'),
            textAlign: createCustomValue('start'),
            textShadow: createCustomValue('1px 1px 2px rgba(0,0,0,0.3)'),
        },
        timestampTypography: {
            fontFamily: createGlobalRef('typography.fontFamily'),
            fontSize: createCustomValue('10px'),
            fontWeight: createCustomValue('400'),
            lineHeight: createCustomValue('1'),
            textTransform: createCustomValue('none'),
            fontStyle: createCustomValue('normal'),
            textDecoration: createCustomValue('none'),
            letterSpacing: createCustomValue('0px'),
            textAlign: createCustomValue('start'),
            textShadow: createCustomValue('none'),
        },
        timestampOpacity: createCustomValue('0.6'),
        showAvatar: true,
        avatarSize: createCustomValue('32px'),
        avatarBackground: createGlobalRef('colors.border'),
        avatarIconColor: createCustomValue('#4B5563'),
        avatarIconSize: createCustomValue('16px'),
    },
    botMessage: {
        background: createGlobalRef('colors.surface'),
        text: createGlobalRef('colors.text'),
        borderRadius: createCustomValue('8px 8px 8px 8px'),
        padding: createCustomValue('8px 16px'),
        maxWidth: createCustomValue('80%'),
        fontSize: createGlobalRef('typography.body.fontSize'),
        showAvatar: true,
        typography: {
            fontFamily: createGlobalRef('typography.fontFamily'),
            fontSize: createGlobalRef('typography.custom.31.fontSize'),
            fontWeight: createGlobalRef('typography.custom.31.fontWeight'),
            lineHeight: createGlobalRef('typography.custom.31.lineHeight'),
            textTransform: createGlobalRef('typography.custom.31.textTransform'),
            fontStyle: createGlobalRef('typography.custom.31.fontStyle'),
            textDecoration: createGlobalRef('typography.custom.31.textDecoration'),
            letterSpacing: createGlobalRef('typography.custom.31.letterSpacing'),
            textAlign: createCustomValue('start'),
            textShadow: createCustomValue('none'),
        },
        timestampTypography: {
            fontFamily: createGlobalRef('typography.fontFamily'),
            fontSize: createCustomValue('10px'),
            fontWeight: createCustomValue('400'),
            lineHeight: createCustomValue('1'),
            textTransform: createCustomValue('none'),
            fontStyle: createCustomValue('normal'),
            textDecoration: createCustomValue('none'),
            letterSpacing: createCustomValue('0px'),
            textAlign: createCustomValue('start'),
            textShadow: createCustomValue('none'),
        },
        timestampOpacity: createCustomValue('0.6'),
        avatarSize: createCustomValue('32px'),
        avatarBackground: createGlobalRef('colors.primarySoft'),
        avatarIconColor: createGlobalRef('colors.primary'),
        avatarIconSize: createCustomValue('16px'),
    },
    inputArea: {
        background: createGlobalRef('colors.background'),
        text: createGlobalRef('colors.text'),
        placeholder: 'Type a message...',
        placeholderColor: createGlobalRef('colors.textMuted'),
        border: createGlobalRef('colors.border'),
        borderWidth: createCustomValue('1px'),
        borderRadius: createCustomValue('8px 8px 8px 8px'),
        padding: createCustomValue('12px 16px'),
        typography: {
            fontFamily: createGlobalRef('typography.input.fontFamily'),
            fontSize: createGlobalRef('typography.input.fontSize'),
            fontWeight: createGlobalRef('typography.input.fontWeight'),
            lineHeight: createGlobalRef('typography.input.lineHeight'),
            textTransform: createGlobalRef('typography.input.textTransform'),
            fontStyle: createGlobalRef('typography.input.fontStyle'),
            textDecoration: createGlobalRef('typography.input.textDecoration'),
            letterSpacing: createGlobalRef('typography.input.letterSpacing'),
            textAlign: createCustomValue('start'),
            textShadow: createCustomValue('none'),
        },
        helperTextColor: createGlobalRef('colors.textSubtle'),
        helperTextTypography: {
            fontFamily: createGlobalRef('typography.fontFamily'),
            fontSize: createCustomValue('10px'),
            fontWeight: createCustomValue('400'),
            lineHeight: createCustomValue('1'),
            textTransform: createCustomValue('none'),
            fontStyle: createCustomValue('normal'),
            textDecoration: createCustomValue('none'),
            letterSpacing: createCustomValue('0px'),
            textAlign: createCustomValue('center'),
            textShadow: createCustomValue('none'),
        },
        counterTextColor: createGlobalRef('colors.textSubtle'),
        counterTextTypography: {
            fontFamily: createGlobalRef('typography.fontFamily'),
            fontSize: createCustomValue('10px'),
            fontWeight: createCustomValue('400'),
            lineHeight: createCustomValue('1'),
            textTransform: createCustomValue('none'),
            fontStyle: createCustomValue('normal'),
            textDecoration: createCustomValue('none'),
            letterSpacing: createCustomValue('0px'),
            textAlign: createCustomValue('center'),
            textShadow: createCustomValue('none'),
        },
        // Legacy send button fields
        sendButtonBackground: createGlobalRef('colors.primary'),
        sendButtonIcon: createGlobalRef('colors.textLight'),
        sendButtonHoverBackground: createGlobalRef('colors.secondary'),
        sendButtonHoverShadow: createCustomValue('0 1px 2px rgba(0,0,0,0.05)'),
        // New comprehensive send button styling (with icon enabled)
        sendButton: createDefaultButtonStyle('primary', true),
    },
    typingIndicator: {
        background: createGlobalRef('colors.surface'),
        dotColor: createGlobalRef('colors.textMuted'),
        dotSize: createCustomValue('8px'),
        animationSpeed: createCustomValue('1.4s'),
    },
};

// ============================================================
// Button Style Types (Elementor-style comprehensive button controls)
// ============================================================

/**
 * Per-side border width settings
 * Each side supports different units (px, em, rem, %, etc.)
 */
export interface BorderWidthSettings {
    top: string;
    right: string;
    bottom: string;
    left: string;
}

/**
 * Per-corner border radius settings
 */
export interface BorderRadiusSettings {
    topLeft: string;
    topRight: string;
    bottomRight: string;
    bottomLeft: string;
}

/**
 * Per-side padding settings
 */
export interface PaddingSettings {
    top: string;
    right: string;
    bottom: string;
    left: string;
}

/**
 * Button icon styling settings
 * Controls icon appearance and positioning within buttons
 */
export interface ButtonIconSettings {
    /** Optional icon selection (Lucide) */
    icon?: HeaderAvatarIconName;
    position: 'before' | 'after' | 'only';
    size: string;
    color: FieldValue;
    spacing: string;
    hoverColor?: FieldValue;
}

/**
 * Complete button styling settings (Elementor-style)
 * Used for all button instances across appearance presets
 */
export interface ButtonStyleSettings {
    // Typography
    typography: {
        fontFamily: FieldValue;
        fontSize: FieldValue;
        fontWeight: FieldValue;
        textTransform: FieldValue;
        fontStyle: FieldValue;
        textDecoration: FieldValue;
        lineHeight: FieldValue;
        letterSpacing: FieldValue;
    };
    // Normal state colors
    textColor: FieldValue;
    backgroundColor: FieldValue;
    // Border settings
    borderType: 'none' | 'solid' | 'dashed' | 'dotted';
    borderWidth: BorderWidthSettings;
    borderColor: FieldValue;
    // Protocol: border-radius can be either legacy per-corner object or a FieldValue (GlobalRef/CustomValue as 4-value shorthand)
    borderRadius: BorderRadiusSettings | FieldValue;
    // Shadow
    boxShadow: FieldValue;
    // Padding
    padding: PaddingSettings;
    // Icon (optional)
    icon?: ButtonIconSettings;
    // Hover state
    hover: {
        textColor: FieldValue;
        backgroundColor: FieldValue;
        borderColor: FieldValue;
        boxShadow: FieldValue;
        iconColor?: FieldValue;
    };
    // Transition
    transitionDuration: string;
}

/**
 * Creates default button style settings
 * @param variant - The button variant type
 * @param includeIcon - Whether to include default icon settings
 */
export function createDefaultButtonStyle(
    variant: 'primary' | 'secondary' | 'ghost' = 'primary',
    includeIcon: boolean = false
): ButtonStyleSettings {
    const variants = {
        primary: {
            textColor: createGlobalRef('colors.background'),
            backgroundColor: createGlobalRef('colors.primary'),
            borderColor: createGlobalRef('colors.primary'),
            hoverBackgroundColor: createGlobalRef('colors.secondary'),
            hoverBorderColor: createGlobalRef('colors.secondary'),
        },
        secondary: {
            textColor: createGlobalRef('colors.primary'),
            backgroundColor: createGlobalRef('colors.background'),
            borderColor: createGlobalRef('colors.primary'),
            hoverBackgroundColor: createGlobalRef('colors.primary'),
            hoverBorderColor: createGlobalRef('colors.primary'),
        },
        ghost: {
            textColor: createGlobalRef('colors.text'),
            backgroundColor: createCustomValue('transparent'),
            borderColor: createCustomValue('transparent'),
            hoverBackgroundColor: createGlobalRef('colors.surface'),
            hoverBorderColor: createCustomValue('transparent'),
        },
    };

    const v = variants[variant];

    const baseStyle: ButtonStyleSettings = {
        typography: {
            fontFamily: createGlobalRef('typography.button.fontFamily'),
            fontSize: createGlobalRef('typography.button.fontSize'),
            fontWeight: createGlobalRef('typography.button.fontWeight'),
            textTransform: createCustomValue('none'),
            fontStyle: createCustomValue('normal'),
            textDecoration: createCustomValue('none'),
            lineHeight: createGlobalRef('typography.button.lineHeight'),
            letterSpacing: createCustomValue('0px'),
        },
        textColor: v.textColor,
        backgroundColor: v.backgroundColor,
        borderType: 'solid',
        borderWidth: {
            top: '1px',
            right: '1px',
            bottom: '1px',
            left: '1px',
        },
        borderColor: v.borderColor,
        borderRadius: {
            topLeft: '8px',
            topRight: '8px',
            bottomRight: '8px',
            bottomLeft: '8px',
        },
        boxShadow: createCustomValue('0 1px 2px rgba(0,0,0,0.05)'),
        padding: {
            top: '10px',
            right: '20px',
            bottom: '10px',
            left: '20px',
        },
        hover: {
            textColor: createGlobalRef('colors.background'),
            backgroundColor: v.hoverBackgroundColor,
            borderColor: v.hoverBorderColor,
            boxShadow: createCustomValue('0 4px 6px rgba(0,0,0,0.1)'),
        },
        transitionDuration: '200ms',
    };

    // Add icon settings if requested
    if (includeIcon) {
        baseStyle.icon = {
            position: 'only',
            size: '20px',
            color: createGlobalRef('colors.textLight'),
            spacing: '0px',
            hoverColor: createGlobalRef('colors.textLight'),
        };
    }

    return baseStyle;
}

// ============================================================
// Widget Settings Types (Week 21 V2 Refactor)
// These are the actual widgets that appear in chat conversations
// ============================================================

/**
 * Calendar Widget Settings
 */
export interface CalendarWidgetSettings {
    // Container
    container: {
        background: FieldValue;
        borderRadius: FieldValue;
        shadow: FieldValue;
        padding: FieldValue;
    };
    // Step Headers (כותרות השלבים - תאריך, שעה, פרטים, אישור)
    /**
     * New (preferred): single shared step-header style for ALL steps.
     * Titles are fixed (תאריך/שעה/פרטים/אישור). Only icon selection varies per step.
     */
    stepHeader?: {
        background?: FieldValue;
        textColor?: FieldValue;
        /** Inactive header background (when not active/completed) */
        inactiveBackground?: FieldValue;
        /** Inactive header text/icon color (when not active/completed) */
        inactiveTextColor?: FieldValue;
        padding?: FieldValue;
        /** Border radius for the header container (e.g. "8px 8px 0 0") */
        borderRadius?: FieldValue;
        typography?: ElementTypography;
        /** Icon next to the title (e.g. calendar/clock). */
        icon?: {
            color?: FieldValue;
            size?: FieldValue;
            gap?: FieldValue;
        };
        /** Step badge (the circle with number / check). */
        badge?: {
            size?: FieldValue;
            background?: FieldValue;
            textColor?: FieldValue;
            typography?: ElementTypography;
            iconColor?: FieldValue;
            iconSize?: FieldValue;
        };
    };
    /** Per-step icon selection (shared icon style is defined in `stepHeader.icon`). */
    stepHeaderIcons?: {
        date?: HeaderAvatarIconName;
        time?: HeaderAvatarIconName;
        form?: HeaderAvatarIconName;
        confirmation?: HeaderAvatarIconName;
    };
    stepHeaders?: {
        // שלב 1: תאריך
        dateStep?: {
            background?: FieldValue;        // רקע הכותרת (default: colors.primary)
            textColor?: FieldValue;        // צבע טקסט (default: #FFFFFF)
            padding?: FieldValue;          // ריפוד
            typography?: ElementTypography;
        };
        // שלב 2: שעה
        timeStep?: {
            background?: FieldValue;
            textColor?: FieldValue;
            padding?: FieldValue;
            typography?: ElementTypography;
        };
        // שלב 3: פרטים
        formStep?: {
            background?: FieldValue;
            textColor?: FieldValue;
            padding?: FieldValue;
            typography?: ElementTypography;
        };
        // שלב 4: אישור
        confirmationStep?: {
            background?: FieldValue;       // רקע הכותרת (default: colors.success)
            textColor?: FieldValue;
            padding?: FieldValue;
            typography?: ElementTypography;
        };
    };
    // Month Navigation
    navigation: {
        arrowColor: FieldValue;
        arrowHoverBackground: FieldValue;
        /** Chevron icon size (CSS size string, e.g. "14px") */
        arrowSize?: FieldValue;
        /** Optional hover color for the chevron icon */
        arrowHoverColor?: FieldValue;
        monthYearColor: FieldValue;
        monthYearFont: FieldValue;
        typography?: ElementTypography;
        /**
         * Bottom navigation buttons for steps (הקודם/הבא/שליחה).
         * Styled from the single Navigation tab.
         */
        buttons?: {
            gap?: FieldValue;
            buttonStyle?: ButtonStyleSettings;
        };
    };
    // Calendar Grid
    grid: {
        dayHeaderColor: FieldValue;
        dayHeaderFont: FieldValue;
        /** Background behind the day headers row */
        dayHeaderBackground?: FieldValue;
        /** Gap between calendar day cells */
        gap?: FieldValue;
        dayColor: FieldValue;
        dayHoverBackground: FieldValue;
        todayBackground: FieldValue;
        todayColor: FieldValue;
        selectedBackground: FieldValue;
        selectedColor: FieldValue;
        disabledColor: FieldValue;
        dayBorder?: FieldValue;           // גבול ליום "היום"
        dayBorderRadius?: FieldValue;     // רדיוס פינות ליום (עיגול = 50%)
        daySize?: FieldValue;             // גודל יום (width/height)
        typography?: ElementTypography;
    };
    // Time Slots
    timeSlots: {
        columns: string;
        gap: FieldValue;
        slotBackground: FieldValue;
        slotBorder: FieldValue;
        borderRadius?: FieldValue;
        padding?: FieldValue;
        slotColor: FieldValue;
        slotHoverBackground: FieldValue;
        selectedBackground: FieldValue;
        selectedColor: FieldValue;
        unavailableBackground: FieldValue;
        typography?: ElementTypography;
    };
    // Form (פרטים) - style controllers for labels/inputs/icons/errors
    form?: {
        /** Gap between fields (e.g. "8px") */
        fieldGap?: FieldValue;
        /** Gap between label and input (e.g. "2px") */
        labelGap?: FieldValue;

        // Labels
        labelColor?: FieldValue;
        labelTypography?: ElementTypography;
        requiredAsteriskColor?: FieldValue;

        // Inputs
        inputBackground?: FieldValue;
        inputTextColor?: FieldValue;
        inputPlaceholderColor?: FieldValue;
        inputBorderColor?: FieldValue;
        inputBorderColorError?: FieldValue;
        inputBorderRadius?: FieldValue;
        inputPadding?: FieldValue;
        inputTypography?: ElementTypography;

        // Field icons (inside inputs)
        iconColor?: FieldValue;
        iconSize?: FieldValue;
        iconInset?: FieldValue;

        // Errors
        errorColor?: FieldValue;
        errorTypography?: ElementTypography;
    };
    // Confirmation
    confirmation: {
        background: FieldValue;
        borderColor: FieldValue;
        /** Border radius for the confirmation details box */
        borderRadius?: FieldValue;
        /** Padding for the confirmation details box */
        padding?: FieldValue;
        titleColor: FieldValue;
        detailsColor: FieldValue;
        /** Icon wrapper background (checkmark circle) */
        iconBackground?: FieldValue;
        /** Checkmark icon color */
        iconColor?: FieldValue;
        /** Checkmark icon size */
        iconSize?: FieldValue;
        buttonBackground: FieldValue;
        buttonColor: FieldValue;
        typography?: ElementTypography;
        /** Label styling for the "אישור נשלח ל:" row shown under date+time in the confirmation box */
        sentToLabelColor?: FieldValue;
        sentToLabelTypography?: ElementTypography;
    };
}

/**
 * Gallery Widget Settings
 */
export interface GalleryWidgetSettings {
    /**
     * Header area above the grid (name + description from widget config).
     * Styles only; content comes from widget config.
     */
    header?: {
        titleColor?: FieldValue;
        titleTypography?: ElementTypography;
        /** Title icon (Lucide). */
        titleIcon?: HeaderAvatarIconName;
        /** Icon placement relative to text (semantic, RTL-safe). */
        titleIconPosition?: 'before' | 'after';
        titleIconColor?: FieldValue;
        titleIconSize?: FieldValue;
        titleGap?: FieldValue;
        descriptionColor?: FieldValue;
        descriptionTypography?: ElementTypography;
    };
    container: {
        background: FieldValue;
        borderRadius: FieldValue;
        padding: FieldValue;
        shadow?: FieldValue;
        borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
        borderWidth?: { top: string; right: string; bottom: string; left: string };
        borderColor?: FieldValue;
    };
    grid: {
        columns: string;
        gap: FieldValue;
    };
    image: {
        borderRadius: FieldValue;
        hoverScale: string;
        shadow: FieldValue;
        height?: FieldValue;
    };
    caption: {
        background: FieldValue;
        color: FieldValue;
        font: FieldValue;
        padding: FieldValue;
        typography?: ElementTypography;
        /** Hover state opacity (0-1) */
        hoverOpacity?: FieldValue;
        /** Hidden-state translateY offset (e.g., 100%) */
        hoverOffset?: FieldValue;
    };
    lightbox: {
        /** Base overlay color (linkable to global colors). Opacity is stored separately. */
        overlayBackground: FieldValue;
        /** 0-100 */
        overlayOpacity?: number;
        /** Legacy simple colors (kept for backward compatibility) */
        closeButtonColor: FieldValue;
        navigationColor: FieldValue;
        /**
         * Legacy: icon-only button templates (previously style-controlled).
         * Product decision: Lightbox close/navigation buttons are no longer style-controlled.
         * Keep fields for backward compatibility only.
         */
        closeButtonStyle?: ButtonStyleSettings;
        navigationButtonStyle?: ButtonStyleSettings;
        /** Lightbox caption (title + description) styling */
        captionTitleColor?: FieldValue;
        captionDescriptionColor?: FieldValue;
        captionTitleTypography?: ElementTypography;
        captionDescriptionTypography?: ElementTypography;
        /** Legacy combined caption typography (back-compat). Prefer title/description typography fields. */
        captionTypography?: ElementTypography;
        /**
         * Legacy: link button styling (when image had `link_url`).
         * Product decision: link button was removed; keep field for backward compatibility only.
         */
        linkButtonStyle?: ButtonStyleSettings;
    };
}

/**
 * YouTube Widget Settings
 */
export interface YouTubeWidgetSettings {
    container: {
        background: FieldValue;
        borderRadius: FieldValue;
        shadow: FieldValue;
        /** Custom-only (no global spacing bucket today). */
        padding?: FieldValue;
        /** Border settings (protocol: type + width + color + radius). */
        borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
        borderWidth?: { top: string; right: string; bottom: string; left: string };
        borderColor?: FieldValue;
    };
    thumbnail: {
        /** Base overlay color (linkable to global colors). Opacity is stored separately. */
        overlayBackground: FieldValue;
        /** 0-100 */
        overlayOpacity?: number;
        /** Hover scale for the whole thumbnail wrapper (custom-only). */
        hoverScale?: string;
        /** Play button is an icon-only button. Must use button template controls. */
        playButtonStyle?: ButtonStyleSettings;
        playButtonIcon?: HeaderAvatarIconName;
        /** Optional extra interaction: hover scale (custom-only). */
        playButtonHoverScale?: string;
    };
    title: {
        color: FieldValue;
        font: FieldValue;
        /** Padding for the text content wrapper (`.bb-youtube-info`). */
        padding?: FieldValue;
        typography?: ElementTypography;
    };
    description?: {
        color: FieldValue;
        font: FieldValue;
        typography?: ElementTypography;
    };
}

/**
 * WhatsApp Widget Settings
 */
export interface WhatsAppWidgetSettings {
    button: {
        background: FieldValue;
        color: FieldValue;
        borderRadius: FieldValue;
        padding: FieldValue;
        shadow: FieldValue;
        hoverBackground: FieldValue;
        /** Full button styling (ButtonStyleSettings) for advanced customization */
        buttonStyle?: ButtonStyleSettings;
    };
    icon: {
        size: FieldValue;
        color: FieldValue;
    };
    text: {
        color: FieldValue;
        font: FieldValue;
        typography?: ElementTypography;
    };
}

/**
 * Contact Card Widget Settings
 */
export interface ContactCardWidgetSettings {
    container: {
        background: FieldValue;
        borderRadius: FieldValue;
        shadow: FieldValue;
        padding: FieldValue;
    };
    header: {
        background: FieldValue;
        /** Optional gradient end color for header background. Legacy presets may store a raw string. */
        gradientEnd?: FieldValue | string;
    };
    avatar: {
        size: FieldValue;
        borderRadius: FieldValue;
        borderStyle: 'none' | 'solid' | 'dashed' | 'dotted';
        borderWidth: FieldValue;
        borderColor: FieldValue;
        background: FieldValue;
        iconColor: FieldValue;
        iconSize: FieldValue;
        shadow: FieldValue;
    };
    name: {
        color: FieldValue;
        typography?: ElementTypography;
    };
    title: {
        color: FieldValue;
        typography?: ElementTypography;
    };
    fields: {
        iconColor: FieldValue;
        labelColor: FieldValue;
        valueColor: FieldValue;
        labelTypography?: ElementTypography;
        valueTypography?: ElementTypography;
    };
    buttons: {
        primaryBackground: FieldValue;
        primaryColor: FieldValue;
        secondaryBackground: FieldValue;
        secondaryColor: FieldValue;
        borderRadius: FieldValue;
        /** Full button styling for primary button (ButtonStyleSettings) */
        primaryButtonStyle?: ButtonStyleSettings;
        /** Full button styling for secondary button (ButtonStyleSettings) */
        secondaryButtonStyle?: ButtonStyleSettings;
    };
}

/**
 * Product Card Widget Settings
 */
export interface ProductCardWidgetSettings {
    container: {
        background: FieldValue;
        borderRadius: FieldValue;
        shadow: FieldValue;
    };
    /**
     * Text/content layout (Product Card → טקסט)
     * Controls the inner content wrapper (below the image).
     */
    text: {
        /** Inner padding for the content area (single value, e.g. "16px") */
        padding: FieldValue;
        /** Vertical spacing between content blocks */
        gap: FieldValue;
    };
    image: {
        height: FieldValue;
        /** Optional upper bound for image height (used as `max-height`) */
        maxHeight?: FieldValue;
        /**
         * Optional aspect ratio for the image area.
         * When set (not "auto"), we prefer aspect-ratio sizing over fixed height.
         * Stored as raw string (not FieldValue) - e.g. "auto" | "1 / 1" | "16 / 9".
         */
        aspectRatio?: string;
        /**
         * Controls how the image is fit inside its box.
         * Stored as raw string (not FieldValue) - CSS `object-fit` values.
         */
        objectFit?: string;
        borderRadius: FieldValue;
    };
    badge: {
        background: FieldValue;
        color: FieldValue;
        borderRadius: FieldValue;
        typography?: ElementTypography;
    };
    badgeSale?: {
        show?: boolean;
        backgroundColor?: FieldValue;
        textColor?: FieldValue;
        borderRadius?: FieldValue;
        typography?: ElementTypography;
    };
    badgeOutOfStock?: {
        show?: boolean;
        backgroundColor?: FieldValue;
        textColor?: FieldValue;
        borderRadius?: FieldValue;
        typography?: ElementTypography;
    };
    badgeLowStock?: {
        show?: boolean;
        threshold?: number;
        backgroundColor?: FieldValue;
        textColor?: FieldValue;
        borderRadius?: FieldValue;
        typography?: ElementTypography;
    };
    title: {
        /** Canonical title text color (preferred). */
        textColor?: FieldValue;
        /** Canonical title text alignment (preferred). */
        textAlign?: 'start' | 'center' | 'end' | 'justify';
        /** Canonical spacing below the title (preferred). */
        marginBottom?: FieldValue;
        /** Legacy title text color (kept for backward compatibility). */
        color: FieldValue;
        /** Legacy title font size (kept for backward compatibility). */
        font: FieldValue;
        typography?: ElementTypography;
    };
    description: {
        color: FieldValue;
        font: FieldValue;
        typography?: ElementTypography;
    };
    price: {
        color: FieldValue;
        font: FieldValue;
        saleColor: FieldValue;
        originalColor: FieldValue;
        /**
         * Currency symbol font size (e.g. "₪").
         * Kept separate from amount typography to allow fine control.
         */
        currencySymbolSize?: FieldValue;
        typography?: ElementTypography;
    };
    rating: {
        starColor: FieldValue;
        emptyStarColor: FieldValue;
        /** Star icon size (px/rem/etc.) */
        starSize: FieldValue;
        /** Gap between stars and count text */
        gap: FieldValue;
        countColor: FieldValue;
        /** Typography for the rating count text */
        countTypography?: ElementTypography;
    };
    ratingDisplay?: {
        show?: boolean;
    };
    quantityControl?: {
        show?: boolean;
        buttonStyle?: ButtonStyleSettings;
        inputStyle?: {
            background?: FieldValue;
            color?: FieldValue;
            borderColor?: FieldValue;
            borderRadius?: FieldValue;
            width?: FieldValue;
            typography?: ElementTypography;
        };
    };
    button: {
        background: FieldValue;
        color: FieldValue;
        borderRadius: FieldValue;
        hoverBackground: FieldValue;
        typography?: ElementTypography;
        /** Full button styling (ButtonStyleSettings) for advanced customization */
        buttonStyle?: ButtonStyleSettings;
        /** Secondary/view button styling (ButtonStyleSettings) */
        viewButtonStyle?: ButtonStyleSettings;
    };
    buttonLoadingState?: {
        backgroundColor?: FieldValue;
        textColor?: FieldValue;
    };
    buttonSuccessState?: {
        backgroundColor?: FieldValue;
        textColor?: FieldValue;
    };
    buttonDisabledState?: {
        backgroundColor?: FieldValue;
        textColor?: FieldValue;
    };
}

/**
 * Cart Widget Settings
 */
export interface CartWidgetSettings {
    badge: {
        background: FieldValue;
        color: FieldValue;
        iconColor: FieldValue;
        borderRadius: FieldValue;
        minWidth: FieldValue;
        height: FieldValue;
    };
    drawer: {
        background: FieldValue;
        borderColor: FieldValue;
        borderRadius: FieldValue;
        shadow: FieldValue;
    };
    header: {
        background: FieldValue;
        color: FieldValue;
        countBackground: FieldValue;
        countColor: FieldValue;
    };
    item: {
        background: FieldValue;
        borderColor: FieldValue;
        borderRadius: FieldValue;
        titleColor: FieldValue;
        metaColor: FieldValue;
        priceColor: FieldValue;
        quantityBackground: FieldValue;
        quantityColor: FieldValue;
        removeColor: FieldValue;
    };
    summary: {
        background: FieldValue;
        borderColor: FieldValue;
        borderRadius: FieldValue;
        labelColor: FieldValue;
        valueColor: FieldValue;
    };
    actions: {
        primaryBackground: FieldValue;
        primaryColor: FieldValue;
        primaryHoverBackground: FieldValue;
        secondaryBackground: FieldValue;
        secondaryColor: FieldValue;
        secondaryBorderColor: FieldValue;
        secondaryHoverBackground: FieldValue;
        borderRadius: FieldValue;
    };
    empty: {
        iconColor: FieldValue;
        titleColor: FieldValue;
        descriptionColor: FieldValue;
    };
}

/**
 * Coupon Widget Settings
 */
export interface CouponWidgetSettings {
    container: {
        background: FieldValue;
        borderRadius: FieldValue;
        borderStyle: string;
        borderColor: FieldValue;
    };
    header: {
        background: FieldValue;
        color: FieldValue;
        font: FieldValue;
        fontSize: FieldValue;
    };
    description: {
        color: FieldValue;
        fontSize: FieldValue;
    };
    code: {
        background: FieldValue;
        color: FieldValue;
        font: FieldValue;
        fontSize: FieldValue;
        borderRadius: FieldValue;
    };
    copyButton: {
        background: FieldValue;
        color: FieldValue;
        hoverBackground: FieldValue;
        borderRadius: FieldValue;
    };
    badge: {
        background: FieldValue;
        color: FieldValue;
        borderRadius: FieldValue;
    };
    expiry: {
        color: FieldValue;
        font: FieldValue;
        fontSize: FieldValue;
    };
    removeLink: {
        color: FieldValue;
        hoverColor: FieldValue;
    };
}

/**
 * Bundle Builder Widget Settings
 */
export interface BundleBuilderWidgetSettings {
    container: {
        background: FieldValue;
        borderRadius: FieldValue;
        shadow: FieldValue;
        borderColor: FieldValue;
    };
    header: {
        background: FieldValue;
        textColor: FieldValue;
        subtitleColor: FieldValue;
        titleFontSize: FieldValue;
        titleFontWeight: FieldValue;
        subtitleFontSize: FieldValue;
    };
    productItem: {
        background: FieldValue;
        textColor: FieldValue;
        mutedTextColor: FieldValue;
        priceColor: FieldValue;
        actionColor: FieldValue;
        borderRadius: FieldValue;
        nameFontSize: FieldValue;
        priceFontSize: FieldValue;
    };
    priceDisplay: {
        originalPriceColor: FieldValue;
        discountedPriceColor: FieldValue;
        savingsBackground: FieldValue;
        savingsColor: FieldValue;
        savingsBorderRadius: FieldValue;
        couponBackground: FieldValue;
        couponColor: FieldValue;
    };
    summary: {
        background: FieldValue;
        borderColor: FieldValue;
        labelColor: FieldValue;
        totalLabelColor: FieldValue;
        linkColor: FieldValue;
    };
    /** Legacy primary button kept for backward compatibility with old presets. */
    button: {
        background: FieldValue;
        color: FieldValue;
        borderColor: FieldValue;
        borderRadius: FieldValue;
        hoverBackground: FieldValue;
        fontSize: FieldValue;
    };
    primaryButton: {
        background: FieldValue;
        color: FieldValue;
        borderColor: FieldValue;
        borderRadius: FieldValue;
        hoverBackground: FieldValue;
        fontSize: FieldValue;
    };
    secondaryButton: {
        background: FieldValue;
        color: FieldValue;
        borderColor: FieldValue;
        borderRadius: FieldValue;
        hoverBackground: FieldValue;
        fontSize: FieldValue;
    };
    swapButton: {
        background: FieldValue;
        color: FieldValue;
        borderColor: FieldValue;
        borderRadius: FieldValue;
        hoverBackground: FieldValue;
        fontSize: FieldValue;
    };
    removeButton: {
        background: FieldValue;
        color: FieldValue;
        borderColor: FieldValue;
        borderRadius: FieldValue;
        hoverBackground: FieldValue;
        fontSize: FieldValue;
    };
    states: {
        loadingBackground: FieldValue;
        loadingIconColor: FieldValue;
        emptyBackground: FieldValue;
        emptyIconColor: FieldValue;
        errorBackground: FieldValue;
        errorIconColor: FieldValue;
        successBackground: FieldValue;
        successIconColor: FieldValue;
        titleColor: FieldValue;
        descriptionColor: FieldValue;
    };
}

/**
 * Lead Form Widget Settings
 */
export interface LeadFormWidgetSettings {
    container: {
        background: FieldValue;
        borderRadius: FieldValue;
        borderColor: FieldValue;
        borderWidth: FieldValue;
        shadow: FieldValue;
        padding: FieldValue;
    };
    title: {
        textColor?: FieldValue;
        textAlign?: 'start' | 'center' | 'end' | 'justify';
        marginBottom?: FieldValue;
        color: FieldValue;
        font: FieldValue;
        typography?: ElementTypography;
    };
    field: {
        labelColor: FieldValue;
        labelFont: FieldValue;
        /** Spacing between fields */
        gap: FieldValue;
        inputBackground: FieldValue;
        inputBorder: FieldValue;
        inputFocusBorder: FieldValue;
        inputColor: FieldValue;
        inputBorderRadius: FieldValue;
        inputPadding: FieldValue;
        placeholderColor: FieldValue;
        iconColor: FieldValue;
        typography?: ElementTypography;
    };
    // Specific field type settings
    textarea: {
        minHeight: FieldValue;
        maxHeight: FieldValue;
        background: FieldValue;
        border: FieldValue;
        focusBorder: FieldValue;
        color: FieldValue;
        placeholderColor: FieldValue;
        borderRadius: FieldValue;
        padding: FieldValue;
        typography?: ElementTypography;
    };
    select: {
        background: FieldValue;
        border: FieldValue;
        focusBorder: FieldValue;
        color: FieldValue;
        borderRadius: FieldValue;
        padding: FieldValue;
        optionBackground: FieldValue;
        optionHoverBackground: FieldValue;
        optionColor: FieldValue;
        arrowColor: FieldValue;
        typography?: ElementTypography;
    };
    date: {
        background: FieldValue;
        border: FieldValue;
        focusBorder: FieldValue;
        color: FieldValue;
        borderRadius: FieldValue;
        iconColor: FieldValue;
        calendarBackground: FieldValue;
        calendarSelectedBackground: FieldValue;
        calendarSelectedColor: FieldValue;
    };
    number: {
        background: FieldValue;
        border: FieldValue;
        focusBorder: FieldValue;
        color: FieldValue;
        borderRadius: FieldValue;
        spinnerColor: FieldValue;
    };
    checkbox: {
        size: FieldValue;
        background: FieldValue;
        border: FieldValue;
        checkedBackground: FieldValue;
        checkedBorder: FieldValue;
        checkmarkColor: FieldValue;
        borderRadius: FieldValue;
        labelColor: FieldValue;
        labelFont: FieldValue;
        labelTypography?: ElementTypography;
    };
    error: {
        color: FieldValue;
        font: FieldValue;
        borderColor: FieldValue;
        typography?: ElementTypography;
    };
    submit: {
        background: FieldValue;
        color: FieldValue;
        borderRadius: FieldValue;
        hoverBackground: FieldValue;
        loadingColor: FieldValue;
        /** Spacing above the submit button */
        marginTop?: FieldValue;
        /** Full button styling (ButtonStyleSettings) for advanced customization */
        buttonStyle?: ButtonStyleSettings;
    };
    success: {
        iconColor: FieldValue;
        titleColor: FieldValue;
        messageColor: FieldValue;
    };
    // ============================================================
    // Collapse Toggle Settings (new in 1.7.0)
    // ============================================================
    collapseToggle: {
        /** Whether the toggle is enabled (stored as FieldValue for consistency) */
        enabled: FieldValue;
        background: FieldValue;
        hoverBackground: FieldValue;
        iconColor: FieldValue;
        textColor: FieldValue;
        borderRadius: FieldValue;
        padding: FieldValue;
        /** Margin below the toggle button (spacing to chips/form) */
        marginBottom: FieldValue;
        /** Text shown when form is expanded */
        expandedText: string;
        /** Text shown when form is collapsed */
        collapsedText: string;
        typography?: ElementTypography;
    };
    // ============================================================
    // Chip/Pill Settings (new in 1.7.0)
    // ============================================================
    chips: {
        background: FieldValue;
        activeBackground: FieldValue;
        filledBackground: FieldValue;
        textColor: FieldValue;
        activeTextColor: FieldValue;
        filledTextColor: FieldValue;
        borderColor: FieldValue;
        activeBorderColor: FieldValue;
        filledBorderColor: FieldValue;
        borderRadius: FieldValue;
        padding: FieldValue;
        gap: FieldValue;
        typography?: ElementTypography;
    };
}

/**
 * Survey Widget Settings
 */
export interface SurveyWidgetSettings {
    container: {
        background: FieldValue;
        borderWidth: FieldValue;
        borderColor: FieldValue;
        borderRadius: FieldValue;
        shadow: FieldValue;
        padding: FieldValue;
    };
    title: {
        color: FieldValue;
        typography?: ElementTypography;
    };
    question: {
        color: FieldValue;
        font: FieldValue;
        typography?: ElementTypography;
    };
    stars: {
        size: FieldValue;
        filledColor: FieldValue;
        emptyColor: FieldValue;
        hoverColor?: FieldValue;
        strokeColor?: FieldValue;
        strokeWidth?: FieldValue;
        gap?: FieldValue;
        hoverScale: string;
    };
    numbers: {
        background: FieldValue;
        color: FieldValue;
        selectedBackground: FieldValue;
        selectedColor: FieldValue;
        borderRadius: FieldValue;
        borderColor?: FieldValue;
        typography?: ElementTypography;
    };
    emojis: {
        size: FieldValue;
        gap: FieldValue;
        defaultColor: FieldValue;
        selectedColor: FieldValue;
        hoverScale: string;
        selectedScale: string;
        containerPadding: FieldValue;
        containerBackground: FieldValue;
        selectedBorderColor: FieldValue;
    };
    thumbs: {
        size?: FieldValue;
        gap?: FieldValue;
        upColor: FieldValue;
        downColor: FieldValue;
        selectedBackground: FieldValue;
    };
    success?: {
        iconColor?: FieldValue;
        iconSize?: FieldValue;
        textColor?: FieldValue;
        typography?: ElementTypography;
    };
    feedback: {
        background: FieldValue;
        border: FieldValue;
        color: FieldValue;
        placeholderColor: FieldValue;
        focusBorderColor: FieldValue;
        borderRadius: FieldValue;
        minHeight: FieldValue;
        padding: FieldValue;
        typography?: ElementTypography;
    };
    submit: {
        background: FieldValue;
        color: FieldValue;
        borderRadius: FieldValue;
        typography?: ElementTypography;
        /** Full button styling (ButtonStyleSettings) for advanced customization */
        buttonStyle?: ButtonStyleSettings;
    };
}

/**
 * Pricing Table Widget Settings
 */
export interface PricingTableWidgetSettings {
    container: {
        background: FieldValue;
        borderRadius: FieldValue;
        shadow: FieldValue;
    };
    header: {
        background: FieldValue;
        color: FieldValue;
        font: FieldValue;
    };
    price: {
        color: FieldValue;
        font: FieldValue;
        periodColor: FieldValue;
    };
    features: {
        color: FieldValue;
        checkColor: FieldValue;
        crossColor: FieldValue;
    };
    button: {
        background: FieldValue;
        color: FieldValue;
        borderRadius: FieldValue;
        hoverBackground: FieldValue;
    };
    popular: {
        badgeBackground: FieldValue;
        badgeColor: FieldValue;
        borderColor: FieldValue;
    };
}

/**
 * All widget settings combined
 */
export interface WidgetSettings {
    calendar: CalendarWidgetSettings;
    gallery: GalleryWidgetSettings;
    youtube: YouTubeWidgetSettings;
    whatsapp: WhatsAppWidgetSettings;
    contactCard: ContactCardWidgetSettings;
    productCard: ProductCardWidgetSettings;
    cart: CartWidgetSettings;
    coupon: CouponWidgetSettings;
    bundleBuilder: BundleBuilderWidgetSettings;
    leadForm: LeadFormWidgetSettings;
    survey: SurveyWidgetSettings;
    pricingTable: PricingTableWidgetSettings;
}

/**
 * Default widget settings
 */
export const DEFAULT_WIDGET_SETTINGS: WidgetSettings = {
    calendar: {
        container: {
            background: createGlobalRef('colors.border'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            shadow: createCustomValue('0 4px 6px rgba(0,0,0,0.1)'),
            padding: createCustomValue('12px'),
        },
        stepHeader: {
            background: createGlobalRef('colors.primary'),
            textColor: createGlobalRef('colors.textLight'),
            inactiveBackground: createGlobalRef('colors.surface'),
            inactiveTextColor: createGlobalRef('colors.textMuted'),
            padding: createCustomValue('6px 10px'),
            borderRadius: createCustomValue('8px 8px 0 0'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.label.fontSize'),
                fontWeight: createGlobalRef('typography.label.fontWeight'),
                lineHeight: createGlobalRef('typography.label.lineHeight'),
                textTransform: createGlobalRef('typography.label.textTransform'),
                fontStyle: createGlobalRef('typography.label.fontStyle'),
                textDecoration: createGlobalRef('typography.label.textDecoration'),
                letterSpacing: createGlobalRef('typography.label.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
            icon: {
                color: createGlobalRef('colors.textLight'),
                size: createCustomValue('10px'),
                gap: createCustomValue('6px'),
            },
            badge: {
                size: createCustomValue('16px'),
                background: createGlobalRef('colors.overlayLight'),
                textColor: createGlobalRef('colors.textLight'),
                typography: {
                    fontFamily: createGlobalRef('typography.fontFamily'),
                    fontSize: createCustomValue('9px'),
                    fontWeight: createCustomValue('600'),
                    lineHeight: createCustomValue('1'),
                    textTransform: createCustomValue('none'),
                    fontStyle: createCustomValue('normal'),
                    textDecoration: createCustomValue('none'),
                    letterSpacing: createCustomValue('0px'),
                    textAlign: createCustomValue('center'),
                    textShadow: createCustomValue('none'),
                },
                iconColor: createGlobalRef('colors.textLight'),
                iconSize: createCustomValue('10px'),
            },
        },
        stepHeaderIcons: {
            date: 'calendar',
            time: 'clock',
            form: 'file-text',
            confirmation: 'check',
        },
        stepHeaders: {
            dateStep: {
                background: createGlobalRef('colors.primary'),      // רקע ירוק כמו Preview
                textColor: createCustomValue('#FFFFFF'),            // טקסט לבן
                padding: createCustomValue('6px 10px'),
                typography: {
                    fontSize: createCustomValue('10px'),
                    fontWeight: createCustomValue('600'),
                },
            },
            timeStep: {
                background: createGlobalRef('colors.primary'),
                textColor: createCustomValue('#FFFFFF'),
                padding: createCustomValue('6px 10px'),
                typography: {
                    fontSize: createCustomValue('10px'),
                    fontWeight: createCustomValue('600'),
                },
            },
            formStep: {
                background: createGlobalRef('colors.primary'),
                textColor: createCustomValue('#FFFFFF'),
                padding: createCustomValue('6px 10px'),
                typography: {
                    fontSize: createCustomValue('10px'),
                    fontWeight: createCustomValue('600'),
                },
            },
            confirmationStep: {
                background: createGlobalRef('colors.success'),      // רקע כחול כמו Preview
                textColor: createCustomValue('#FFFFFF'),
                padding: createCustomValue('6px 10px'),
                typography: {
                    fontSize: createCustomValue('10px'),
                    fontWeight: createCustomValue('600'),
                },
            },
        },
        navigation: {
            arrowColor: createGlobalRef('colors.text'),
            arrowHoverBackground: createGlobalRef('colors.border'),
            arrowSize: createCustomValue('14px'),
            // Default: no visual change (hover color == normal color)
            arrowHoverColor: createGlobalRef('colors.text'),
            monthYearColor: createGlobalRef('colors.text'),
            monthYearFont: createGlobalRef('typography.labelLarge.fontSize'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.labelLarge.fontSize'),
                fontWeight: createGlobalRef('typography.labelLarge.fontWeight'),
                lineHeight: createGlobalRef('typography.labelLarge.lineHeight'),
                textTransform: createGlobalRef('typography.labelLarge.textTransform'),
                fontStyle: createGlobalRef('typography.labelLarge.fontStyle'),
                textDecoration: createGlobalRef('typography.labelLarge.textDecoration'),
                letterSpacing: createGlobalRef('typography.labelLarge.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
            buttons: {
                gap: createCustomValue('0px'),
                buttonStyle: {
                    typography: {
                        fontFamily: createGlobalRef('typography.fontFamily'),
                        fontSize: createGlobalRef('typography.buttonSmall.fontSize'),
                        fontWeight: createGlobalRef('typography.buttonSmall.fontWeight'),
                        textTransform: createCustomValue('none'),
                        fontStyle: createCustomValue('normal'),
                        textDecoration: createCustomValue('none'),
                        lineHeight: createGlobalRef('typography.buttonSmall.lineHeight'),
                        letterSpacing: createCustomValue('0px'),
                    },
                    textColor: createGlobalRef('colors.textLight'),
                    backgroundColor: createGlobalRef('colors.primary'),
                    borderType: 'solid',
                    borderWidth: {
                        top: '0px',
                        right: '0px',
                        bottom: '0px',
                        left: '0px',
                    },
                    borderColor: createGlobalRef('colors.primary'),
                    borderRadius: createCustomValue('8px 8px 8px 8px'),
                    boxShadow: createCustomValue('0px 1px 2px 0px rgba(0, 0, 0, 0.1)'),
                    padding: {
                        top: '5px',
                        right: '10px',
                        bottom: '5px',
                        left: '10px',
                    },
                    hover: {
                        textColor: createGlobalRef('colors.background'),
                        backgroundColor: createGlobalRef('colors.secondary'),
                        borderColor: createGlobalRef('colors.secondary'),
                        boxShadow: createCustomValue('0 4px 6px rgba(0,0,0,0.1)'),
                    },
                    transitionDuration: '200ms',
                    icon: {
                        position: 'only',
                        size: '20px',
                        color: createGlobalRef('colors.textLight'),
                        spacing: '0px',
                        hoverColor: createGlobalRef('colors.textLight'),
                    },
                },
            },
        },
        grid: {
            dayHeaderColor: createGlobalRef('colors.textMuted'),
            dayHeaderFont: createGlobalRef('typography.labelLarge.fontSize'),
            dayHeaderBackground: createGlobalRef('colors.surface'),
            gap: createCustomValue('0px'),
            dayColor: createGlobalRef('colors.text'),
            dayHoverBackground: createGlobalRef('colors.surface'),
            todayBackground: createGlobalRef('colors.primary'),
            todayColor: createGlobalRef('colors.textLight'),
            selectedBackground: createGlobalRef('colors.primary'),
            selectedColor: createGlobalRef('colors.textLight'),
            disabledColor: createGlobalRef('colors.text'),
            dayBorder: createCustomValue(''),                   // גבול אופציונלי ליום "היום"
            dayBorderRadius: createCustomValue('9999px 9999px 9999px 9999px'),
            daySize: createCustomValue('18px'),        // 18px (link to global size)
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.labelLarge.fontSize'),
                fontWeight: createGlobalRef('typography.labelLarge.fontWeight'),
                lineHeight: createGlobalRef('typography.labelLarge.lineHeight'),
                textTransform: createGlobalRef('typography.labelLarge.textTransform'),
                fontStyle: createGlobalRef('typography.labelLarge.fontStyle'),
                textDecoration: createGlobalRef('typography.labelLarge.textDecoration'),
                letterSpacing: createGlobalRef('typography.labelLarge.letterSpacing'),
                textAlign: createCustomValue('center'),
                textShadow: createCustomValue('none'),
            },
        },
        timeSlots: {
            columns: '2',
            gap: createCustomValue('4px'),
            slotBackground: createGlobalRef('colors.surface'),
            slotBorder: createGlobalRef('colors.border'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
            padding: createCustomValue('6px 4px'),
            slotColor: createGlobalRef('colors.text'),
            slotHoverBackground: createGlobalRef('colors.primary'),
            selectedBackground: createGlobalRef('colors.primary'),
            selectedColor: createGlobalRef('colors.textLight'),
            unavailableBackground: createGlobalRef('colors.surface'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.body.fontSize'),
                fontWeight: createGlobalRef('typography.body.fontWeight'),
                lineHeight: createCustomValue('1.5'),
                textTransform: createGlobalRef('typography.body.textTransform'),
                fontStyle: createGlobalRef('typography.body.fontStyle'),
                textDecoration: createGlobalRef('typography.body.textDecoration'),
                letterSpacing: createGlobalRef('typography.body.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        form: {
            fieldGap: createCustomValue('8px'),
            labelGap: createCustomValue('2px'),

            labelColor: createGlobalRef('colors.textMuted'),
            labelTypography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.label.fontSize'),
                fontWeight: createGlobalRef('typography.label.fontWeight'),
                lineHeight: createGlobalRef('typography.label.lineHeight'),
                textTransform: createGlobalRef('typography.label.textTransform'),
                fontStyle: createGlobalRef('typography.label.fontStyle'),
                textDecoration: createGlobalRef('typography.label.textDecoration'),
                letterSpacing: createGlobalRef('typography.label.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
            requiredAsteriskColor: createGlobalRef('colors.error'),

            inputBackground: createGlobalRef('colors.surface'),
            inputTextColor: createGlobalRef('colors.text'),
            inputPlaceholderColor: createGlobalRef('colors.textMuted'),
            inputBorderColor: createGlobalRef('colors.border'),
            inputBorderColorError: createGlobalRef('colors.error'),
            inputBorderRadius: createCustomValue('8px 8px 8px 8px'),
            inputPadding: createCustomValue('8px 12px'),
            inputTypography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.input.fontSize'),
                fontWeight: createGlobalRef('typography.input.fontWeight'),
                lineHeight: createGlobalRef('typography.input.lineHeight'),
                textTransform: createGlobalRef('typography.input.textTransform'),
                fontStyle: createGlobalRef('typography.input.fontStyle'),
                textDecoration: createGlobalRef('typography.input.textDecoration'),
                letterSpacing: createGlobalRef('typography.input.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },

            iconColor: createGlobalRef('colors.textMuted'),
            iconSize: createCustomValue('14px'),
            iconInset: createCustomValue('8px'),

            errorColor: createGlobalRef('colors.error'),
            errorTypography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.labelSmall.fontSize'),
                fontWeight: createGlobalRef('typography.labelSmall.fontWeight'),
                lineHeight: createGlobalRef('typography.labelSmall.lineHeight'),
                textTransform: createGlobalRef('typography.labelSmall.textTransform'),
                fontStyle: createGlobalRef('typography.labelSmall.fontStyle'),
                textDecoration: createGlobalRef('typography.labelSmall.textDecoration'),
                letterSpacing: createGlobalRef('typography.labelSmall.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        confirmation: {
            background: createGlobalRef('colors.surface'),
            borderColor: createGlobalRef('colors.border'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            padding: createCustomValue('8px'),
            titleColor: createGlobalRef('colors.text'),
            detailsColor: createGlobalRef('colors.text'),
            iconBackground: createGlobalRef('colors.successLight'),
            iconColor: createGlobalRef('colors.success'),
            iconSize: createCustomValue('18px'),
            buttonBackground: createGlobalRef('colors.primary'),
            buttonColor: createGlobalRef('colors.textLight'),
            typography: {
                fontFamily: createGlobalRef('typography.confirmationText.fontFamily'),
                fontSize: createGlobalRef('typography.confirmationText.fontSize'),
                fontWeight: createGlobalRef('typography.confirmationText.fontWeight'),
                lineHeight: createGlobalRef('typography.confirmationText.lineHeight'),
                textTransform: createGlobalRef('typography.confirmationText.textTransform'),
                fontStyle: createGlobalRef('typography.confirmationText.fontStyle'),
                textDecoration: createGlobalRef('typography.confirmationText.textDecoration'),
                letterSpacing: createGlobalRef('typography.confirmationText.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
            sentToLabelColor: createGlobalRef('colors.text'),
            sentToLabelTypography: {
                fontFamily: createGlobalRef('typography.micro.fontFamily'),
                fontSize: createGlobalRef('typography.micro.fontSize'),
                fontWeight: createGlobalRef('typography.micro.fontWeight'),
                lineHeight: createGlobalRef('typography.micro.lineHeight'),
                textTransform: createGlobalRef('typography.micro.textTransform'),
                fontStyle: createGlobalRef('typography.micro.fontStyle'),
                textDecoration: createGlobalRef('typography.micro.textDecoration'),
                letterSpacing: createGlobalRef('typography.micro.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
    },
    gallery: {
        header: {
            titleColor: createGlobalRef('colors.textLight'),
            titleIcon: 'image',
            titleIconPosition: 'after',
            titleTypography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.headingSmall.fontSize'),
                fontWeight: createGlobalRef('typography.headingSmall.fontWeight'),
                lineHeight: createCustomValue('1.30'),
                textTransform: createGlobalRef('typography.headingSmall.textTransform'),
                fontStyle: createGlobalRef('typography.headingSmall.fontStyle'),
                textDecoration: createGlobalRef('typography.headingSmall.textDecoration'),
                letterSpacing: createGlobalRef('typography.headingSmall.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
            titleIconColor: createGlobalRef('colors.text'),
            titleIconSize: createCustomValue('28px'),
            titleGap: createCustomValue('8px'),
            descriptionColor: createGlobalRef('colors.textLight'),
            descriptionTypography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.bodySmall.fontSize'),
                fontWeight: createGlobalRef('typography.bodySmall.fontWeight'),
                lineHeight: createCustomValue('1.40'),
                textTransform: createGlobalRef('typography.bodySmall.textTransform'),
                fontStyle: createGlobalRef('typography.bodySmall.fontStyle'),
                textDecoration: createGlobalRef('typography.bodySmall.textDecoration'),
                letterSpacing: createGlobalRef('typography.bodySmall.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        container: {
            background: createGlobalRef('colors.primary'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            padding: createCustomValue('12px'),
            shadow: createCustomValue('none'),
            borderStyle: 'none',
            borderWidth: { top: '0px', right: '0px', bottom: '0px', left: '0px' },
            borderColor: createGlobalRef('colors.transparent'),
        },
        grid: {
            columns: '2',
            gap: createCustomValue('8px'),
        },
        image: {
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            hoverScale: '1.05',
            shadow: createCustomValue('0 1px 2px rgba(0,0,0,0.05)'),
            height: createCustomValue('80px'),
        },
        caption: {
            background: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.textLight'),
            font: createGlobalRef('typography.small.fontSize'),
            padding: createCustomValue('8px'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.bodySmall.fontSize'),
                fontWeight: createGlobalRef('typography.bodySmall.fontWeight'),
                lineHeight: createGlobalRef('typography.bodySmall.lineHeight'),
                textTransform: createGlobalRef('typography.bodySmall.textTransform'),
                fontStyle: createGlobalRef('typography.bodySmall.fontStyle'),
                textDecoration: createGlobalRef('typography.bodySmall.textDecoration'),
                letterSpacing: createGlobalRef('typography.bodySmall.letterSpacing'),
                textAlign: createCustomValue('center'),
                textShadow: createCustomValue('none'),
            },
            hoverOpacity: createCustomValue('1'),
            hoverOffset: createCustomValue('100%'),
        },
        lightbox: {
            overlayBackground: createGlobalRef('colors.text'),
            overlayOpacity: 90,
            closeButtonColor: createGlobalRef('colors.textLight'),
            navigationColor: createGlobalRef('colors.textLight'),
            // closeButtonStyle retained for backward compatibility only (no longer style-controlled)
            // navigationButtonStyle retained for backward compatibility only (no longer style-controlled)
            captionTitleColor: createGlobalRef('colors.textLight'),
            captionDescriptionColor: createCustomValue('rgba(255,255,255,0.80)'),
            captionTitleTypography: {},
            captionDescriptionTypography: {},
            captionTypography: {}, // legacy (back-compat)
            // linkButtonStyle retained for backward compatibility only (link button removed from product)
        },
    },
    youtube: {
        container: {
            background: createGlobalRef('colors.primary'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            shadow: createCustomValue('2px 4px 6px -1px rgba(0, 0, 0, 0.15)'),
            padding: createCustomValue('12px'),
            borderStyle: 'solid',
            borderWidth: { top: '1px', right: '1px', bottom: '1px', left: '1px' },
            borderColor: createGlobalRef('colors.secondary'),
        },
        thumbnail: {
            overlayBackground: createGlobalRef('colors.primary'),
            overlayOpacity: 46,
            hoverScale: '1',
            playButtonStyle: {
                typography: {
                    fontFamily: createGlobalRef('typography.button.fontFamily'),
                    fontSize: createGlobalRef('typography.button.fontSize'),
                    fontWeight: createGlobalRef('typography.button.fontWeight'),
                    textTransform: createGlobalRef('typography.button.textTransform'),
                    fontStyle: createGlobalRef('typography.button.fontStyle'),
                    textDecoration: createGlobalRef('typography.button.textDecoration'),
                    lineHeight: createGlobalRef('typography.button.lineHeight'),
                    letterSpacing: createGlobalRef('typography.button.letterSpacing'),
                },
                textColor: createGlobalRef('colors.primary'),
                backgroundColor: createGlobalRef('colors.secondary'),
                borderType: 'solid',
                borderWidth: { top: '2px', right: '2px', bottom: '2px', left: '2px' },
                borderColor: createGlobalRef('colors.primary'),
                borderRadius: createCustomValue('8px 8px 8px 8px'),
                boxShadow: createCustomValue('0px 4px 6px -1px rgba(0, 0, 0, 0.15)'),
                padding: { top: '10px', right: '20px', bottom: '10px', left: '20px' },
                hover: {
                    textColor: createGlobalRef('colors.background'),
                    backgroundColor: createGlobalRef('colors.primary'),
                    borderColor: createGlobalRef('colors.transparent'),
                    boxShadow: createCustomValue('0 4px 6px rgba(0,0,0,0.1)'),
                },
                transitionDuration: '200ms',
                icon: {
                    position: 'only',
                    size: '25px',
                    color: createGlobalRef('colors.textLight'),
                    spacing: '0px',
                    hoverColor: createGlobalRef('colors.textLight'),
                },
            },
            playButtonIcon: 'play',
            playButtonHoverScale: '1.1',
        },
        title: {
            // Preset 18 source-of-truth: light text on primary container.
            color: createGlobalRef('colors.textLight'),
            font: createGlobalRef('typography.body.fontSize'),
            // Content wrapper padding for title+description area.
            padding: createCustomValue('12px'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.headingSmall.fontSize'),
                fontWeight: createGlobalRef('typography.headingSmall.fontWeight'),
                lineHeight: createGlobalRef('typography.headingSmall.lineHeight'),
                textTransform: createGlobalRef('typography.headingSmall.textTransform'),
                fontStyle: createGlobalRef('typography.headingSmall.fontStyle'),
                textDecoration: createGlobalRef('typography.headingSmall.textDecoration'),
                letterSpacing: createGlobalRef('typography.headingSmall.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        description: {
            // Preset 18 source-of-truth: light text on primary container.
            color: createGlobalRef('colors.textLight'),
            font: createGlobalRef('typography.small.fontSize'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.small.fontSize'),
                fontWeight: createGlobalRef('typography.small.fontWeight'),
                // Keep YouTube description readable (theme-safe).
                lineHeight: createCustomValue('1.40'),
                textTransform: createGlobalRef('typography.small.textTransform'),
                fontStyle: createGlobalRef('typography.small.fontStyle'),
                textDecoration: createGlobalRef('typography.small.textDecoration'),
                letterSpacing: createGlobalRef('typography.small.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
    },
    whatsapp: {
        button: {
            background: createCustomValue('#25D366'),
            color: createGlobalRef('colors.textLight'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            padding: createCustomValue('12px 24px'),
            shadow: createCustomValue('0 4px 6px rgba(0,0,0,0.1)'),
            hoverBackground: createCustomValue('#20BD5A'),
        },
        icon: {
            size: createCustomValue('28px'),
            color: createGlobalRef('colors.textLight'),
        },
        text: {
            color: createGlobalRef('colors.textLight'),
            font: createGlobalRef('typography.button.fontSize'),
        },
    },
    contactCard: {
        container: {
            background: createGlobalRef('colors.background'),
            borderRadius: createCustomValue('16px 16px 16px 16px'),
            shadow: createCustomValue('0 4px 6px rgba(0,0,0,0.1)'),
            // Use global spacing for consistent container padding
            padding: createCustomValue('12px'),
        },
        header: {
            background: createGlobalRef('colors.primary'),
            gradientEnd: createCustomValue('#2BA8B5'),
        },
        avatar: {
            size: createCustomValue('90px'),
            borderRadius: createCustomValue('50% 50% 50% 50%'),
            borderStyle: 'solid',
            borderWidth: createCustomValue('4px'),
            borderColor: createGlobalRef('colors.textLight'),
            background: createGlobalRef('colors.surface'),
            iconColor: createGlobalRef('colors.primary'),
            iconSize: createCustomValue('36px'),
            shadow: createCustomValue('0 2px 4px rgba(0,0,0,0.1)'),
        },
        name: {
            color: createGlobalRef('colors.text'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.heading.fontSize'),
                fontWeight: createGlobalRef('typography.heading.fontWeight'),
                lineHeight: createGlobalRef('typography.heading.lineHeight'),
                textTransform: createGlobalRef('typography.heading.textTransform'),
                fontStyle: createGlobalRef('typography.heading.fontStyle'),
                textDecoration: createGlobalRef('typography.heading.textDecoration'),
                letterSpacing: createGlobalRef('typography.heading.letterSpacing'),
                textAlign: createCustomValue('center'),
                textShadow: createCustomValue('none'),
            },
        },
        title: {
            color: createGlobalRef('colors.textMuted'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.body.fontSize'),
                fontWeight: createGlobalRef('typography.body.fontWeight'),
                lineHeight: createGlobalRef('typography.body.lineHeight'),
                textTransform: createGlobalRef('typography.body.textTransform'),
                fontStyle: createGlobalRef('typography.body.fontStyle'),
                textDecoration: createGlobalRef('typography.body.textDecoration'),
                letterSpacing: createGlobalRef('typography.body.letterSpacing'),
                textAlign: createCustomValue('center'),
                textShadow: createCustomValue('none'),
            },
        },
        fields: {
            iconColor: createGlobalRef('colors.primary'),
            labelColor: createGlobalRef('colors.textMuted'),
            valueColor: createGlobalRef('colors.text'),
        },
        buttons: {
            primaryBackground: createGlobalRef('colors.primary'),
            primaryColor: createGlobalRef('colors.textLight'),
            secondaryBackground: createGlobalRef('colors.surface'),
            secondaryColor: createGlobalRef('colors.primary'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            primaryButtonStyle: {
                typography: {
                    fontFamily: createGlobalRef('typography.button.fontFamily'),
                    fontSize: createGlobalRef('typography.button.fontSize'),
                    fontWeight: createGlobalRef('typography.button.fontWeight'),
                    textTransform: createGlobalRef('typography.button.textTransform'),
                    fontStyle: createGlobalRef('typography.button.fontStyle'),
                    textDecoration: createGlobalRef('typography.button.textDecoration'),
                    lineHeight: createGlobalRef('typography.button.lineHeight'),
                    letterSpacing: createGlobalRef('typography.button.letterSpacing'),
                },
                textColor: createGlobalRef('colors.textLight'),
                backgroundColor: createGlobalRef('colors.primary'),
                borderType: 'none',
                borderWidth: { top: '0px', right: '0px', bottom: '0px', left: '0px' },
                borderColor: createGlobalRef('colors.primary'),
                borderRadius: createCustomValue('8px 8px 8px 8px'),
                boxShadow: createCustomValue('none'),
                padding: { top: '10px', right: '16px', bottom: '10px', left: '16px' },
                hover: {
                    textColor: createGlobalRef('colors.textLight'),
                    backgroundColor: createGlobalRef('colors.primaryHover'),
                    borderColor: createGlobalRef('colors.primaryHover'),
                    boxShadow: createCustomValue('none'),
                    iconColor: createGlobalRef('colors.textLight'),
                },
                transitionDuration: '200ms',
                icon: {
                    icon: 'phone',
                    position: 'before',
                    size: '14px',
                    color: createGlobalRef('colors.textLight'),
                    spacing: '6px',
                    hoverColor: createGlobalRef('colors.textLight'),
                },
            },
            secondaryButtonStyle: {
                typography: {
                    fontFamily: createGlobalRef('typography.button.fontFamily'),
                    fontSize: createGlobalRef('typography.button.fontSize'),
                    fontWeight: createGlobalRef('typography.button.fontWeight'),
                    textTransform: createGlobalRef('typography.button.textTransform'),
                    fontStyle: createGlobalRef('typography.button.fontStyle'),
                    textDecoration: createGlobalRef('typography.button.textDecoration'),
                    lineHeight: createGlobalRef('typography.button.lineHeight'),
                    letterSpacing: createGlobalRef('typography.button.letterSpacing'),
                },
                textColor: createGlobalRef('colors.primary'),
                backgroundColor: createGlobalRef('colors.surface'),
                borderType: 'solid',
                borderWidth: { top: '1px', right: '1px', bottom: '1px', left: '1px' },
                borderColor: createGlobalRef('colors.primary'),
                borderRadius: createCustomValue('8px 8px 8px 8px'),
                boxShadow: createCustomValue('none'),
                padding: { top: '10px', right: '16px', bottom: '10px', left: '16px' },
                hover: {
                    textColor: createGlobalRef('colors.primary'),
                    backgroundColor: createGlobalRef('colors.primarySoft'),
                    borderColor: createGlobalRef('colors.primary'),
                    boxShadow: createCustomValue('none'),
                    iconColor: createGlobalRef('colors.primary'),
                },
                transitionDuration: '200ms',
                icon: {
                    icon: 'message-circle',
                    position: 'before',
                    size: '14px',
                    color: createGlobalRef('colors.primary'),
                    spacing: '6px',
                    hoverColor: createGlobalRef('colors.primary'),
                },
            },
        },
    },
    productCard: {
        container: {
            background: createGlobalRef('colors.background'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            shadow: createCustomValue('0 4px 6px rgba(0,0,0,0.1)'),
        },
        text: {
            // Match existing UI layout (p-4 / 16px), but keep it globally linkable
            padding: createCustomValue('16px'),
            // Default consistent vertical rhythm
            gap: createCustomValue('12px'),
        },
        image: {
            height: createCustomValue('180px'),
            maxHeight: createCustomValue('400px'),
            aspectRatio: 'auto',
            objectFit: 'cover',
            borderRadius: createCustomValue('8px 8px 8px 8px'),
        },
        badge: {
            background: createGlobalRef('colors.secondary'),
            color: createGlobalRef('colors.textLight'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
            typography: {
                fontFamily: createGlobalRef('typography.small.fontFamily'),
                fontSize: createGlobalRef('typography.small.fontSize'),
                fontWeight: createGlobalRef('typography.small.fontWeight'),
                lineHeight: createGlobalRef('typography.small.lineHeight'),
                textTransform: createCustomValue('uppercase'),
                fontStyle: createCustomValue('normal'),
                textDecoration: createCustomValue('none'),
                letterSpacing: createCustomValue('0.4px'),
                textAlign: createCustomValue('center'),
                textShadow: createCustomValue('none'),
            },
        },
        badgeSale: {
            show: true,
            backgroundColor: createGlobalRef('colors.secondary'),
            textColor: createGlobalRef('colors.textLight'),
            borderRadius: createCustomValue('9999px'),
            typography: {
                fontFamily: createGlobalRef('typography.small.fontFamily'),
                fontSize: createGlobalRef('typography.small.fontSize'),
                fontWeight: createGlobalRef('typography.small.fontWeight'),
                lineHeight: createGlobalRef('typography.small.lineHeight'),
                textTransform: createCustomValue('uppercase'),
                fontStyle: createCustomValue('normal'),
                textDecoration: createCustomValue('none'),
                letterSpacing: createCustomValue('0.4px'),
                textAlign: createCustomValue('center'),
                textShadow: createCustomValue('none'),
            },
        },
        badgeOutOfStock: {
            show: true,
            backgroundColor: createCustomValue('#111827'),
            textColor: createCustomValue('#FFFFFF'),
            borderRadius: createCustomValue('9999px'),
            typography: {
                fontFamily: createGlobalRef('typography.small.fontFamily'),
                fontSize: createGlobalRef('typography.small.fontSize'),
                fontWeight: createGlobalRef('typography.small.fontWeight'),
                lineHeight: createGlobalRef('typography.small.lineHeight'),
                textTransform: createCustomValue('uppercase'),
                fontStyle: createCustomValue('normal'),
                textDecoration: createCustomValue('none'),
                letterSpacing: createCustomValue('0.4px'),
                textAlign: createCustomValue('center'),
                textShadow: createCustomValue('none'),
            },
        },
        badgeLowStock: {
            show: true,
            threshold: 5,
            backgroundColor: createCustomValue('#FEF3C7'),
            textColor: createCustomValue('#92400E'),
            borderRadius: createCustomValue('9999px'),
            typography: {
                fontFamily: createGlobalRef('typography.small.fontFamily'),
                fontSize: createGlobalRef('typography.small.fontSize'),
                fontWeight: createGlobalRef('typography.small.fontWeight'),
                lineHeight: createGlobalRef('typography.small.lineHeight'),
                textTransform: createCustomValue('none'),
                fontStyle: createCustomValue('normal'),
                textDecoration: createCustomValue('none'),
                letterSpacing: createCustomValue('0px'),
                textAlign: createCustomValue('center'),
                textShadow: createCustomValue('none'),
            },
        },
        title: {
            color: createGlobalRef('colors.text'),
            font: createGlobalRef('typography.heading.fontSize'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.heading.fontSize'),
                fontWeight: createGlobalRef('typography.heading.fontWeight'),
                lineHeight: createGlobalRef('typography.heading.lineHeight'),
                textTransform: createGlobalRef('typography.heading.textTransform'),
                fontStyle: createGlobalRef('typography.heading.fontStyle'),
                textDecoration: createGlobalRef('typography.heading.textDecoration'),
                letterSpacing: createGlobalRef('typography.heading.letterSpacing'),
                // Non-scale defaults (protocol)
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        description: {
            color: createGlobalRef('colors.textMuted'),
            font: createGlobalRef('typography.body.fontSize'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.body.fontSize'),
                fontWeight: createGlobalRef('typography.body.fontWeight'),
                lineHeight: createGlobalRef('typography.body.lineHeight'),
                textTransform: createGlobalRef('typography.body.textTransform'),
                fontStyle: createGlobalRef('typography.body.fontStyle'),
                textDecoration: createGlobalRef('typography.body.textDecoration'),
                letterSpacing: createGlobalRef('typography.body.letterSpacing'),
                // Non-scale defaults (protocol)
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        price: {
            // Preset 18 source-of-truth: colors.primary
            color: createGlobalRef('colors.primary'),
            font: createGlobalRef('typography.heading.fontSize'),
            saleColor: createGlobalRef('colors.secondary'),
            originalColor: createGlobalRef('colors.textMuted'),
            // Link currency symbol sizing to a stable global token (preset 18 = 24px).
            currencySymbolSize: createCustomValue('24px'),
            // Keep price typography fully global-linked via a dedicated scale (preset 18 = 24px).
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography', 'productPrice.fontSize'),
                fontWeight: createGlobalRef('typography', 'productPrice.fontWeight'),
                lineHeight: createGlobalRef('typography', 'productPrice.lineHeight'),
                textTransform: createGlobalRef('typography', 'productPrice.textTransform'),
                fontStyle: createGlobalRef('typography', 'productPrice.fontStyle'),
                textDecoration: createGlobalRef('typography', 'productPrice.textDecoration'),
                letterSpacing: createGlobalRef('typography', 'productPrice.letterSpacing'),
                // Non-scale defaults (protocol)
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        rating: {
            // Preset 18 source-of-truth: colors.primary
            starColor: createGlobalRef('colors.primary'),
            emptyStarColor: createGlobalRef('colors.border'),
            // Preset 18: default icon size is 14px
            starSize: createCustomValue('14px'),
            // Preset 18: default gap is 4px
            gap: createCustomValue('4px'),
            countColor: createGlobalRef('colors.textMuted'),
            countTypography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.small.fontSize'),
                fontWeight: createGlobalRef('typography.small.fontWeight'),
                lineHeight: createGlobalRef('typography.small.lineHeight'),
                textTransform: createGlobalRef('typography.small.textTransform'),
                fontStyle: createGlobalRef('typography.small.fontStyle'),
                textDecoration: createGlobalRef('typography.small.textDecoration'),
                letterSpacing: createGlobalRef('typography.small.letterSpacing'),
                // Non-scale defaults (protocol)
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        ratingDisplay: {
            show: true,
        },
        quantityControl: {
            show: true,
            buttonStyle: {
                typography: {
                    fontFamily: createGlobalRef('typography.button.fontFamily'),
                    fontSize: createGlobalRef('typography.button.fontSize'),
                    fontWeight: createGlobalRef('typography.button.fontWeight'),
                    textTransform: createCustomValue('none'),
                    fontStyle: createCustomValue('normal'),
                    textDecoration: createCustomValue('none'),
                    lineHeight: createGlobalRef('typography.button.lineHeight'),
                    letterSpacing: createCustomValue('0px'),
                },
                textColor: createGlobalRef('colors.text'),
                backgroundColor: createGlobalRef('colors.surfaceSubtle'),
                borderType: 'solid',
                borderWidth: {
                    top: '1px',
                    right: '1px',
                    bottom: '1px',
                    left: '1px',
                },
                borderColor: createGlobalRef('colors.border'),
                borderRadius: createCustomValue('8px'),
                boxShadow: createCustomValue('none'),
                padding: {
                    top: '8px',
                    right: '10px',
                    bottom: '8px',
                    left: '10px',
                },
                hover: {
                    textColor: createGlobalRef('colors.text'),
                    backgroundColor: createGlobalRef('colors.surface'),
                    borderColor: createGlobalRef('colors.border'),
                    boxShadow: createCustomValue('none'),
                    iconColor: createGlobalRef('colors.text'),
                },
                transitionDuration: '200ms',
                icon: {
                    icon: 'plus',
                    position: 'only',
                    size: '14px',
                    color: createGlobalRef('colors.text'),
                    spacing: '0px',
                    hoverColor: createGlobalRef('colors.text'),
                },
            },
            inputStyle: {
                background: createGlobalRef('colors.background'),
                color: createGlobalRef('colors.text'),
                borderColor: createGlobalRef('colors.border'),
                borderRadius: createCustomValue('8px'),
                width: createCustomValue('52px'),
                typography: {
                    fontFamily: createGlobalRef('typography.body.fontFamily'),
                    fontSize: createGlobalRef('typography.body.fontSize'),
                    fontWeight: createGlobalRef('typography.body.fontWeight'),
                    lineHeight: createGlobalRef('typography.body.lineHeight'),
                    textTransform: createCustomValue('none'),
                    fontStyle: createCustomValue('normal'),
                    textDecoration: createCustomValue('none'),
                    letterSpacing: createCustomValue('0px'),
                    textAlign: createCustomValue('center'),
                    textShadow: createCustomValue('none'),
                },
            },
        },
        button: {
            background: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.textLight'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            hoverBackground: createGlobalRef('colors.primaryHover'),
            typography: {
                fontFamily: createGlobalRef('typography.button.fontFamily'),
                fontSize: createGlobalRef('typography.button.fontSize'),
                fontWeight: createGlobalRef('typography.button.fontWeight'),
                lineHeight: createGlobalRef('typography.button.lineHeight'),
                textTransform: createCustomValue('none'),
                fontStyle: createCustomValue('normal'),
                textDecoration: createCustomValue('none'),
                letterSpacing: createCustomValue('0px'),
                // Non-scale defaults (protocol)
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
            // Canonical button style controller (Product Card → כפתור)
            // Matches preset 18 intent: primary button with primaryHover on hover, medium radius, no border/shadow, icon enabled.
            buttonStyle: {
                typography: {
                    fontFamily: createGlobalRef('typography.button.fontFamily'),
                    fontSize: createGlobalRef('typography.button.fontSize'),
                    fontWeight: createGlobalRef('typography.button.fontWeight'),
                    textTransform: createCustomValue('none'),
                    fontStyle: createCustomValue('normal'),
                    textDecoration: createCustomValue('none'),
                    lineHeight: createGlobalRef('typography.button.lineHeight'),
                    letterSpacing: createCustomValue('0px'),
                },
                textColor: createGlobalRef('colors.textLight'),
                backgroundColor: createGlobalRef('colors.primary'),
                borderType: 'none',
                borderWidth: {
                    top: '0px',
                    right: '0px',
                    bottom: '0px',
                    left: '0px',
                },
                borderColor: createGlobalRef('colors.transparent'),
                borderRadius: createCustomValue('8px 8px 8px 8px'),
                boxShadow: createCustomValue('none'),
                padding: {
                    top: '10px',
                    right: '20px',
                    bottom: '10px',
                    left: '20px',
                },
                hover: {
                    textColor: createGlobalRef('colors.textLight'),
                    backgroundColor: createGlobalRef('colors.primaryHover'),
                    borderColor: createGlobalRef('colors.transparent'),
                    boxShadow: createCustomValue('none'),
                    iconColor: createGlobalRef('colors.textLight'),
                },
                transitionDuration: '200ms',
                icon: {
                    icon: 'shopping-cart',
                    position: 'before',
                    size: '16px',
                    color: createGlobalRef('colors.textLight'),
                    spacing: '8px',
                    hoverColor: createGlobalRef('colors.textLight'),
                },
            },
            // Secondary/view button styling (Product Card → כפתור → "צפה במוצר")
            viewButtonStyle: {
                typography: {
                    fontFamily: createGlobalRef('typography.button.fontFamily'),
                    fontSize: createGlobalRef('typography.button.fontSize'),
                    fontWeight: createGlobalRef('typography.button.fontWeight'),
                    textTransform: createCustomValue('none'),
                    fontStyle: createCustomValue('normal'),
                    textDecoration: createCustomValue('none'),
                    lineHeight: createGlobalRef('typography.button.lineHeight'),
                    letterSpacing: createCustomValue('0px'),
                },
                textColor: createGlobalRef('colors.textSecondary'),
                backgroundColor: createGlobalRef('colors.surfaceSubtle'),
                borderType: 'none',
                borderWidth: {
                    top: '0px',
                    right: '0px',
                    bottom: '0px',
                    left: '0px',
                },
                borderColor: createGlobalRef('colors.transparent'),
                borderRadius: createCustomValue('8px 8px 8px 8px'),
                boxShadow: createCustomValue('none'),
                padding: {
                    top: '10px',
                    right: '12px',
                    bottom: '10px',
                    left: '12px',
                },
                hover: {
                    textColor: createGlobalRef('colors.textSecondary'),
                    backgroundColor: createGlobalRef('colors.surfaceSubtle'),
                    borderColor: createGlobalRef('colors.transparent'),
                    boxShadow: createCustomValue('none'),
                    iconColor: createGlobalRef('colors.textSecondary'),
                },
                transitionDuration: '200ms',
                icon: {
                    icon: 'external-link',
                    position: 'only',
                    size: '16px',
                    color: createGlobalRef('colors.textSecondary'),
                    spacing: '0px',
                    hoverColor: createGlobalRef('colors.textSecondary'),
                },
            },
        },
        buttonLoadingState: {
            backgroundColor: createGlobalRef('colors.primaryHover'),
            textColor: createGlobalRef('colors.textLight'),
        },
        buttonSuccessState: {
            backgroundColor: createCustomValue('#16A34A'),
            textColor: createCustomValue('#FFFFFF'),
        },
        buttonDisabledState: {
            backgroundColor: createGlobalRef('colors.border'),
            textColor: createGlobalRef('colors.textMuted'),
        },
    },
    coupon: {
        container: {
            background: createGlobalRef('colors.background'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            borderStyle: 'dashed',
            borderColor: createGlobalRef('colors.primary'),
        },
        header: {
            background: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.textLight'),
            font: createGlobalRef('typography.heading.fontSize'),
            fontSize: createCustomValue('18px'),
        },
        description: {
            color: createGlobalRef('colors.text'),
            fontSize: createCustomValue('13px'),
        },
        code: {
            background: createGlobalRef('colors.surface'),
            color: createGlobalRef('colors.text'),
            font: createGlobalRef('typography.heading.fontSize'),
            fontSize: createCustomValue('15px'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
        },
        copyButton: {
            background: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.textLight'),
            hoverBackground: createCustomValue('#2BA8B5'),
            borderRadius: createCustomValue('6px 6px 6px 6px'),
        },
        badge: {
            background: createCustomValue('#E0F2FE'),
            color: createCustomValue('#0F172A'),
            borderRadius: createCustomValue('9999px'),
        },
        expiry: {
            color: createGlobalRef('colors.textMuted'),
            font: createGlobalRef('typography.small.fontSize'),
            fontSize: createCustomValue('11px'),
        },
        removeLink: {
            color: createCustomValue('#1D4ED8'),
            hoverColor: createCustomValue('#1E40AF'),
        },
    },
    bundleBuilder: {
        container: {
            background: createGlobalRef('colors.background'),
            borderRadius: createCustomValue('12px 12px 12px 12px'),
            shadow: createCustomValue('0 4px 12px rgba(0,0,0,0.12)'),
            borderColor: createGlobalRef('colors.border'),
        },
        header: {
            background: createGlobalRef('colors.primary'),
            textColor: createGlobalRef('colors.textLight'),
            subtitleColor: createCustomValue('rgba(255,255,255,0.82)'),
            titleFontSize: createCustomValue('16px'),
            titleFontWeight: createCustomValue('700'),
            subtitleFontSize: createCustomValue('12px'),
        },
        productItem: {
            background: createGlobalRef('colors.surface'),
            textColor: createGlobalRef('colors.text'),
            mutedTextColor: createGlobalRef('colors.textMuted'),
            priceColor: createGlobalRef('colors.primary'),
            actionColor: createGlobalRef('colors.textSecondary'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            nameFontSize: createCustomValue('13px'),
            priceFontSize: createCustomValue('13px'),
        },
        priceDisplay: {
            originalPriceColor: createGlobalRef('colors.textMuted'),
            discountedPriceColor: createGlobalRef('colors.primary'),
            savingsBackground: createCustomValue('#DCFCE7'),
            savingsColor: createCustomValue('#15803D'),
            savingsBorderRadius: createCustomValue('8px 8px 8px 8px'),
            couponBackground: createCustomValue('#F3E8FF'),
            couponColor: createCustomValue('#7E22CE'),
        },
        summary: {
            background: createGlobalRef('colors.surface'),
            borderColor: createGlobalRef('colors.border'),
            labelColor: createGlobalRef('colors.textMuted'),
            totalLabelColor: createGlobalRef('colors.text'),
            linkColor: createGlobalRef('colors.textMuted'),
        },
        button: {
            background: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.textLight'),
            borderColor: createGlobalRef('colors.primary'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            hoverBackground: createGlobalRef('colors.primaryHover'),
            fontSize: createCustomValue('14px'),
        },
        primaryButton: {
            background: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.textLight'),
            borderColor: createGlobalRef('colors.primary'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            hoverBackground: createGlobalRef('colors.primaryHover'),
            fontSize: createCustomValue('14px'),
        },
        secondaryButton: {
            background: createGlobalRef('colors.background'),
            color: createGlobalRef('colors.textSecondary'),
            borderColor: createGlobalRef('colors.border'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            hoverBackground: createGlobalRef('colors.surface'),
            fontSize: createCustomValue('13px'),
        },
        swapButton: {
            background: createGlobalRef('colors.background'),
            color: createGlobalRef('colors.textSecondary'),
            borderColor: createGlobalRef('colors.border'),
            borderRadius: createCustomValue('9999px 9999px 9999px 9999px'),
            hoverBackground: createGlobalRef('colors.surface'),
            fontSize: createCustomValue('12px'),
        },
        removeButton: {
            background: createCustomValue('#FFF1F2'),
            color: createCustomValue('#BE123C'),
            borderColor: createCustomValue('#FECDD3'),
            borderRadius: createCustomValue('9999px 9999px 9999px 9999px'),
            hoverBackground: createCustomValue('#FFE4E6'),
            fontSize: createCustomValue('12px'),
        },
        states: {
            loadingBackground: createGlobalRef('colors.background'),
            loadingIconColor: createGlobalRef('colors.primary'),
            emptyBackground: createGlobalRef('colors.background'),
            emptyIconColor: createGlobalRef('colors.primary'),
            errorBackground: createGlobalRef('colors.background'),
            errorIconColor: createGlobalRef('colors.error'),
            successBackground: createGlobalRef('colors.background'),
            successIconColor: createGlobalRef('colors.success'),
            titleColor: createGlobalRef('colors.text'),
            descriptionColor: createGlobalRef('colors.textMuted'),
        },
    },
    leadForm: {
        container: {
            background: createGlobalRef('colors.textLight'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            borderColor: createGlobalRef('colors.text'),
            borderWidth: createCustomValue('1px'),
            shadow: createCustomValue('0 1px 2px rgba(0,0,0,0.05)'),
            padding: createCustomValue('12px'),
        },
        title: {
            // Canonical fields (Lead Form → כותרת)
            textColor: createGlobalRef('colors.text'),
            textAlign: 'center',
            marginBottom: createCustomValue('16px'),
            color: createGlobalRef('colors.text'),
            font: createGlobalRef('typography.heading.fontSize'),
            // Preset 18 source-of-truth: typography.heading.* (full scale linking)
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.heading.fontSize'),
                fontWeight: createGlobalRef('typography.heading.fontWeight'),
                lineHeight: createGlobalRef('typography.heading.lineHeight'),
                textTransform: createGlobalRef('typography.heading.textTransform'),
                fontStyle: createGlobalRef('typography.heading.fontStyle'),
                textDecoration: createGlobalRef('typography.heading.textDecoration'),
                letterSpacing: createGlobalRef('typography.heading.letterSpacing'),
                // Non-scale defaults (protocol)
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        field: {
            labelColor: createGlobalRef('colors.text'),
            labelFont: createGlobalRef('typography.body.fontSize'),
            gap: createCustomValue('16px'),
            inputBackground: createGlobalRef('colors.background'),
            inputBorder: createGlobalRef('colors.text'),
            inputFocusBorder: createGlobalRef('colors.primary'),
            inputColor: createGlobalRef('colors.textSecondary'),
            inputBorderRadius: createCustomValue('4px 4px 4px 4px'),
            inputPadding: createCustomValue('8px'),
            placeholderColor: createGlobalRef('colors.textSubtle'),
            iconColor: createGlobalRef('colors.text'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.labelLarge.fontSize'),
                fontWeight: createGlobalRef('typography.labelLarge.fontWeight'),
                lineHeight: createGlobalRef('typography.labelLarge.lineHeight'),
                textTransform: createGlobalRef('typography.labelLarge.textTransform'),
                fontStyle: createGlobalRef('typography.labelLarge.fontStyle'),
                textDecoration: createGlobalRef('typography.labelLarge.textDecoration'),
                letterSpacing: createGlobalRef('typography.labelLarge.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        textarea: {
            minHeight: createCustomValue('80px'),
            maxHeight: createCustomValue('200px'),
            background: createGlobalRef('colors.background'),
            border: createGlobalRef('colors.border'),
            focusBorder: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.text'),
            placeholderColor: createGlobalRef('colors.textSubtle'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
            padding: createCustomValue('12px'),
            typography: {
                fontFamily: createGlobalRef('typography.input.fontFamily'),
                fontSize: createGlobalRef('typography.input.fontSize'),
                fontWeight: createGlobalRef('typography.input.fontWeight'),
                lineHeight: createGlobalRef('typography.input.lineHeight'),
                textTransform: createGlobalRef('typography.input.textTransform'),
                fontStyle: createGlobalRef('typography.input.fontStyle'),
                textDecoration: createGlobalRef('typography.input.textDecoration'),
                letterSpacing: createGlobalRef('typography.input.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        select: {
            background: createGlobalRef('colors.background'),
            border: createGlobalRef('colors.border'),
            focusBorder: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.text'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
            padding: createCustomValue('12px'),
            optionBackground: createGlobalRef('colors.background'),
            optionHoverBackground: createGlobalRef('colors.surface'),
            optionColor: createGlobalRef('colors.text'),
            arrowColor: createGlobalRef('colors.textMuted'),
            typography: {
                fontFamily: createGlobalRef('typography.input.fontFamily'),
                fontSize: createGlobalRef('typography.input.fontSize'),
                fontWeight: createGlobalRef('typography.input.fontWeight'),
                lineHeight: createGlobalRef('typography.input.lineHeight'),
                textTransform: createGlobalRef('typography.input.textTransform'),
                fontStyle: createGlobalRef('typography.input.fontStyle'),
                textDecoration: createGlobalRef('typography.input.textDecoration'),
                letterSpacing: createGlobalRef('typography.input.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        date: {
            background: createGlobalRef('colors.background'),
            border: createGlobalRef('colors.border'),
            focusBorder: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.text'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
            iconColor: createGlobalRef('colors.textMuted'),
            calendarBackground: createGlobalRef('colors.background'),
            calendarSelectedBackground: createGlobalRef('colors.primary'),
            calendarSelectedColor: createGlobalRef('colors.textLight'),
        },
        number: {
            background: createGlobalRef('colors.background'),
            border: createGlobalRef('colors.border'),
            focusBorder: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.text'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
            spinnerColor: createGlobalRef('colors.textMuted'),
        },
        checkbox: {
            size: createCustomValue('20px'),
            background: createGlobalRef('colors.background'),
            border: createGlobalRef('colors.border'),
            checkedBackground: createGlobalRef('colors.primary'),
            checkedBorder: createGlobalRef('colors.primary'),
            checkmarkColor: createGlobalRef('colors.textLight'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
            labelColor: createGlobalRef('colors.text'),
            labelFont: createGlobalRef('typography.body.fontSize'),
        },
        error: {
            color: createGlobalRef('colors.error'),
            font: createGlobalRef('typography.small.fontSize'),
            borderColor: createGlobalRef('colors.error'),
        },
        submit: {
            background: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.textLight'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            hoverBackground: createGlobalRef('colors.primaryHover'),
            loadingColor: createGlobalRef('colors.textLight'),
            marginTop: createCustomValue('12px'),
        },
        success: {
            iconColor: createGlobalRef('colors.success'),
            titleColor: createGlobalRef('colors.text'),
            messageColor: createGlobalRef('colors.textMuted'),
        },
        // ============================================================
        // Collapse Toggle Defaults (new in 1.7.0)
        // ============================================================
        collapseToggle: {
            enabled: createCustomValue('false'),
            background: createGlobalRef('colors.surfaceSecondary'),
            hoverBackground: createGlobalRef('colors.surfaceHover'),
            iconColor: createGlobalRef('colors.text'),
            textColor: createGlobalRef('colors.text'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
            padding: createCustomValue('8px 12px'),
            marginBottom: createCustomValue('8px'),
            expandedText: 'Collapse form',
            collapsedText: 'Expand form',
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.body.fontSize'),
                fontWeight: createGlobalRef('typography.body.fontWeight'),
                lineHeight: createGlobalRef('typography.body.lineHeight'),
                textTransform: createCustomValue('none'),
                fontStyle: createCustomValue('normal'),
                textDecoration: createCustomValue('none'),
                letterSpacing: createCustomValue('normal'),
                textAlign: createCustomValue('center'),
                textShadow: createCustomValue('none'),
            },
        },
        // ============================================================
        // Chip/Pill Defaults (new in 1.7.0)
        // ============================================================
        chips: {
            background: createGlobalRef('colors.surfaceSecondary'),
            activeBackground: createGlobalRef('colors.primary'),
            filledBackground: createCustomValue('#ECFDF5'),
            textColor: createGlobalRef('colors.textSecondary'),
            activeTextColor: createGlobalRef('colors.textLight'),
            filledTextColor: createCustomValue('#059669'),
            borderColor: createGlobalRef('colors.border'),
            activeBorderColor: createGlobalRef('colors.primary'),
            filledBorderColor: createCustomValue('#A7F3D0'),
            borderRadius: createCustomValue('9999px'),
            padding: createCustomValue('8px 16px'),
            gap: createCustomValue('8px'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.body.fontSize'),
                fontWeight: createGlobalRef('typography.body.fontWeight'),
                lineHeight: createGlobalRef('typography.body.lineHeight'),
                textTransform: createCustomValue('none'),
                fontStyle: createCustomValue('normal'),
                textDecoration: createCustomValue('none'),
                letterSpacing: createCustomValue('normal'),
                textAlign: createCustomValue('center'),
                textShadow: createCustomValue('none'),
            },
        },
    },
    survey: {
        container: {
            background: createGlobalRef('colors.background'),
            borderWidth: createCustomValue('0px'),
            borderColor: createGlobalRef('colors.transparent'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            shadow: createCustomValue('none'),
            padding: createCustomValue('12px'),
        },
        title: {
            color: createGlobalRef('colors.textMuted'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.labelLarge.fontSize'),
                fontWeight: createGlobalRef('typography.labelLarge.fontWeight'),
                lineHeight: createGlobalRef('typography.labelLarge.lineHeight'),
                textTransform: createGlobalRef('typography.labelLarge.textTransform'),
                fontStyle: createGlobalRef('typography.labelLarge.fontStyle'),
                textDecoration: createGlobalRef('typography.labelLarge.textDecoration'),
                letterSpacing: createGlobalRef('typography.labelLarge.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        question: {
            color: createGlobalRef('colors.text'),
            font: createGlobalRef('typography.heading.fontSize'),
            typography: {
                fontFamily: createGlobalRef('typography.fontFamily'),
                fontSize: createGlobalRef('typography.heading.fontSize'),
                fontWeight: createGlobalRef('typography.heading.fontWeight'),
                lineHeight: createGlobalRef('typography.heading.lineHeight'),
                textTransform: createGlobalRef('typography.heading.textTransform'),
                fontStyle: createGlobalRef('typography.heading.fontStyle'),
                textDecoration: createGlobalRef('typography.heading.textDecoration'),
                letterSpacing: createGlobalRef('typography.heading.letterSpacing'),
                textAlign: createCustomValue('start'),
                textShadow: createCustomValue('none'),
            },
        },
        stars: {
            size: createCustomValue('32px'),
            filledColor: createCustomValue('#FBBF24'),
            emptyColor: createGlobalRef('colors.border'),
            hoverScale: '1.15',
        },
        numbers: {
            background: createGlobalRef('colors.surface'),
            color: createGlobalRef('colors.text'),
            selectedBackground: createGlobalRef('colors.primary'),
            selectedColor: createGlobalRef('colors.textLight'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
        },
        emojis: {
            size: createCustomValue('40px'),
            gap: createCustomValue('12px'),
            defaultColor: createGlobalRef('colors.textMuted'),
            selectedColor: createGlobalRef('colors.primarySoft'),
            hoverScale: '1.15',
            selectedScale: '1.15',
            containerPadding: createCustomValue('4px'),
            containerBackground: createGlobalRef('colors.surfaceSubtle'),
            selectedBorderColor: createGlobalRef('colors.primary'),
        },
        thumbs: {
            upColor: createGlobalRef('colors.success'),
            downColor: createGlobalRef('colors.error'),
            selectedBackground: createGlobalRef('colors.surface'),
        },
        feedback: {
            background: createGlobalRef('colors.background'),
            border: createGlobalRef('colors.border'),
            color: createGlobalRef('colors.text'),
            placeholderColor: createGlobalRef('colors.textSubtle'),
            focusBorderColor: createGlobalRef('colors.border'),
            borderRadius: createCustomValue('4px 4px 4px 4px'),
            minHeight: createCustomValue('80px'),
            padding: createCustomValue('12px 16px'),
            typography: {},
        },
        submit: {
            background: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.textLight'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            typography: {},
            buttonStyle: {
                typography: {
                    fontFamily: createGlobalRef('typography.button.fontFamily'),
                    fontSize: createGlobalRef('typography.button.fontSize'),
                    fontWeight: createGlobalRef('typography.button.fontWeight'),
                    textTransform: createCustomValue('none'),
                    fontStyle: createCustomValue('normal'),
                    textDecoration: createCustomValue('none'),
                    lineHeight: createGlobalRef('typography.button.lineHeight'),
                    letterSpacing: createCustomValue('0px'),
                },
                textColor: createGlobalRef('colors.textLight'),
                backgroundColor: createGlobalRef('colors.primary'),
                borderType: 'none',
                borderWidth: {
                    top: '0px',
                    right: '0px',
                    bottom: '0px',
                    left: '0px',
                },
                borderColor: createGlobalRef('colors.transparent'),
                borderRadius: createCustomValue('8px 8px 8px 8px'),
                boxShadow: createCustomValue('none'),
                padding: {
                    top: '12px',
                    right: '16px',
                    bottom: '12px',
                    left: '16px',
                },
                hover: {
                    textColor: createGlobalRef('colors.textLight'),
                    backgroundColor: createGlobalRef('colors.primary'),
                    borderColor: createGlobalRef('colors.transparent'),
                    boxShadow: createCustomValue('none'),
                    iconColor: createGlobalRef('colors.textLight'),
                },
                transitionDuration: '200ms',
                icon: {
                    icon: 'send',
                    position: 'before',
                    size: '16px',
                    color: createGlobalRef('colors.textLight'),
                    spacing: '8px',
                    hoverColor: createGlobalRef('colors.textLight'),
                },
            },
        },
    },
    cart: {
        badge: {
            background: createGlobalRef('colors.surface'),
            color: createGlobalRef('colors.text'),
            iconColor: createGlobalRef('colors.primary'),
            borderRadius: createCustomValue('9999px'),
            minWidth: createCustomValue('36px'),
            height: createCustomValue('36px'),
        },
        drawer: {
            background: createGlobalRef('colors.background'),
            borderColor: createGlobalRef('colors.border'),
            borderRadius: createCustomValue('16px'),
            shadow: createCustomValue('0 18px 40px rgba(15,23,42,0.14)'),
        },
        header: {
            background: createGlobalRef('colors.surfaceSubtle'),
            color: createGlobalRef('colors.text'),
            countBackground: createGlobalRef('colors.primary'),
            countColor: createGlobalRef('colors.textLight'),
        },
        item: {
            background: createGlobalRef('colors.background'),
            borderColor: createGlobalRef('colors.border'),
            borderRadius: createCustomValue('12px'),
            titleColor: createGlobalRef('colors.text'),
            metaColor: createGlobalRef('colors.textMuted'),
            priceColor: createGlobalRef('colors.primary'),
            quantityBackground: createGlobalRef('colors.surface'),
            quantityColor: createGlobalRef('colors.text'),
            removeColor: createGlobalRef('colors.error'),
        },
        summary: {
            background: createGlobalRef('colors.surfaceSubtle'),
            borderColor: createGlobalRef('colors.border'),
            borderRadius: createCustomValue('12px'),
            labelColor: createGlobalRef('colors.textMuted'),
            valueColor: createGlobalRef('colors.text'),
        },
        actions: {
            primaryBackground: createGlobalRef('colors.primary'),
            primaryColor: createGlobalRef('colors.textLight'),
            primaryHoverBackground: createCustomValue('#2BA8B5'),
            secondaryBackground: createGlobalRef('colors.background'),
            secondaryColor: createGlobalRef('colors.text'),
            secondaryBorderColor: createGlobalRef('colors.border'),
            secondaryHoverBackground: createGlobalRef('colors.surface'),
            borderRadius: createCustomValue('12px'),
        },
        empty: {
            iconColor: createGlobalRef('colors.textSubtle'),
            titleColor: createGlobalRef('colors.textMuted'),
            descriptionColor: createGlobalRef('colors.textSubtle'),
        },
    },
    pricingTable: {
        container: {
            background: createGlobalRef('colors.background'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            shadow: createCustomValue('0 4px 6px rgba(0,0,0,0.1)'),
        },
        header: {
            background: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.textLight'),
            font: createGlobalRef('typography.heading.fontSize'),
        },
        price: {
            color: createGlobalRef('colors.text'),
            font: createGlobalRef('typography.heading.fontSize'),
            periodColor: createGlobalRef('colors.textMuted'),
        },
        features: {
            color: createGlobalRef('colors.text'),
            checkColor: createGlobalRef('colors.success'),
            crossColor: createGlobalRef('colors.error'),
        },
        button: {
            background: createGlobalRef('colors.primary'),
            color: createGlobalRef('colors.textLight'),
            borderRadius: createCustomValue('8px 8px 8px 8px'),
            hoverBackground: createCustomValue('#2BA8B5'),
        },
        popular: {
            badgeBackground: createGlobalRef('colors.secondary'),
            badgeColor: createGlobalRef('colors.textLight'),
            borderColor: createGlobalRef('colors.secondary'),
        },
    },
};

// ============================================================
// Updated Full Preset Type
// ============================================================

/**
 * Full appearance preset with all data including widget settings
 */
export interface FullAppearancePreset extends Omit<AppearancePreset, 'global_values' | 'element_settings'> {
    global_values: PresetGlobalValues | null;
    element_settings: ElementSettings | null;
    widget_settings: WidgetSettings | null;
}

// ============================================================
// Utility Functions
// ============================================================

/**
 * Resolve a field value to its actual string value
 */
export function resolveFieldValue(
    fieldValue: FieldValue | string | undefined | null,
    globalValues: PresetGlobalValues
): string {
    if (fieldValue === undefined || fieldValue === null) {
        return '';
    }
    if (typeof fieldValue === 'string') {
        return fieldValue;
    }
    if (isCustomValue(fieldValue)) {
        return fieldValue.value;
    }
    if (isDefaultRef(fieldValue)) {
        // In the admin context, type:'default' should already be resolved
        // by the server. Return empty to signal "needs resolution".
        return '';
    }
    
    const refString = (fieldValue as any).ref
    if (!('ref' in fieldValue) || typeof refString !== 'string' || !refString) {
        return '';
    }
    const path = refString.split('.');
    let value: any = globalValues;
    
    for (const key of path) {
        if (Array.isArray(value)) {
            const found = value.find((item: any) => item.id === key);
            if (found) {
                value = found;
            } else {
                const numIndex = parseInt(key, 10);
                if (!isNaN(numIndex) && numIndex < value.length) {
                    value = value[numIndex];
                } else {
                    console.warn(`Could not resolve ref segment '${key}' in array`);
                    return '';
                }
            }
        } else if (value && typeof value === 'object' && key in value) {
            value = value[key];
        } else {
            console.warn(`Could not resolve global ref: ${refString}`);
            return '';
        }
    }
    
    return typeof value === 'string' ? value : '';
}

/**
 * Get all available global value paths for a specific type
 */
export function getGlobalValuePaths(
    globalValues: PresetGlobalValues,
    filterType?: 'color' | 'size' | 'font'
): string[] {
    const paths: string[] = [];
    
    // Colors
    if (!filterType || filterType === 'color') {
        Object.keys(globalValues.colors).forEach(key => {
            if (key !== 'custom') {
                paths.push(`colors.${key}`);
            }
        });
        globalValues.colors.custom.forEach((color) => {
            paths.push(`colors.custom.${color.id}.value`);
        });
    }
    
    // Typography
    if (!filterType || filterType === 'size' || filterType === 'font') {
        paths.push('typography.fontFamily');
        ['heading', 'body', 'small', 'button'].forEach(scale => {
            paths.push(`typography.${scale}.fontSize`);
            paths.push(`typography.${scale}.fontWeight`);
            paths.push(`typography.${scale}.lineHeight`);
        });
        (globalValues.typography?.custom || []).forEach((scale) => {
            paths.push(`typography.custom.${scale.id}.fontSize`);
            paths.push(`typography.custom.${scale.id}.fontWeight`);
            paths.push(`typography.custom.${scale.id}.lineHeight`);
        });
    }
    
    // Effects (legacy — may be absent in new presets)
    if ((!filterType || filterType === 'size') && globalValues.effects) {
        Object.keys(globalValues.effects).forEach(key => {
            paths.push(`effects.${key}`);
        });
    }
    
    return paths;
}

/**
 * Migrate old presets that have custom colors without IDs and refs using numeric indices.
 * Returns migrated data and a flag indicating whether migration was performed.
 */
export function migrateColorIds(
    globalValues: PresetGlobalValues,
    elementSettings: any,
    widgetSettings?: any
): { globalValues: PresetGlobalValues; elementSettings: any; widgetSettings: any; migrated: boolean } {
    const customColors = globalValues?.colors?.custom || [];
    const needsIds = customColors.some(c => !c.id);
    if (!needsIds) return { globalValues, elementSettings, widgetSettings, migrated: false };

    const idMap: Record<number, string> = {};
    const updatedColors = customColors.map((color, index) => {
        const id = color.id || generateColorId();
        idMap[index] = id;
        return { ...color, id };
    });

    const rewriteRefs = (obj: any): any => {
        if (obj === null || obj === undefined || typeof obj !== 'object') return obj;
        if (Array.isArray(obj)) return obj.map(rewriteRefs);

        const result: Record<string, any> = {};
        for (const key of Object.keys(obj)) {
            const val = obj[key];
            if (key === 'ref' && typeof val === 'string') {
                let rewritten = val;
                for (const [oldIndex, newId] of Object.entries(idMap)) {
                    rewritten = rewritten.replace(
                        new RegExp(`colors\\.custom\\.${oldIndex}\\.value`, 'g'),
                        `colors.custom.${newId}.value`
                    );
                }
                result[key] = rewritten;
            } else {
                result[key] = rewriteRefs(val);
            }
        }
        return result;
    };

    return {
        globalValues: {
            ...globalValues,
            colors: { ...globalValues.colors, custom: updatedColors },
        },
        elementSettings: elementSettings ? rewriteRefs(elementSettings) : elementSettings,
        widgetSettings: widgetSettings ? rewriteRefs(widgetSettings) : widgetSettings,
        migrated: true,
    };
}

