designmd-forge 1.2.0

package/dist/data/designs/ios-coffee-meets-bagel-android.md

@@ -0,0 +1,461 @@
+# Coffee Meets Bagel (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Coffee Meets Bagel's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the Today's Bagel card + action trio + match takeover, 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 (CMB's cozy coffee-house palette, the one-at-a-time curated card, the oversized Like, cream-instead-of-white) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Brush.verticalGradient` for the photo scrim, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for profile photos. No color extraction — CMB's palette is fixed warm tones.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/CmbColors.kt
+import androidx.compose.ui.graphics.Color
+
+object CmbColors {
+    // Primary action (Bagel Orange)
+    val Bagel     = Color(0xFFF4623A)
+    val BagelDeep = Color(0xFFD94E2A)
+
+    // Secondary brand (Brew Brown)
+    val Brew        = Color(0xFFA0522D)
+    val BrewDeep    = Color(0xFF7E3F22)
+    val BrewPressed = Color(0xFF693318)
+
+    // Cream (replaces white)
+    val Cream     = Color(0xFFF3E4CF)
+    val CreamSoft = Color(0xFFE8D4B8)
+
+    // Canvas & Surfaces (Light)
+    val Canvas    = Color(0xFFFBF6EF) // warm off-white — NOT pure white
+    val Surface1L = Color(0xFFFFFFFF)
+    val Surface2L = Color(0xFFF3ECE1)
+    val DividerL  = Color(0xFFE8DECF)
+
+    // Canvas & Surfaces (Dark)
+    val DarkCanvas   = Color(0xFF14100D) // roasted brown-black — NOT neutral grey
+    val DarkSurface1 = Color(0xFF1F1813)
+    val DarkSurface2 = Color(0xFF2A2017)
+    val DarkDivider  = Color(0xFF33281D)
+
+    // Text
+    val TextPrimaryL   = Color(0xFF3A2A18) // warm dark brown — NOT pure black
+    val TextSecondaryL = Color(0xFF8A7458)
+    val TextPrimaryD   = Color(0xFFEFE6DA)
+    val TextSecondaryD = Color(0xFFB7A48E)
+    val TextTertiaryD  = Color(0xFF7C6B57)
+
+    // Status
+    val MatchGreen  = Color(0xFF4CC38A)
+    val PremiumGold = Color(0xFFE0A82E)
+}
+```
+
+Wire it into both schemes. CMB is warm-first; the dark scheme uses the signature roasted brown-black `#14100D`, never neutral grey or 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 CmbLight = lightColorScheme(
+    primary        = CmbColors.Bagel,
+    onPrimary      = Color.White,
+    secondary      = CmbColors.Brew,
+    onSecondary    = CmbColors.Cream,
+    background      = CmbColors.Canvas,
+    onBackground    = CmbColors.TextPrimaryL,
+    surface         = CmbColors.Surface1L,
+    onSurface       = CmbColors.TextPrimaryL,
+    surfaceVariant  = CmbColors.Surface2L,
+    outline         = CmbColors.DividerL,
+    error           = CmbColors.BagelDeep,
+)
+
+private val CmbDark = darkColorScheme(
+    primary        = CmbColors.Bagel,
+    onPrimary      = Color.White,
+    secondary      = CmbColors.Brew,
+    onSecondary    = CmbColors.Cream,
+    background      = CmbColors.DarkCanvas,
+    onBackground    = CmbColors.TextPrimaryD,
+    surface         = CmbColors.DarkSurface1,
+    onSurface       = CmbColors.TextPrimaryD,
+    surfaceVariant  = CmbColors.DarkSurface2,
+    outline         = CmbColors.DarkDivider,
+    error           = CmbColors.BagelDeep,
+)
+
+@Composable
+fun CmbTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) CmbDark else CmbLight,
+    typography = CmbTypography,
+    content = content,
+)
+```
+
+## 2. Typography
+
+CMB's brand face is **Brandon Grotesque** / Gotham-family (licensed). Use **Poppins** (SIL OFL — free) as the closest face: drop the TTFs in `res/font/`. People-first hierarchy; the rounded geometric warmth is the tone — never a cold grotesque.
+
+```kotlin
+// ui/theme/CmbType.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 Poppins = FontFamily(
+    Font(R.font.poppins_regular,   FontWeight.Normal),
+    Font(R.font.poppins_medium,    FontWeight.Medium),
+    Font(R.font.poppins_semibold,  FontWeight.SemiBold),
+    Font(R.font.poppins_bold,      FontWeight.Bold),
+    Font(R.font.poppins_extrabold, FontWeight.ExtraBold),
+)
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object CmbText {
+    val ScreenTitle = TextStyle(Poppins, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.6).sp)
+    val ProfileName = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 26.sp, lineHeight = 31.sp, letterSpacing = (-0.3).sp)
+    val Section     = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
+    val CardTitle   = TextStyle(Poppins, fontWeight = FontWeight.SemiBold,  fontSize = 18.sp, lineHeight = 23.sp)
+    val Body        = TextStyle(Poppins, fontWeight = FontWeight.Normal,    fontSize = 16.sp, lineHeight = 24.sp)
+    val PromptAns   = TextStyle(Poppins, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 21.sp)
+    val Meta        = TextStyle(Poppins, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 19.sp)
+    val Chip        = TextStyle(Poppins, fontWeight = FontWeight.SemiBold,  fontSize = 13.sp, lineHeight = 16.sp)
+    val Badge       = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 12.sp, lineHeight = 12.sp, letterSpacing = 0.4.sp)
+    val Number      = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 16.sp, lineHeight = 16.sp)
+    val Tab         = TextStyle(Poppins, fontWeight = FontWeight.SemiBold,  fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.1.sp)
+    val Button      = TextStyle(Poppins, fontWeight = FontWeight.Bold,      fontSize = 16.sp, lineHeight = 16.sp)
+}
+
+val CmbTypography = Typography(
+    headlineLarge  = CmbText.ScreenTitle,
+    headlineMedium = CmbText.ProfileName,
+    titleMedium    = CmbText.CardTitle,
+    bodyMedium     = CmbText.Body,
+    labelSmall     = CmbText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Today's Bagel Card (the core atom)
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Schedule
+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.draw.shadow
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+
+@Composable
+fun BagelCard(
+    imageUrl: String,
+    name: String, age: Int, meta: String, badge: String, interests: List<String>,
+) {
+    Box(
+        Modifier
+            .fillMaxWidth()
+            .aspectRatio(3f / 4f)
+            .shadow(40.dp, RoundedCornerShape(24.dp), spotColor = Color.Black.copy(alpha = 0.7f))
+            .clip(RoundedCornerShape(24.dp)),
+    ) {
+        AsyncImage(model = imageUrl, contentDescription = null, modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
+
+        // Bottom scrim
+        Box(
+            Modifier
+                .align(Alignment.BottomCenter)
+                .fillMaxWidth()
+                .fillMaxHeight(0.55f)
+                .background(Brush.verticalGradient(listOf(Color.Transparent, Color(0xFF14100D).copy(alpha = 0.95f)))),
+        )
+
+        // Badge (top-left)
+        Row(
+            Modifier
+                .align(Alignment.TopStart)
+                .padding(16.dp)
+                .clip(RoundedCornerShape(999.dp))
+                .background(Color(0xFF14100D).copy(alpha = 0.55f))
+                .padding(horizontal = 12.dp, vertical = 6.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(6.dp),
+        ) {
+            Icon(Icons.Filled.Schedule, contentDescription = null, tint = CmbColors.Cream, modifier = Modifier.size(12.dp))
+            Text(badge.uppercase(), style = CmbText.Badge, color = CmbColors.Cream)
+        }
+
+        // Info block (bottom-left)
+        Column(
+            Modifier
+                .align(Alignment.BottomStart)
+                .padding(20.dp),
+        ) {
+            Row {
+                Text(name, style = CmbText.ProfileName, color = Color.White)
+                Text(" $age", style = CmbText.ProfileName.copy(fontWeight = FontWeight.Medium), color = Color.White)
+            }
+            Text(meta, style = CmbText.Meta, color = CmbColors.Cream, modifier = Modifier.padding(top = 4.dp))
+            Row(Modifier.padding(top = 12.dp), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                interests.forEach { c ->
+                    Box(
+                        Modifier
+                            .clip(RoundedCornerShape(999.dp))
+                            .background(CmbColors.Cream.copy(alpha = 0.18f))
+                            .padding(horizontal = 12.dp, vertical = 5.dp),
+                    ) { Text(c, style = CmbText.Chip, color = CmbColors.Cream) }
+                }
+            }
+        }
+    }
+}
+```
+
+### Action Trio (Pass / Like / Send a Bagel)
+
+```kotlin
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.Star
+import androidx.compose.runtime.*
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+@Composable
+fun ActionTrio(onPass: () -> Unit, onLike: () -> Unit, onSend: () -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    var pop by remember { mutableStateOf(false) }
+    val heartScale by animateFloatAsState(if (pop) 1.15f else 1f, spring(Spring.DampingRatioMediumBouncy), label = "heart")
+
+    Row(
+        Modifier.fillMaxWidth().padding(vertical = 16.dp),
+        horizontalArrangement = Arrangement.spacedBy(28.dp, Alignment.CenterHorizontally),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        // Pass — 60dp
+        Box(
+            Modifier.size(60.dp).clip(CircleShape).background(CmbColors.DarkSurface2)
+                .clickable { haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove); onPass() },
+            contentAlignment = Alignment.Center,
+        ) { Icon(Icons.Filled.Close, "Pass", tint = CmbColors.TextSecondaryD, modifier = Modifier.size(24.dp)) }
+
+        // Like — 72dp (largest)
+        Box(
+            Modifier.size(72.dp).clip(CircleShape).background(CmbColors.Bagel)
+                .clickable {
+                    haptics.performHapticFeedback(HapticFeedbackType.LongPress)
+                    pop = true; onLike()
+                },
+            contentAlignment = Alignment.Center,
+        ) { Icon(Icons.Filled.Favorite, "Like", tint = Color.White, modifier = Modifier.size(32.dp).scale(heartScale)) }
+
+        // Send a Bagel — 60dp
+        Box(
+            Modifier.size(60.dp).clip(CircleShape).background(CmbColors.Brew)
+                .clickable { haptics.performHapticFeedback(HapticFeedbackType.LongPress); onSend() },
+            contentAlignment = Alignment.Center,
+        ) { Icon(Icons.Filled.Star, "Send a Bagel", tint = CmbColors.Cream, modifier = Modifier.size(20.dp)) }
+    }
+
+    LaunchedEffect(pop) { if (pop) { kotlinx.coroutines.delay(140); pop = false } }
+}
+```
+
+### Curated Batch Header
+
+```kotlin
+@Composable
+fun BatchHeader(title: String, countText: String, onBeans: () -> Unit) {
+    Row(
+        Modifier.fillMaxWidth().padding(horizontal = 20.dp).padding(bottom = 12.dp),
+        verticalAlignment = Alignment.Top,
+    ) {
+        Column(Modifier.weight(1f)) {
+            Text(title, style = CmbText.CardTitle.copy(fontSize = 19.sp), color = CmbColors.TextPrimaryD)
+            Text(countText, style = CmbText.Badge.copy(fontWeight = FontWeight.SemiBold, letterSpacing = 0.sp), color = CmbColors.TextSecondaryD)
+        }
+        Box(
+            Modifier.size(38.dp).clip(CircleShape).background(CmbColors.DarkSurface2).clickable { onBeans() },
+            contentAlignment = Alignment.Center,
+        ) { Icon(Icons.Filled.Spa, contentDescription = "Beans", tint = CmbColors.Cream, modifier = Modifier.size(18.dp)) }
+    }
+}
+```
+
+### Interest Chip
+
+```kotlin
+@Composable
+fun InterestChip(label: String, selected: Boolean = false, onClick: () -> Unit = {}) {
+    Box(
+        Modifier
+            .clip(RoundedCornerShape(999.dp))
+            .background(if (selected) CmbColors.Brew else CmbColors.DarkSurface2)
+            .clickable { onClick() }
+            .padding(horizontal = 14.dp, vertical = 8.dp),
+    ) {
+        Text(label, style = CmbText.Chip, color = if (selected) CmbColors.Cream else CmbColors.TextPrimaryD)
+    }
+}
+```
+
+### Match Takeover
+
+```kotlin
+import androidx.compose.material.icons.filled.CheckCircle
+
+@Composable
+fun MatchTakeover(onSayHi: () -> Unit, onKeep: () -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    var appear by remember { mutableStateOf(false) }
+    val scale by animateFloatAsState(if (appear) 1f else 0.9f, tween(400), label = "match")
+
+    LaunchedEffect(Unit) { haptics.performHapticFeedback(HapticFeedbackType.LongPress); appear = true }
+
+    Box(
+        Modifier.fillMaxSize().background(Brush.verticalGradient(listOf(CmbColors.Bagel, CmbColors.Brew))),
+        contentAlignment = Alignment.Center,
+    ) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(20.dp), modifier = Modifier.scale(scale)) {
+            Text("It's a match!", style = CmbText.ScreenTitle, color = Color.White)
+            Icon(Icons.Filled.CheckCircle, contentDescription = null, tint = CmbColors.MatchGreen, modifier = Modifier.size(44.dp))
+            Box(
+                Modifier.clip(RoundedCornerShape(999.dp)).background(CmbColors.Bagel).clickable { onSayHi() }
+                    .padding(horizontal = 40.dp, vertical = 14.dp),
+            ) { Text("Say hi", style = CmbText.Button, color = Color.White) }
+            Text("Keep browsing", style = CmbText.Chip, color = CmbColors.Cream, modifier = Modifier.clickable { onKeep() })
+        }
+    }
+}
+```
+
+## 4. Navigation
+
+CMB has a top bar (title + circular beans/filter button) and a 4-tab bottom strip (Suggested / Discover / Chats / Profile). On Android use a `NavigationBar`. There is no tint pill — active icon fills and the label goes Bagel Orange.
+
+```kotlin
+import androidx.compose.material3.*
+import androidx.compose.material.icons.filled.*
+
+@Composable
+fun CmbBottomBar(selected: Int, unread: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = CmbColors.DarkCanvas, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Suggested" to Icons.Filled.Lens,        // stand-in for bagel logomark
+            "Discover"  to Icons.Filled.Search,
+            "Chats"     to Icons.Filled.ChatBubble,
+            "Profile"   to Icons.Filled.Person,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = {
+                    BadgedBox(badge = { if (i == 2 && unread > 0) Badge(containerColor = CmbColors.Bagel) }) {
+                        Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp))
+                    }
+                },
+                label = { Text(label, style = CmbText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = CmbColors.Bagel,    // orange, no tint pill
+                    selectedTextColor = CmbColors.Bagel,
+                    unselectedIconColor = CmbColors.TextTertiaryD,
+                    unselectedTextColor = CmbColors.TextTertiaryD,
+                    indicatorColor = Color.Transparent,     // CMB has no Material pill
+                ),
+            )
+        }
+    }
+}
+```
+
+The bagel card is shown one at a time (preload the next behind it for the cross-fade); the curated batch is finite, never an infinite `LazyColumn`. The profile detail is a separate scrollable screen reached via a shared-element transition on the hero photo.
+
+## 5. Motion
+
+CMB motion is warm and gentle — 180–400ms ease-out with soft haptics; shadows are brown-warm like café lamplight.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Like heart pop | `animateFloatAsState` 1.0 → 1.15 → 1.0 `spring(DampingRatioMediumBouncy)` + soft haptic |
+| Just-liked card wash | orange overlay `animateColorAsState` alpha 0.12 → 0 over 500ms |
+| Card advance (like) | liked card `animateOffsetAsState` up-right + `rotate(12f)` `tween(320)`; next card `Crossfade` + scale 0.96 → 1.0 `tween(260)` |
+| Pass | passed card slides down-left `tween(280)`; light tick haptic |
+| Match takeover | gradient `scale(0.9 → 1.0)` + fade `tween(400)`; bagel-glyph confetti `tween(1200)`; medium haptic |
+| Chip select | background `animateColorAsState` `Surface2` → `Brew` `tween(180)`; scale 0.95 tap-down |
+| Tab switch | `Crossfade(tween(200))`; active icon gentle 1.0→1.1→1.0 pop |
+| Profile open | shared-element hero photo + `AnimatedContent` slide push `tween(300)` |
+
+```kotlin
+// Like heart pop — the canonical CMB motion
+val heartScale by animateFloatAsState(
+    targetValue = if (pop) 1.15f else 1f,
+    animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessMedium),
+    label = "heartPop",
+)
+```
+
+Haptics: prefer `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft success on Like / Send / match takeover, and `HapticFeedbackType.TextHandleMove` (or `HapticFeedbackConstants.CLOCK_TICK` via `LocalView`) for the light tick on Pass and chip select.
+
+## 6. Icons
+
+CMB's bagel logomark is a brand mark — render it as a bundled `ImageVector` / `VectorDrawable` (a ring) for fidelity. The closest first-party set is `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Suggested (tab) | bagel logomark | bundled vector (stand-in `Icons.Filled.Lens`) |
+| Discover (tab) | `magnifyingglass` | `Icons.Filled.Search` |
+| Chats (tab) | `bubble.left.fill` | `Icons.Filled.ChatBubble` |
+| Profile (tab) | `person.fill` | `Icons.Filled.Person` |
+| Pass | `xmark` | `Icons.Filled.Close` |
+| Like | `heart.fill` | `Icons.Filled.Favorite` |
+| Send a Bagel | `star.fill` | `Icons.Filled.Star` |
+| Beans / currency | `leaf.fill` | `Icons.Filled.Spa` (stand-in for coffee bean) |
+| Active badge | `clock.fill` | `Icons.Filled.Schedule` |
+| Match check | `checkmark.circle.fill` | `Icons.Filled.CheckCircle` |
+| Back | `chevron.left` | `Icons.Filled.ArrowBack` |
+| Send message | `arrow.up` | `Icons.Filled.ArrowUpward` |
+| Filter | `slider.horizontal.3` | `Icons.Filled.Tune` |
+| Report / overflow | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Premium / Boost | `bolt.fill` | `Icons.Filled.Bolt` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; modern motion + shared-element comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; the warm-charcoal dark canvas wants light-content system bars (dark-content on the warm light canvas). The action trio + tab bar need `navigationBarsPadding()`; the chat composer needs `imePadding()`.
+- **Font scaling**: `sp` honors the user's font scale — keep it on profile name, section, body, prompt answer. Pin layout-sensitive text (chips, badges, bean numbers, tab labels) by deriving from `dp` or `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
+- **Brand font**: use Poppins (SIL OFL — free) as the closest face; do not redistribute Brandon Grotesque (CMB's licensed brand grotesque). Never substitute a cold grotesque — the rounded warmth is the tone.
+- **TalkBack**: the bagel card is one node ("Profile: {name}, {age}, {meta}, {interests}"); the action buttons read "Like {name}" / "Pass on {name}" / "Send a Bagel to {name}"; expose `customActions` (Like, Pass) on the card so users need not reach the buttons.
+- **Touch targets**: Like is 72.dp, Pass/Send 60.dp (all exceed the 48.dp guidance); chips ≥ 32.dp tall, full-chip tappable; tab icons 22.dp glyph with 48.dp hit via the NavigationBar.
+- **Color is not the only signal**: Like is also the *largest* control and uses a filled heart; Pass uses ×; Send uses ★ — shape distinguishes them for color-blind users.
+- **Contrast**: white/cream over the photo scrim passes WCAG AA at rendered sizes; `#3A2A18` on `#FBF6EF` and `#EFE6DA` on `#14100D` pass AA for 16sp body; white on `#F4623A` passes AA for button text.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, replace the card fly-out with a `Crossfade`, snap the heart (no pop), keep the orange like-flash (conveys state) shortened to 250ms; the match takeover fades instead of scaling.
+- **Dark mode**: invert via the `Dark*` palette — roasted brown-black `#14100D`, NOT neutral grey or true black; text becomes warm cream `#EFE6DA`. Do **not** enable Material You `dynamicColorScheme()` — CMB's coffee-house identity must hold regardless of wallpaper.