# Zomato (iOS) — Jetpack Compose Implementation Guide

Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Zomato's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, the semantic rating pill, the veg/non-veg mark, the bordered ADD button, the Delivery/Dining toggle, motion, and haptics.

> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (white canvas, Zomato Red, the semantic rating pill, the veg/non-veg mark, the bordered ADD, the Delivery/Dining toggle) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `ModalBottomSheet` instead of a UIKit sheet, `sp`/`dp` instead of `pt`.

Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and Coil `2.6+` for hero photos and dish thumbnails. Zomato's palette is a fixed brand + semantic rating scale, so dynamic color extraction (Palette / Material You) is **not** used.

## 1. Color Tokens

```kotlin
// ui/theme/ZomatoColors.kt
import androidx.compose.ui.graphics.Color

object ZomatoColors {
    // Brand (interactive)
    val Red          = Color(0xFFE23744)
    val RedPressed   = Color(0xFFC42531)

    // Rating scale (semantic)
    val RatingGreen  = Color(0xFF267E3E)
    val RatingAmber  = Color(0xFFDB7C38)
    val RatingRed    = Color(0xFFE23744) // = brand
    val RatingGrey   = Color(0xFF9C9C9C)

    // Membership & dining
    val Gold         = Color(0xFFEFC75E)
    val DiningBlue   = Color(0xFF256FEF)

    // Canvas & Surfaces (Light)
    val Canvas       = Color(0xFFFFFFFF)
    val Surface1     = Color(0xFFF4F4F5)
    val Surface2     = Color(0xFFEBEBEC)
    val Divider      = Color(0xFFE8E8E8)

    // Canvas & Surfaces (Dark)
    val DarkCanvas   = Color(0xFF121212) // warm near-black — NOT pure black
    val DarkSurface1 = Color(0xFF1C1C1E)
    val DarkSurface2 = Color(0xFF262629)
    val DarkDivider  = Color(0xFF2C2C2E)

    // Text
    val TextPrimary     = Color(0xFF1C1C1C)
    val TextSecondary   = Color(0xFF696969)
    val TextTertiary    = Color(0xFF9C9C9C)
    val DarkTextPrimary = Color(0xFFF2F2F2)

    // Veg / non-veg
    val VegGreen     = Color(0xFF267E3E)
    val NonVegMaroon = Color(0xFFB91C1C)

    // Semantic
    val Error        = Color(0xFFE03A3A)
}

// Semantic rating → fill color
fun ratingFill(score: Double): Color = when {
    score >= 4.0 -> ZomatoColors.RatingGreen
    score >= 3.0 -> ZomatoColors.RatingAmber
    score > 0.0  -> ZomatoColors.RatingRed
    else         -> ZomatoColors.RatingGrey
}
```

Wire it into both schemes. Zomato is light-first (white, photo-forward, dense); the dark scheme uses a warm `#121212`, never true black.

```kotlin
// ui/theme/Theme.kt
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.MaterialTheme

private val ZomatoLight = lightColorScheme(
    primary        = ZomatoColors.Red,
    onPrimary      = Color.White,
    background      = ZomatoColors.Canvas,
    onBackground   = ZomatoColors.TextPrimary,
    surface        = ZomatoColors.Surface1,
    onSurface      = ZomatoColors.TextPrimary,
    surfaceVariant = ZomatoColors.Surface2,
    outline        = ZomatoColors.Divider,
    error          = ZomatoColors.Error,
)

private val ZomatoDark = darkColorScheme(
    primary        = ZomatoColors.Red,
    onPrimary      = Color.White,
    background      = ZomatoColors.DarkCanvas,
    onBackground   = ZomatoColors.DarkTextPrimary,
    surface        = ZomatoColors.DarkSurface1,
    onSurface      = ZomatoColors.DarkTextPrimary,
    surfaceVariant = ZomatoColors.DarkSurface2,
    outline        = ZomatoColors.DarkDivider,
    error          = ZomatoColors.Error,
)

@Composable
fun ZomatoTheme(
    dark: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) = MaterialTheme(
    colorScheme = if (dark) ZomatoDark else ZomatoLight,
    typography = ZomatoTypography,
    content = content,
)
```

## 2. Typography (Material 3)

Zomato's brand face is a custom Okra-family grotesque (proprietary); use **Inter** (SIL OFL) — drop the TTFs in `res/font/`. The app is dense and heavy: names 800, screen titles 900; numbers tabular.

```kotlin
// ui/theme/ZomatoType.kt
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

val Inter = FontFamily(
    Font(R.font.inter_regular,   FontWeight.Normal),
    Font(R.font.inter_medium,    FontWeight.Medium),
    Font(R.font.inter_semibold,  FontWeight.SemiBold),
    Font(R.font.inter_bold,      FontWeight.Bold),
    Font(R.font.inter_extrabold, FontWeight.ExtraBold),
    Font(R.font.inter_black,     FontWeight.Black),
)

// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
object ZomatoText {
    val ScreenTitle    = TextStyle(Inter, fontWeight = FontWeight.Black,     fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.5).sp)
    val RestaurantHero = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 24.sp, lineHeight = 29.sp, letterSpacing = (-0.4).sp)
    val Section        = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 20.sp, lineHeight = 26.sp, letterSpacing = (-0.3).sp)
    val MenuCategory   = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 17.sp, lineHeight = 22.sp, letterSpacing = (-0.2).sp)
    val ItemName       = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 15.sp, lineHeight = 20.sp)
    val Body           = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 14.sp, lineHeight = 20.sp)
    val Price          = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 14.sp, lineHeight = 18.sp)
    val Meta           = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 13.sp, lineHeight = 18.sp)
    val RatingPill     = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 14.sp, lineHeight = 14.sp)
    val RatingCaption  = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 11.sp, lineHeight = 14.sp)
    val Tag            = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.4.sp)
    val Button         = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 16.sp, lineHeight = 16.sp)
    val AddLabel       = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 14.sp, lineHeight = 14.sp, letterSpacing = 0.3.sp)
    val Tab            = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
    val Caption        = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 12.sp, lineHeight = 16.sp)
}

// Map onto Material 3 slots so stock components inherit the brand
val ZomatoTypography = Typography(
    headlineLarge  = ZomatoText.ScreenTitle,
    headlineMedium = ZomatoText.RestaurantHero,
    titleLarge     = ZomatoText.Section,
    titleMedium    = ZomatoText.MenuCategory,
    bodyMedium     = ZomatoText.Body,
    labelSmall     = ZomatoText.Tab,
)
```

For tabular figures on prices/ratings, use `TextStyle.copy(fontFeatureSettings = "tnum")`.

## 3. Signature Components

### Semantic Rating Pill

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.unit.dp

@Composable
fun RatingPill(score: Double, count: String? = null) {
    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(5.dp)) {
        Row(
            Modifier.clip(RoundedCornerShape(7.dp)).background(ratingFill(score))
                .padding(horizontal = 9.dp, vertical = 4.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(4.dp),
        ) {
            Icon(Icons.Filled.Star, null, tint = Color.White, modifier = Modifier.size(11.dp))
            Text(String.format("%.1f", score),
                style = ZomatoText.RatingPill.copy(fontFeatureSettings = "tnum"), color = Color.White)
        }
        if (count != null) {
            Text(count, style = ZomatoText.RatingCaption,
                color = ZomatoColors.TextSecondary, textDecoration = TextDecoration.Underline)
        }
    }
}
```

### Veg / Non-Veg Mark

```kotlin
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.border
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Path

@Composable
fun VegMark(isVeg: Boolean) {
    val c = if (isVeg) ZomatoColors.VegGreen else ZomatoColors.NonVegMaroon
    Box(
        Modifier.size(16.dp).border(1.5.dp, c, RoundedCornerShape(3.dp)),
        contentAlignment = Alignment.Center,
    ) {
        if (isVeg) {
            Box(Modifier.size(7.dp).clip(RoundedCornerShape(50)).background(c))
        } else {
            Canvas(Modifier.size(9.dp)) {
                val p = Path().apply {
                    moveTo(size.width / 2f, 0f)
                    lineTo(size.width, size.height)
                    lineTo(0f, size.height)
                    close()
                }
                drawPath(p, c)
            }
        }
    }
}
```

### Menu Item Row (bordered ADD → stepper)

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.foundation.shadow
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Remove
import androidx.compose.material.icons.filled.Star
import androidx.compose.runtime.*
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.unit.IntOffset
import coil.compose.AsyncImage

@Composable
fun MenuItemRow(
    isVeg: Boolean, bestseller: Boolean, name: String, price: String,
    rating: Double, ratingCount: Int, imageUrl: String,
) {
    var qty by remember { mutableIntStateOf(0) }
    val haptics = LocalHapticFeedback.current
    fun tick(n: Int) { haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove); qty = n }

    Row(
        Modifier.fillMaxWidth().padding(vertical = 14.dp),
        horizontalArrangement = Arrangement.spacedBy(14.dp),
    ) {
        Column(Modifier.weight(1f)) {
            VegMark(isVeg)
            if (bestseller) {
                Row(Modifier.padding(top = 7.dp, bottom = 3.dp),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(4.dp)) {
                    Icon(Icons.Filled.Star, null, tint = ZomatoColors.RatingAmber, modifier = Modifier.size(9.dp))
                    Text("Bestseller", style = ZomatoText.Tag, color = ZomatoColors.RatingAmber)
                }
            }
            Text(name, style = ZomatoText.ItemName, color = ZomatoColors.TextPrimary,
                modifier = if (bestseller) Modifier else Modifier.padding(top = 7.dp))
            Text(price, style = ZomatoText.Price, color = ZomatoColors.TextPrimary,
                modifier = Modifier.padding(top = 5.dp))
            Row(Modifier.padding(top = 6.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(4.dp)) {
                Icon(Icons.Filled.Star, null, tint = ZomatoColors.RatingGreen, modifier = Modifier.size(10.dp))
                Text("${"%.1f".format(rating)} ($ratingCount)",
                    style = ZomatoText.Caption, color = ZomatoColors.TextSecondary)
            }
        }

        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            AsyncImage(model = imageUrl, contentDescription = null,
                modifier = Modifier.size(width = 96.dp, height = 90.dp).clip(RoundedCornerShape(12.dp)),
                contentScale = ContentScale.Crop)
            Box(
                Modifier
                    .offset { IntOffset(0, -16.dp.roundToPx()) }   // overlaps the thumbnail
                    .shadow(8.dp, RoundedCornerShape(10.dp))
                    .clip(RoundedCornerShape(10.dp))
                    .background(ZomatoColors.Canvas)
                    .border(1.dp, ZomatoColors.Red, RoundedCornerShape(10.dp)),
            ) {
                if (qty == 0) {
                    Text("ADD", style = ZomatoText.AddLabel, color = ZomatoColors.Red,
                        modifier = Modifier.clickable { qty = 1 }
                            .padding(horizontal = 22.dp, vertical = 8.dp))
                } else {
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Icon(Icons.Filled.Remove, "Decrease", tint = ZomatoColors.Red,
                            modifier = Modifier.size(36.dp).clickable { if (qty > 1) tick(qty - 1) else qty = 0 }
                                .padding(11.dp))
                        Text("$qty", style = ZomatoText.ItemName.copy(fontFeatureSettings = "tnum"),
                            color = ZomatoColors.Red, modifier = Modifier.widthIn(min = 24.dp))
                        Icon(Icons.Filled.Add, "Increase", tint = ZomatoColors.Red,
                            modifier = Modifier.size(36.dp).clickable { tick(qty + 1) }.padding(11.dp))
                    }
                }
            }
        }
    }
    HorizontalDivider(color = ZomatoColors.Divider, thickness = 1.dp)
}
```

### Delivery / Dining Out Toggle

```kotlin
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.layout.fillMaxWidth

@Composable
fun DeliveryDiningToggle(isDelivery: Boolean, onChange: (Boolean) -> Unit) {
    Row(
        Modifier.fillMaxWidth().clip(RoundedCornerShape(50))
            .background(ZomatoColors.Surface1).padding(4.dp),
    ) {
        Seg("Delivery",   isDelivery,  Modifier.weight(1f)) { onChange(true) }
        Seg("Dining Out", !isDelivery, Modifier.weight(1f)) { onChange(false) }
    }
}

@Composable
private fun Seg(label: String, active: Boolean, modifier: Modifier, onClick: () -> Unit) {
    Box(
        modifier.clip(RoundedCornerShape(50))
            .background(if (active) ZomatoColors.Red else Color.Transparent)
            .clickable { onClick() }
            .padding(vertical = 9.dp),
        contentAlignment = Alignment.Center,
    ) {
        Text(label,
            style = ZomatoText.RatingPill.copy(fontSize = 13.sp, fontWeight = FontWeight.Bold),
            color = if (active) Color.White else ZomatoColors.TextSecondary)
    }
}
```

### Restaurant Detail Header (hero + pull-up card)

```kotlin
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.Search

@Composable
fun RestaurantDetailHeader(
    imageUrl: String, name: String, meta: String,
    deliveryRating: Double, diningRating: Double,
) {
    Column {
        Box(Modifier.fillMaxWidth().height(200.dp)) {
            AsyncImage(model = imageUrl, contentDescription = name,
                modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
            Row(
                Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp, top = 14.dp),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                HeroBtn(Icons.Filled.ArrowBack)
                Spacer(Modifier.weight(1f))
                Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
                    HeroBtn(Icons.Filled.Search)
                    HeroBtn(Icons.Filled.FavoriteBorder)
                }
            }
        }
        Column(
            Modifier.fillMaxWidth()
                .offset { IntOffset(0, -22.dp.roundToPx()) }
                .clip(RoundedCornerShape(topStart = 22.dp, topEnd = 22.dp))
                .background(ZomatoColors.Canvas)
                .padding(horizontal = 18.dp).padding(top = 20.dp),
        ) {
            Text(name, style = ZomatoText.RestaurantHero, color = ZomatoColors.TextPrimary)
            Text(meta, style = ZomatoText.Meta, color = ZomatoColors.TextSecondary,
                modifier = Modifier.padding(top = 5.dp))
            Row(Modifier.padding(top = 14.dp), horizontalArrangement = Arrangement.spacedBy(18.dp)) {
                RatingPill(deliveryRating, "12.4K Delivery")
                RatingPill(diningRating, "3.1K Dining")
            }
        }
    }
}

@Composable
private fun HeroBtn(icon: androidx.compose.ui.graphics.vector.ImageVector) {
    Box(
        Modifier.size(34.dp).clip(RoundedCornerShape(50)).background(Color.Black.copy(alpha = 0.4f)),
        contentAlignment = Alignment.Center,
    ) { Icon(icon, null, tint = Color.White, modifier = Modifier.size(17.dp)) }
}
```

### Primary Button

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.ui.draw.scale

@Composable
fun ZButton(title: String, onClick: () -> Unit) {
    val interaction = remember { MutableInteractionSource() }
    val pressed by interaction.collectIsPressedAsState()
    Box(
        Modifier.fillMaxWidth().heightIn(min = 52.dp)
            .scale(if (pressed) 0.98f else 1f)
            .clip(RoundedCornerShape(12.dp))
            .background(if (pressed) ZomatoColors.RedPressed else ZomatoColors.Red)
            .clickable(interaction, indication = null) { onClick() },
        contentAlignment = Alignment.Center,
    ) { Text(title, style = ZomatoText.Button, color = Color.White) }
}
// Embeds price: ZButton("Add item · ₹320", onClick = {})
```

## 4. Navigation

Zomato has a 4-tab bottom strip and no Material tint pill — active is just Zomato Red.

```kotlin
import androidx.compose.material.icons.filled.*

@Composable
fun ZomatoBottomBar(selected: Int, onSelect: (Int) -> Unit) {
    NavigationBar(containerColor = ZomatoColors.Canvas, tonalElevation = 0.dp) {
        val items = listOf(
            "Delivery" to Icons.Filled.Home,
            "Dining"   to Icons.Filled.Restaurant,
            "Live"     to Icons.Filled.GraphicEq,
            "Profile"  to Icons.Filled.AccountCircle,
        )
        items.forEachIndexed { i, (label, icon) ->
            NavigationBarItem(
                selected = selected == i,
                onClick = { onSelect(i) },
                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp)) },
                label = { Text(label, style = ZomatoText.Tab) },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor   = ZomatoColors.Red,
                    selectedTextColor   = ZomatoColors.Red,
                    unselectedIconColor = Color(0xFF888888),
                    unselectedTextColor = Color(0xFF888888),
                    indicatorColor      = Color.Transparent, // no Material pill — Zomato has none
                ),
            )
        }
    }
}
```

The customize, cart and address surfaces are `ModalBottomSheet` with a 22.dp top radius (matching the detail pull-up card). The rider map uses Google Maps Compose with a Zomato-Red route + rider marker; the sticky cart bar floats above the menu with the item count + total embedded in a `ZButton`.

## 5. Motion

Zomato motion is functional — the rating color is the signal, not animation.

| Moment | Compose recipe |
|--------|----------------|
| ADD → stepper | `AnimatedContent` swapping the ADD label for the stepper `tween(180)`; cart bar `slideInVertically` `tween(280)` + `HapticFeedbackType.LongPress` |
| Quantity change | `Crossfade` / `AnimatedContent` on the count + `TextHandleMove` haptic |
| Delivery/Dining toggle | active fill `animateDpAsState` x-offset `spring(dampingRatio = 0.85f)`; content `Crossfade(tween(200))` |
| Hero pull-up parallax | `LazyColumn` + `nestedScroll`; hero `graphicsLayer { translationY = scroll * 0.5f }`; nav alpha animates as the hero scrolls away |
| Card → detail | shared element via `SharedTransitionLayout` (Compose 1.7+) `tween(320)` |
| Rating pill appear | `fadeIn` + slight `scaleIn` `tween(150)` — color is the signal, keep it subtle |
| Sheet present | `ModalBottomSheet` default slide; scrim fades in parallel |
| Order tracking advance | status node `animateDpAsState` `tween(250)` + `HapticFeedbackType.LongPress` (medium analog) |

```kotlin
// ADD → stepper — the canonical Zomato motion
AnimatedContent(targetState = qty == 0, label = "addToStepper",
    transitionSpec = { fadeIn(tween(180)) togetherWith fadeOut(tween(120)) }) { isAdd ->
    if (isAdd) /* ADD label */ else /* bordered red stepper */
}
```

Haptics: `HapticFeedbackType.TextHandleMove` for the stepper tick; `HapticFeedbackType.LongPress` for ADD / stage-complete. Order-placed success can use `VibrationEffect.createPredefined(EFFECT_HEAVY_CLICK)` via the system `Vibrator`.

## 6. Icons

The closest first-party set to Zomato's iconography is `androidx.compose.material:material-icons-extended`. The veg/non-veg mark is custom-drawn (Canvas), not an icon.

| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
|---------|-----------------|--------------------------|
| Delivery (tab) | `house` / `house.fill` | `Icons.Filled.Home` |
| Dining (tab) | `fork.knife` | `Icons.Filled.Restaurant` |
| Live (tab) | `dot.radiowaves.left.and.right` | `Icons.Filled.GraphicEq` |
| Profile (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
| Rating star | `star.fill` | `Icons.Filled.Star` |
| Hero back | `chevron.left` | `Icons.Filled.ArrowBack` |
| Hero search | `magnifyingglass` | `Icons.Filled.Search` |
| Hero save | `heart` / `heart.fill` | `Icons.Filled.FavoriteBorder` / `Icons.Filled.Favorite` |
| ADD minus | `minus` | `Icons.Filled.Remove` |
| ADD plus | `plus` | `Icons.Filled.Add` |
| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
| Dining — book | `calendar` | `Icons.Filled.CalendarMonth` |
| Offer | `tag.fill` | `Icons.Filled.LocalOffer` |
| Pro / Gold | `crown.fill` | `Icons.Filled.WorkspacePremium` |
| Rider (tracking) | `bicycle` | `Icons.Filled.DirectionsBike` |

## 7. Minimum SDK & Accessibility Notes

- **minSdk 24** (Compose floor is 21; modern motion and `SharedTransitionLayout` are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
- **Edge-to-edge**: call `enableEdgeToEdge()`; the white canvas wants dark-content system bars (light-content over the hero photo and in dark mode). The hero nav scrims respect the camera cutout; the bottom tab + sticky cart bar use `Modifier.navigationBarsPadding()`.
- **Semantic rating**: always derive the pill fill from `ratingFill(score)` — never hard-code one color. The color carrying the score's quality is the core of Zomato.
- **Veg/non-veg is not color-only**: the `VegMark` must carry a `contentDescription` ("Vegetarian"/"Non-vegetarian"); it is legally significant in India and must not depend on color perception.
- **Font scaling**: `sp` honors the user's font scale — keep it on screen titles, restaurant names, body and prices. Pin layout-sensitive text (the rating pill, veg mark, 11sp Bestseller tag, 10sp tab labels, the ADD label) by deriving from `dp` or `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
- **Tabular numerals**: apply `fontFeatureSettings = "tnum"` to ratings, prices, review counts and quantity counters.
- **TalkBack**: the rating pill announces score **and** quality ("4.3 stars, rated great"); the menu row is one focusable node combining veg status + name + price + rating; the ADD button is "Add {dish}" and after tap becomes a stepper with state.
- **Touch targets**: Material guidance is 48.dp. Give the ADD button and the 36.dp stepper controls a 48.dp hit area via padding; the segmented toggle halves are ≥ 44.dp tall; primary buttons ≥ 52.dp.
- **Contrast**: `#1C1C1C` on `#FFFFFF` passes WCAG AAA; white on the rating greens/ambers/reds passes AA for the pill score; the semantic scale is always paired with the star + an accessible label so it is never color-only.
- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the ADD→stepper transition and the toggle's sliding fill (substitute a `Crossfade`); keep the rating pill static.
- **Dark mode**: invert via the `Dark*` palette — `#121212`, NOT true black; `#1C1C1C` text becomes `#F2F2F2`. Brand red, the full rating scale, veg colors, gold and dining blue are constant so a pill's color always means the same thing. Shadows are nearly invisible on dark, so add a 0.5dp `DarkDivider` border on floating surfaces (ADD button, sticky cart). Do **not** enable Material You `dynamicColorScheme()` — Zomato's red identity and the semantic rating scale must hold regardless of wallpaper.