/*
 * Baiki Design System
 * Reference for consistent UI patterns across all pages.
 * Include AFTER tailwind CDN: <link rel="stylesheet" href="/design.css">
 *
 * This file contains non-Tailwind custom styles only.
 * Tailwind class combos are documented in comments as reference.
 */

/* ── Base ── */
body { font-family: 'Plus Jakarta Sans', sans-serif; }

/* ── Floating card hover ── */
.floating-card { transition: transform 0.2s ease-in-out; }
.floating-card:hover { transform: translateY(-4px); }

/* ── Hide scrollbar ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Animations ── */
.compass-pulse {
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.7); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 20px rgba(255, 140, 0, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); }
}
.mic-pulse { animation: mp 1.2s ease-in-out infinite; }
@keyframes mp {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,140,0,0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(255,140,0,0); }
}

/*
 * ════════════════════════════════════════════════
 *  DESIGN TOKENS (use in tailwind.config)
 * ════════════════════════════════════════════════
 *
 * Primary:          #FF8C00
 * Background:       #f8f7f6
 * Font:             Plus Jakarta Sans (300–800)
 * Icons:            Material Symbols Outlined
 * Container:        max-w-lg mx-auto
 *
 *
 * ════════════════════════════════════════════════
 *  BUTTON PATTERNS (Tailwind class combos)
 * ════════════════════════════════════════════════
 *
 * ┌─ Primary CTA ─────────────────────────────────
 * │  Orange bg, dark text, rounded-xl, shadow
 * │  inline-flex items-center justify-center gap-2
 * │  px-6 py-3 bg-primary text-slate-900 rounded-xl
 * │  font-bold text-sm shadow-lg shadow-primary/20
 * │  Add: w-full (full-width variant)
 * │  Add: hover:scale-[1.02] active:scale-[0.98] transition-transform (landing)
 * └───────────────────────────────────────────────
 *
 * ┌─ Secondary CTA ───────────────────────────────
 * │  White bg, orange border, rounded-xl
 * │  px-8 py-3 bg-white border border-primary/20
 * │  text-primary rounded-xl font-bold text-sm
 * │  hover:bg-primary/5 transition-colors
 * └───────────────────────────────────────────────
 *
 * ┌─ Dark CTA ────────────────────────────────────
 * │  Slate-900 bg, white text, rounded-xl
 * │  w-full flex items-center justify-center gap-2
 * │  py-3 bg-slate-900 text-white rounded-xl
 * │  font-bold text-sm shadow-xl
 * └───────────────────────────────────────────────
 *
 * ┌─ Ghost / Icon button ─────────────────────────
 * │  flex items-center justify-center size-10
 * │  rounded-full hover:bg-primary/10 transition-colors
 * └───────────────────────────────────────────────
 *
 * ┌─ Filter pill (genre) ─────────────────────────
 * │  flex h-9 shrink-0 items-center gap-2 rounded-full
 * │  px-4 text-sm font-semibold
 * │  Active:   bg-primary text-white
 * │  Inactive: bg-primary/10 border border-primary/20 text-primary
 * └───────────────────────────────────────────────
 *
 * ┌─ Language chip ───────────────────────────────
 * │  shrink-0 px-3 h-7 rounded-full text-xs font-semibold
 * │  border transition-colors
 * │  Active:   bg-primary text-white border-primary
 * │  Inactive: bg-slate-100 text-slate-500 border-slate-200
 * └───────────────────────────────────────────────
 *
 *
 * ════════════════════════════════════════════════
 *  CARD PATTERNS
 * ════════════════════════════════════════════════
 *
 * Standard:  bg-white rounded-2xl p-5 border border-primary/10
 *            shadow-xl shadow-primary/5
 *
 * Flat:      bg-white rounded-xl p-3 border border-slate-100 shadow-sm
 *
 * Muted:     bg-slate-50 rounded-xl p-3 border border-dashed
 *            border-slate-200 opacity-80
 *
 *
 * ════════════════════════════════════════════════
 *  INPUT PATTERNS
 * ════════════════════════════════════════════════
 *
 * Text:      w-full h-12 px-4 bg-slate-50 border border-slate-200
 *            rounded-xl text-sm focus:ring-2 focus:ring-primary/40
 *
 * Textarea:  w-full p-4 bg-white border border-slate-200 rounded-xl
 *            text-sm focus:ring-2 focus:ring-primary/40 resize-none
 *
 * Select:    h-9 px-3 bg-slate-50 border border-slate-200 rounded-lg
 *            text-xs focus:ring-2 focus:ring-primary/40
 *
 *
 * ════════════════════════════════════════════════
 *  BADGE PATTERNS
 * ════════════════════════════════════════════════
 *
 * Base:      px-2.5 py-1 text-[10px] font-bold uppercase
 *            rounded-full tracking-wider
 * Primary:   + bg-primary text-white
 * Status:    + bg-primary/10 text-primary
 * Success:   + bg-emerald-50 text-emerald-600
 *
 *
 * ════════════════════════════════════════════════
 *  LAYOUT PATTERNS
 * ════════════════════════════════════════════════
 *
 * Header:    sticky top-0 z-20 bg-background-light/80
 *            backdrop-blur-md border-b border-primary/10
 *            max-w-lg mx-auto w-full
 *
 * Tab bar:   fixed bottom-0 left-0 right-0 z-30
 *            bg-white/95 backdrop-blur-md border-t border-primary/10
 *            px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2
 *
 * Tab active:   text-primary + icon FILL 1 + text-[10px] font-bold
 * Tab inactive: text-slate-400 hover:text-primary/70 + text-[10px] font-medium
 *
 *
 * ════════════════════════════════════════════════
 *  KEY RULES
 * ════════════════════════════════════════════════
 *
 * - Buttons: always rounded-xl (NEVER rounded-full for CTA buttons)
 * - Pills/chips/filters: rounded-full is OK
 * - Corners: cards rounded-2xl, inputs/buttons rounded-xl
 * - Shadows: primary CTA gets shadow-primary/20, cards get shadow-primary/5
 * - Font sizes: buttons text-sm, labels text-xs, micro text-[10px]
 */