Zomato：パーソナリティ駆動型フードUX

:root {
  /* Core brand red */
  --zomato-red: #e23744;         /* Primary: CTAs, headers, logo */
  --zomato-red-dark: #cb202d;    /* Pressed states, emphasis */
  --zomato-red-light: #f9e5e7;   /* Backgrounds, tags, badges */

  /* Supporting palette */
  --zomato-gold: #eea61b;        /* Ratings, premium, Gold membership */
  --zomato-green: #3ab757;       /* Veg indicator, success states */
  --zomato-green-dark: #1a8d37;  /* Pure veg restaurants */

  /* Surfaces */
  --zomato-white: #ffffff;
  --zomato-gray-50: #f8f8f8;     /* Page backgrounds */
  --zomato-gray-100: #f0f0f0;    /* Card backgrounds */
  --zomato-gray-400: #9c9c9c;    /* Secondary text */
  --zomato-gray-700: #3e4152;    /* Primary text */
  --zomato-gray-900: #1c1c1c;    /* Headings */
}

/* The veg/non-veg indicator is a critical cultural design element */
.food-indicator {
  width: 18px;
  height: 18px;
  border: 2px solid;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.food-indicator.veg {
  border-color: var(--zomato-green);
}

.food-indicator.veg::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zomato-green);
}

.food-indicator.non-veg {
  border-color: var(--zomato-red);
}

.food-indicator.non-veg::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--zomato-red);
}

/* Restaurant card */
.restaurant-card {
  background: var(--zomato-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 200ms ease;
}

.restaurant-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Hero image with overlays */
.card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Discount badge: top-left */
.discount-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: #2c365e;
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.discount-badge .amount {
  display: block;
  font-size: 17px;
}

/* Delivery time: bottom-right */
.delivery-time {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* Card content */
.card-content {
  padding: 12px 16px;
}

.restaurant-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--zomato-gray-900);
  margin: 0;
}

/* Rating badge */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--zomato-green-dark);
  color: white;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--zomato-gray-400);
  font-size: 13px;
  margin-top: 4px;
}

.card-meta .separator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--zomato-gray-400);
}

レストランカードの構造：
┌─────────────────────────────────────┐
│  [      料理写真                    ] │
│  [                                ] │
│  [ 60% OFF        ]   [ 25 min ] │
│  [ up to ₹120     ]               │
├─────────────────────────────────────┤
│  Paradise Biryani                    │
│  ★ 4.3  ·  ビリヤニ、北インド料理   │
│  2人で₹300  ·  2.5 km              │
└─────────────────────────────────────┘

カートが空の場合：
"Good food is always cooking! Go ahead, order some yummy food from the menu."

近くにレストランがない場合：
"Looks like we don't have a restaurant here yet. But hey, we're growing every day."

検索結果なし：
"We couldn't find what you're looking for. But we found 847 other reasons to eat."

注文処理中：
"Hang tight! We're finding the fastest chef in the kitchen."

レストラン検索中：
"Looking for the best food around you... *dramatic drumroll*"

決済処理中：
"Counting your money... just kidding, we're processing your payment."

"We know you're hungry. We always know."
"Your food is traveling faster than your motivation on a Monday."
"Plot twist: dinner can be ordered for lunch too."
"Our delivery partner is on the way. Try not to stare at the map the whole time. (We know you will.)"

デリバリー追跡画面の構造：
┌─────────────────────────────────────┐
│            [マップビュー]             │
│                                      │
│    🏪 ─────── 🛵 ──────── 🏠       │
│  レストラン  配達パートナー  お届け先  │
│                                      │
├─────────────────────────────────────┤
│  到着まで12分                         │
│  ████████████░░░░░░ 65%             │
├─────────────────────────────────────┤
│  ✓ 注文確認完了            4:02 PM │
│  ✓ レストランが調理中      4:05 PM │
│  ✓ 料理の準備完了          4:18 PM │
│  → パートナーが受け取り済み 4:22 PM │
│  ○ 配達中                           │
│  ○ まもなく到着                     │
├─────────────────────────────────────┤
│  配達パートナー：Rahul              │
│  [電話]  [チャット]  [チップ]       │
└─────────────────────────────────────┘