You are building a mobile screen for the Breadfast app using the Breadfast Design System.

CSS: <link rel="stylesheet" href="https://ui.breadfast.app/breadfast-ui.css">
Icons JS: <script src="https://ui.breadfast.app/icons.js"></script>
Product Card JS: <script src="https://ui.breadfast.app/product-card.js"></script>
Icon Sprite: https://ui.breadfast.app/icons.svg

COMPONENTS:

Buttons: .btn + variant (.btn-primary, .btn-secondary, .btn-tertiary, .btn-destructive, .btn-dark) + size (.btn-lg, .btn-md, .btn-sm, .btn-xs). Modifiers: .btn-block (full-width), .btn-icon (circular), .btn-loading (spinner).

Inputs: .field.field-floating > input.field-input + label.field-floating-label. States: .field-input--error, .field-input--success, .is-disabled. Helper: .field-helper, .field-helper--error, .field-helper--success. Also: .field-select, .field-textarea, .field-check + .field-check-input + .field-check-label.

App Header: .app-header + variant (.app-header--centered, .app-header--small, .app-header--large). Structure: .app-header__bar > .app-header__leading + .app-header__center > .app-header__title-slot > .app-header__title + .app-header__actions.app-header__actions--{1,2,3} > .app-header__action. For large: .app-header__copy > .app-header__title + .app-header__subtitle.

Product Card: .product-card > .product-card__media + .product-card__body. Badge variants: .product-card__badge--sponsored, --loyalty, --sold-out, --discount, --success, --new. Grid: display:grid; grid-template-columns:repeat(2,1fr); gap:12px.

Toast: .toast + variant (.toast-success, .toast-error, .toast-warning, .toast-dark, .toast-light, .toast-brand) > .toast-icon + .toast-text.

Tab Bar: nav.tabbar > .tabbar-items > a.tabbar-item(.is-active) > svg.icon.icon-lg + span.tabbar-label. Badge: .tabbar-badge. Home indicator: .tabbar-home-indicator > .tabbar-home-indicator-bar.

Icons: <svg class="icon {size} {color}"><use href="https://ui.breadfast.app/icons.svg#icon-{name}"></use></svg>
Sizes: .icon-sm (16px), .icon-md (20px), .icon-lg (24px), .icon-xl (32px)
Colors: .icon-primary, .icon-secondary, .icon-tertiary, .icon-inverse, .icon-success, .icon-error, .icon-warning
Available: activity-history, add, alert, alert-circle, bell, cart-default, cart-filled, checkmark-circle, checkmark-circle-filled, chevron-left, chevron-right, close-outline, delete, dropdown, heart, heart-filled, home-filled, home-outline, info, loading, location-pin, minus, more, navigate, pay, search-filled, search-outline, settings, star

TOKENS:

Colors: --color-primary (#AA0082), --color-success (#108723), --color-error (#DA1E28), --color-warning (#BA4E00), --color-progress (#0F62FE). Text: --color-text-default, --color-text-secondary, --color-text-tertiary, --color-text-inverse. Backgrounds: --color-bg-default, --color-bg-secondary, --color-bg-dark.

Spacing (4px grid): --space-1 (4px) through --space-16 (64px).
Radius: --radius-xs (4px), --radius-sm (8px), --radius-md (12px), --radius-lg (16px), --radius-full (9999px).
Shadows: --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl.

Typography classes: .text-heading-{xxl..xs}, .text-label-{lg..xs}, .text-paragraph-{xxl..xs}, .text-price-numeric-{lg..xs}, .text-price-decimal-{lg..xs}.

Utility classes: .text-default, .text-secondary, .text-brand, .bg-default, .bg-secondary, .bg-brand, .rounded-sm, .rounded-md, .rounded-lg, .rounded-full.

LAYOUT: 390px max-width container, flex column. App header at top, scrollable main with padding var(--space-4), tabbar at bottom.

RTL: Add dir="rtl" lang="ar" to <html>. Use icon-chevron-right for back button.

RULES: Always use CDN URLs. Always use CSS custom properties. Never invent new class names. Use SVG sprite pattern for icons. Use .btn-block for full-width CTAs.

Human-only visual reference (needs a Breadfast login, AI tools cannot open it and do not need it): https://ui.breadfast.app/reference.html
Full AI context: https://ui.breadfast.app/ai-context.md