# KAYAK (iOS) — Jetpack Compose Implementation Guide

Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports KAYAK's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, an M3 `Typography`, paste-ready `@Composable`s (fare card, price-calendar strip, forecast banner, fare-compare matrix), navigation, motion, and haptics.

> The DESIGN.md tokens are platform-neutral. This guide keeps the *visual* identity (KAYAK Orange as the single scarce accent, the color-coded price calendar, the forecast banner, the fare-compare matrix) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Card` elevation, `dp`/`sp` instead of `pt`.

Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and Coil `2.6+` for airline logos. Do **not** enable Material You dynamic color — KAYAK's lone orange accent must hold regardless of wallpaper.

## 1. Color Tokens (Compose + M3)

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

object KayakColors {
    // Canvas & Surfaces (Light)
    val Canvas         = Color(0xFFFFFFFF)
    val SurfaceGray    = Color(0xFFF4F5F7)
    val SurfacePressed = Color(0xFFE9EBEE)
    val Divider        = Color(0xFFE2E5E9)

    // Canvas & Surfaces (Dark) — near-neutral, NO brand tint
    val DarkCanvas   = Color(0xFF101214)
    val DarkSurface1 = Color(0xFF181B1E)
    val DarkSurface2 = Color(0xFF21262B)
    val DarkDivider  = Color(0xFF2C3338)

    // Text
    val TextPrimary     = Color(0xFF16191C)
    val TextSecondary   = Color(0xFF5C656E)
    val TextTertiary    = Color(0xFF8B949C)
    val DarkTextPrimary   = Color(0xFFE9ECEF)
    val DarkTextSecondary = Color(0xFF9BA3AB)

    // Brand (single accent)
    val Orange        = Color(0xFFFF690F)
    val OrangePressed = Color(0xFFE0560A)
    val OrangeSoft    = Color(0xFFFF8A42)
    val Link          = Color(0xFF2E7CF6)

    // Functional semantic (NOT brand)
    val PriceLow  = Color(0xFF1E9E5A)
    val PriceHigh = Color(0xFFE5484D)
    val Wait      = Color(0xFFE8A317)
}

enum class PriceBand { Low, Mid, High }

fun kykPriceColor(band: PriceBand, dark: Boolean = false): Color = when (band) {
    PriceBand.Low  -> KayakColors.PriceLow
    PriceBand.Mid  -> if (dark) KayakColors.DarkTextPrimary else KayakColors.TextPrimary
    PriceBand.High -> KayakColors.PriceHigh
}

enum class ForecastAdvice { Buy, Wait, Rise }

fun kykAdviceColor(a: ForecastAdvice): Color = when (a) {
    ForecastAdvice.Buy  -> KayakColors.PriceLow
    ForecastAdvice.Wait -> KayakColors.Wait
    ForecastAdvice.Rise -> KayakColors.Orange   // rising uses brand orange in KAYAK
}
```

```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
import androidx.compose.runtime.Composable

private val KayakLight = lightColorScheme(
    primary        = KayakColors.Orange,
    onPrimary      = KayakColors.Canvas,
    background      = KayakColors.SurfaceGray,
    onBackground    = KayakColors.TextPrimary,
    surface         = KayakColors.Canvas,
    onSurface       = KayakColors.TextPrimary,
    surfaceVariant  = KayakColors.SurfacePressed,
    outline         = KayakColors.Divider,
    error           = KayakColors.PriceHigh,
)

private val KayakDark = darkColorScheme(
    primary        = KayakColors.Orange,
    onPrimary      = KayakColors.Canvas,
    background      = KayakColors.DarkCanvas,
    onBackground    = KayakColors.DarkTextPrimary,
    surface         = KayakColors.DarkSurface1,
    onSurface       = KayakColors.DarkTextPrimary,
    surfaceVariant  = KayakColors.DarkSurface2,
    outline         = KayakColors.DarkDivider,
    error           = KayakColors.PriceHigh,
)

@Composable
fun KayakTheme(
    dark: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) = MaterialTheme(
    colorScheme = if (dark) KayakDark else KayakLight,
    typography  = KayakTypography,
    content     = content,
)
```

## 2. Typography (M3)

KAYAK's product face is proprietary — drop the TTFs in `res/font/` only if licensed; otherwise use Inter (closest free substitute). Prices/times/matrix cells need tabular figures.

```kotlin
// ui/theme/KayakType.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 KayakSans = FontFamily(
    Font(R.font.inter_regular,   FontWeight.Normal),
    Font(R.font.inter_semibold,  FontWeight.SemiBold),
    Font(R.font.inter_bold,      FontWeight.Bold),
    Font(R.font.inter_extrabold, FontWeight.ExtraBold),
)

object KayakText {
    val Display   = TextStyle(KayakSans, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.6).sp)
    val Route     = TextStyle(KayakSans, fontWeight = FontWeight.ExtraBold, fontSize = 26.sp, lineHeight = 31.sp, letterSpacing = (-0.4).sp)
    val Section   = TextStyle(KayakSans, fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
    val Body      = TextStyle(KayakSans, fontWeight = FontWeight.Normal,    fontSize = 16.sp, lineHeight = 24.sp)
    val Label     = TextStyle(KayakSans, fontWeight = FontWeight.SemiBold,  fontSize = 14.sp, lineHeight = 19.sp)
    val Meta      = TextStyle(KayakSans, fontWeight = FontWeight.Normal,    fontSize = 13.sp, lineHeight = 18.sp)
    val CalDay    = TextStyle(KayakSans, fontWeight = FontWeight.SemiBold,  fontSize = 11.sp, lineHeight = 12.sp)
    val Tag       = TextStyle(KayakSans, fontWeight = FontWeight.Bold,      fontSize = 11.sp, lineHeight = 12.sp, letterSpacing = 0.3.sp)
    val Button    = TextStyle(KayakSans, fontWeight = FontWeight.Bold,      fontSize = 16.sp, lineHeight = 16.sp)
    val Tab       = TextStyle(KayakSans, fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 11.sp, letterSpacing = 0.1.sp)
    // Numeric — apply fontFeatureSettings = "tnum"
    val Price     = TextStyle(KayakSans, fontWeight = FontWeight.ExtraBold, fontSize = 20.sp, lineHeight = 24.sp, fontFeatureSettings = "tnum")
    val LegTime   = TextStyle(KayakSans, fontWeight = FontWeight.ExtraBold, fontSize = 18.sp, lineHeight = 22.sp, fontFeatureSettings = "tnum")
    val CalPrice  = TextStyle(KayakSans, fontWeight = FontWeight.ExtraBold, fontSize = 13.sp, lineHeight = 14.sp, fontFeatureSettings = "tnum")
    val MatrixNum = TextStyle(KayakSans, fontWeight = FontWeight.ExtraBold, fontSize = 12.sp, lineHeight = 14.sp, fontFeatureSettings = "tnum")
}

val KayakTypography = Typography(
    headlineLarge  = KayakText.Display,
    headlineMedium = KayakText.Route,
    titleLarge     = KayakText.Section,
    bodyMedium     = KayakText.Body,
    labelSmall     = KayakText.Tab,
)
```

## 3. Signature Components

### Fare Card (@Composable)

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp

@Composable
fun FareCard(
    airlineCode: String,
    airlineName: String,
    isHackerFare: Boolean,
    departTime: String, departCode: String,
    arriveTime: String, arriveCode: String,
    duration: String, stopsText: String, nonstop: Boolean,
    provider: String, price: Int,
    modifier: Modifier = Modifier,
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(14.dp),
        colors = CardDefaults.cardColors(containerColor = KayakColors.Canvas),
        border = BorderStroke(0.5.dp, KayakColors.Divider),
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
    ) {
        Column(Modifier.padding(14.dp)) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                    Box(
                        Modifier.size(26.dp).clip(RoundedCornerShape(7.dp)).background(KayakColors.SurfaceGray),
                        contentAlignment = Alignment.Center,
                    ) { Text(airlineCode, style = KayakText.Tag.copy(fontSize = 10.sp), color = KayakColors.TextSecondary) }
                    Text(airlineName, style = KayakText.Meta.copy(fontWeight = FontWeight.SemiBold), color = KayakColors.TextSecondary)
                }
                Spacer(Modifier.weight(1f))
                if (isHackerFare) {
                    Text(
                        "HACKER FARE", style = KayakText.Tag, color = androidx.compose.ui.graphics.Color.White,
                        modifier = Modifier
                            .clip(RoundedCornerShape(5.dp)).background(KayakColors.Orange)
                            .padding(vertical = 3.dp, horizontal = 7.dp),
                    )
                }
            }

            Row(
                Modifier.padding(top = 12.dp).fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(12.dp),
            ) {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Text(departTime, style = KayakText.LegTime, color = KayakColors.TextPrimary)
                    Text(departCode, style = KayakText.Meta.copy(fontSize = 11.sp), color = KayakColors.TextSecondary)
                }
                Column(Modifier.weight(1f), horizontalAlignment = Alignment.CenterHorizontally) {
                    Text(duration, style = KayakText.Meta.copy(fontSize = 11.sp), color = KayakColors.TextSecondary)
                    HorizontalDivider(Modifier.padding(vertical = 6.dp), thickness = 1.dp, color = KayakColors.Divider)
                    Text(
                        stopsText,
                        style = KayakText.Meta.copy(fontSize = 11.sp, fontWeight = FontWeight.Bold),
                        color = if (nonstop) KayakColors.TextSecondary else KayakColors.Orange,
                    )
                }
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Text(arriveTime, style = KayakText.LegTime, color = KayakColors.TextPrimary)
                    Text(arriveCode, style = KayakText.Meta.copy(fontSize = 11.sp), color = KayakColors.TextSecondary)
                }
            }

            HorizontalDivider(Modifier.padding(top = 14.dp), thickness = 0.5.dp, color = KayakColors.Divider)
            Row(
                Modifier.padding(top = 12.dp).fillMaxWidth(),
                verticalAlignment = Alignment.Bottom,
                horizontalArrangement = Arrangement.SpaceBetween,
            ) {
                Text(provider, style = KayakText.Meta.copy(fontSize = 11.sp), color = KayakColors.TextSecondary)
                Column(horizontalAlignment = Alignment.End) {
                    Text("$$price", style = KayakText.Price, color = KayakColors.TextPrimary)
                    Text("round-trip", style = KayakText.Meta.copy(fontSize = 11.sp), color = KayakColors.TextSecondary)
                }
            }
        }
    }
}
```

### Price-Calendar Strip (@Composable)

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed

data class CalDay(val label: String, val price: Int, val band: PriceBand)

@Composable
fun PriceCalendarStrip(days: List<CalDay>, selected: Int, onSelect: (Int) -> Unit) {
    LazyRow(
        horizontalArrangement = Arrangement.spacedBy(6.dp),
        contentPadding = PaddingValues(horizontal = 16.dp),
    ) {
        itemsIndexed(days) { i, d ->
            val sel = i == selected
            Column(
                Modifier
                    .width(50.dp)
                    .clip(RoundedCornerShape(10.dp))
                    .background(if (sel) KayakColors.Orange else KayakColors.Canvas)
                    .then(if (sel) Modifier else Modifier.border(0.5.dp, KayakColors.Divider, RoundedCornerShape(10.dp)))
                    .clickable { onSelect(i) }
                    .padding(vertical = 8.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Text(d.label, style = KayakText.CalDay, color = if (sel) androidx.compose.ui.graphics.Color.White else KayakColors.TextSecondary)
                Text(
                    "$${d.price}",
                    style = KayakText.CalPrice,
                    color = if (sel) androidx.compose.ui.graphics.Color.White else kykPriceColor(d.band),
                    modifier = Modifier.padding(top = 4.dp),
                )
            }
        }
    }
}
```

### Forecast Banner (@Composable)

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Schedule
import androidx.compose.material.icons.filled.TrendingUp
import androidx.compose.material3.Icon

@Composable
fun ForecastBanner(advice: ForecastAdvice, title: String, subtitle: String, modifier: Modifier = Modifier) {
    val tint = kykAdviceColor(advice)
    val icon = when (advice) {
        ForecastAdvice.Buy  -> Icons.Filled.CheckCircle
        ForecastAdvice.Wait -> Icons.Filled.Schedule
        ForecastAdvice.Rise -> Icons.Filled.TrendingUp
    }
    Row(
        modifier
            .fillMaxWidth().padding(horizontal = 16.dp)
            .clip(RoundedCornerShape(10.dp))
            .background(tint.copy(alpha = 0.12f))
            .border(0.5.dp, tint.copy(alpha = 0.4f), RoundedCornerShape(10.dp))
            .padding(vertical = 11.dp, horizontal = 13.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(10.dp),
    ) {
        Icon(icon, contentDescription = null, tint = tint, modifier = Modifier.size(18.dp))
        Column(Modifier.weight(1f)) {
            Text(title, style = KayakText.Meta.copy(fontSize = 12.sp, fontWeight = FontWeight.Bold), color = KayakColors.TextPrimary)
            Text(subtitle, style = KayakText.Meta.copy(fontSize = 11.sp), color = KayakColors.TextSecondary)
        }
    }
}
```

### Fare-Compare Matrix (@Composable)

```kotlin
data class MatrixRow(val airline: String, val cells: List<Int?>, val bestIndex: Int?)

@Composable
fun FareMatrix(columns: List<String>, rows: List<MatrixRow>, modifier: Modifier = Modifier) {
    Column(
        modifier
            .clip(RoundedCornerShape(10.dp))
            .border(0.5.dp, KayakColors.Divider, RoundedCornerShape(10.dp)),
    ) {
        Row(Modifier.fillMaxWidth().background(KayakColors.SurfaceGray).padding(vertical = 10.dp, horizontal = 8.dp)) {
            Text("Airline", style = KayakText.Label, color = KayakColors.TextPrimary, modifier = Modifier.weight(1.4f))
            columns.forEach { c ->
                Text(c, style = KayakText.Meta, color = KayakColors.TextSecondary,
                    modifier = Modifier.weight(1f), textAlign = androidx.compose.ui.text.style.TextAlign.Center)
            }
        }
        rows.forEach { row ->
            HorizontalDivider(thickness = 0.5.dp, color = KayakColors.Divider)
            Row(Modifier.fillMaxWidth().padding(vertical = 10.dp, horizontal = 8.dp)) {
                Text(row.airline, style = KayakText.Label, color = KayakColors.TextPrimary, modifier = Modifier.weight(1.4f))
                row.cells.forEachIndexed { ci, v ->
                    val best = row.bestIndex == ci
                    Text(
                        v?.let { "$$it" } ?: "—",
                        style = KayakText.MatrixNum,
                        color = when { v == null -> KayakColors.TextTertiary; best -> KayakColors.PriceLow; else -> KayakColors.TextPrimary },
                        modifier = Modifier.weight(1f),
                        textAlign = androidx.compose.ui.text.style.TextAlign.Center,
                    )
                }
            }
        }
    }
}
```

## 4. Navigation

KAYAK uses a 5-tab bottom bar (Search / Trends / Trips / Price Alerts / Profile). On Android, model it as a Material 3 `NavigationBar`. Active is KAYAK Orange; no Material tint pill.

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

@Composable
fun KayakBottomBar(selected: Int, onSelect: (Int) -> Unit) {
    NavigationBar(containerColor = KayakColors.Canvas, tonalElevation = 0.dp) {
        val items = listOf(
            "Search"       to Icons.Filled.Search,
            "Trends"       to Icons.Filled.TrendingUp,
            "Trips"        to Icons.Filled.BookmarkBorder,
            "Price Alerts" to Icons.Filled.NotificationsNone,
            "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 = KayakText.Tab) },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = KayakColors.Orange,
                    selectedTextColor = KayakColors.Orange,
                    unselectedIconColor = KayakColors.TextTertiary,
                    unselectedTextColor = KayakColors.TextTertiary,
                    indicatorColor = androidx.compose.ui.graphics.Color.Transparent, // no Material pill
                ),
            )
        }
    }
}
```

The results screen uses a `TopAppBar` (compact route + edit-search + share), with the price-calendar strip + forecast banner pinned below it, then a `LazyColumn` of fare cards; a `BottomAppBar` holds the sticky "View Deal" CTA on the fare-detail screen.

## 5. Motion

Motion is functional — 140–300ms ease-out, never showy. Shadow only marks tappable cards.

| Moment | Compose recipe |
|--------|----------------|
| Calendar day select | cell fill is immediate; fare list `Crossfade(targetState = date, animationSpec = tween(220))`; skeleton shimmer while re-pricing |
| Forecast reveal | `AnimatedVisibility(slideInVertically { -it } + fadeIn(), tween(240))` on results load |
| Fare card → detail | shared element via `SharedTransitionLayout` (Compose 1.7+); push `tween(300)` |
| Matrix cell tap | `animateColorAsState` flash to `Orange.copy(alpha=.12f)` then back, `tween(140)` |
| Price-drop pulse (Alerts) | `animateFloatAsState` scale 1 → 1.08 → 1, `tween(180)`, one cycle |
| Sort/filter sheet | `ModalBottomSheet` slide-up `tween(300)`; result count `animateIntAsState` |
| Pull-to-refresh | `PullToRefreshContainer` tinted `Orange`; re-runs metasearch |

```kotlin
Crossfade(targetState = selectedDate, animationSpec = tween(220), label = "fareList") { date ->
    FareList(date = date)
}
```

Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft impact on calendar select, segment switch, and filter toggle; a success cue when a tracked price drop is captured. Re-pricing is silent except for the skeleton shimmer.

## 6. Icons

Use `androidx.compose.material:material-icons-extended`.

| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
|---------|-----------------|--------------------------|
| Search (tab) | `magnifyingglass` | `Icons.Filled.Search` |
| Trends (tab) | `chart.line.uptrend.xyaxis` | `Icons.Filled.TrendingUp` |
| Trips (tab) | `bookmark` | `Icons.Filled.BookmarkBorder` |
| Price Alerts (tab) | `bell` | `Icons.Filled.NotificationsNone` |
| Profile (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
| Route arrow | `arrow.right` | `Icons.Filled.ArrowForward` |
| Forecast rise | `chart.line.uptrend.xyaxis` | `Icons.Filled.TrendingUp` |
| Forecast buy | `checkmark.circle` | `Icons.Filled.CheckCircle` |
| Forecast wait | `clock` | `Icons.Filled.Schedule` |
| Swap | `arrow.up.arrow.down` | `Icons.Filled.SwapVert` |
| Filter | `slider.horizontal.3` | `Icons.Filled.Tune` |
| Sort | `arrow.up.arrow.down.circle` | `Icons.Filled.FilterList` |
| Flight | `airplane` | `Icons.Filled.Flight` |
| Stay | `bed.double` | `Icons.Filled.Hotel` |
| Car | `car` | `Icons.Filled.DirectionsCar` |
| Calendar | `calendar` | `Icons.Filled.CalendarMonth` |
| Travelers | `person.2` | `Icons.Filled.Group` |
| Price up | `arrow.up.right` | `Icons.Filled.ArrowUpward` |
| Price down | `arrow.down.right` | `Icons.Filled.ArrowDownward` |

## 7. Minimum SDK & Accessibility Notes

- **minSdk 24**, `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
- **Edge-to-edge**: call `enableEdgeToEdge()`; light canvas wants dark-content system bars (light-content in dark). The top bar respects the camera cutout; the sticky CTA respects the gesture-nav inset.
- **Font scaling**: `sp` honors the user's font scale — keep it on display, route, section, body, prices, leg times. Pin calendar day/price, the Hacker Fare tag, tab labels, and matrix cells via a fixed-density wrapper (the strip + grid are layout-sensitive).
- **Font choice**: KAYAK's product face is proprietary — use it only if licensed; Inter is the parity substitute. Apply `fontFeatureSettings = "tnum"` to every price/time/matrix style so columns align.
- **TalkBack**: label the fare card "{airlineName}, departs {departTime} {departCode}, arrives {arriveTime} {arriveCode}, {stopsText}, {price} dollars round-trip"; the calendar cell "{label}, {price} dollars, lowest/typical/highest"; the forecast banner reads title + subtitle; the Hacker Fare tag announced as "two separate one-way tickets".
- **Don't encode price band by color alone**: the calendar/matrix also encode cheapness via position; add `Modifier.semantics { contentDescription = "lowest price these dates" }` so colorblind users get the signal.
- **Touch targets**: Material guidance is 48.dp. Calendar cells (50.dp wide) and matrix rows should reach a 48.dp tap height; bottom-bar items are 48.dp; primary buttons ≥ 48.dp tall.
- **Contrast**: white on Orange `#FF690F` passes WCAG AA at button sizes; the price-signal green/red on white/dark pass AA for the small bold figures used.
- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, swap the fare-list `Crossfade` for an instant change; drop the price-drop pulse; keep the calendar fill (conveys selection).
- **Dark mode**: invert via the `Dark*` palette — `#101214` near-neutral, NOT true black, and intentionally with NO brand tint so the lone orange accent stays loud; `#16191C` text becomes `#E9ECEF`; pass `dark = true` into `kykPriceColor` so the `Mid` band resolves. Keep Orange + functional semantics fixed. Do **not** enable `dynamicColorScheme()` — KAYAK's single-accent identity must hold regardless of wallpaper.