/* =========================================================================
   MM TRIP PH APP — design tokens
   Source: DESIGN-STUDY.md (web pass, 2026-11-10). Every value cites its
   section. [P] = provisional: web value standing in for an app value that
   still needs an iOS screenshot. [+] = added for this app, not from Airbnb.
   ========================================================================= */

:root {
  /* ---------- Color: text (§1.1) ---------- */
  --color-text-primary:   #222222;
  --color-text-secondary: #6C6C6C;
  --color-text-tertiary:  #8C8C8C;   /* placeholders */
  --color-text-disabled:  #C1C1C1;
  --color-text-inverse:   #FFFFFF;   /* on brand, on photos, on dark pill */

  /* ---------- Color: surfaces (§1.1) ---------- */
  --color-bg:             #FFFFFF;
  --color-bg-secondary:   #F7F7F7;
  --color-bg-interactive: #F2F2F2;   /* secondary button, icon chip, arrow chip */
  --color-bg-pressed:     #EBEBEB;   /* secondary button pressed */
  --color-bg-loading:     #EBEBEB;   /* skeleton base */
  --color-bg-shimmer:     #F7F7F7;   /* skeleton highlight (§3.14) */
  --color-bg-photo:       #DDDDDD;   /* behind images while loading (§1.1) */
  --color-bg-inverse:     #222222;   /* map pill / dark pill (§3.11) */

  /* ---------- Color: lines (§1.1, §3.13) ---------- */
  --color-border:         #DDDDDD;   /* pills, chips, major dividers */
  --color-divider:        #EBEBEB;   /* list row dividers, tab bar top line */
  --color-border-strong:  #222222;   /* selected / focus */
  --color-border-input:   #8C8C8C;   /* input ring (§3.10) */
  --color-separator-dot:  #C1C1C1;   /* "·" between meta items (§3.4) */

  /* ---------- Color: brand (§1.1, §3.6) ---------- */
  --color-brand:          #FF385C;   /* accent; also primary pressed */
  --color-brand-text:     #DA1249;   /* selected tab, brand-colored text */
  --color-brand-tint:     #FBEFF8;
  /* ONE accent for text and small marks (addendum, Nov 11): active tab, chips,
     stars, links. Airbnb's own red for these is #DA1249; #FF385C is too light
     for small text on white (about 3.3:1 contrast). #FF385C stays only in the
     button gradient, the clay icons and the pressed state. */
  --color-accent:         #DA1249;
  --color-accent-tint:    #FFF5F6;   /* rausch100, accent chip background */
  --color-clay-base:      #F4F2EC;   /* card photo slot behind clay icons (ICONS.md palette) */
  --color-clay-tint:      #ECF6FC;   /* home cards: ICONS.md pastel #9FD0EE at 20% on white */

  /* ---------- Layout column [+] (addendum, Nov 11) ---------- */
  /* Wide screens: centered phone-width column, tab bar aligned to it. */
  --column-max: 430px;
  --gradient-brand: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%);

  /* ---------- Color: status (§1.1) ---------- */
  --color-error:          #C13515;
  --color-error-tint:     #FFF5F3;
  --color-success:        #038026;   /* "Booked" chip text */
  --color-success-tint:   #E6F6E9;   /* "Booked" chip fill */
  --color-warning:        #EB6100;   /* "Pending" / landmine notes */
  --color-info:           #318CF7;
  --color-link:           #0D4DAA;

  /* ---------- Color: overlays + materials (§1.1) ---------- */
  --color-scrim:          rgba(0, 0, 0, 0.40);
  --color-photo-fade:     linear-gradient(rgba(0,0,0,0) 80%, rgba(0,0,0,0.25));
  --color-heart-fill:     rgba(0, 0, 0, 0.50);
  --color-counter-bg:     rgba(34, 34, 34, 0.66);
  --color-tag-bg:         rgba(242, 242, 242, 0.75);
  --material-thin-bg:     rgba(240, 240, 240, 0.50);
  --material-thin-blur:   blur(36px) saturate(1.6);
  --material-thick-bg:    rgba(240, 240, 240, 0.86);
  --material-thick-blur:  blur(12px) saturate(3);
  --material-xthick-bg:   rgba(255, 255, 255, 0.925);
  --material-xthick-blur: blur(16px) saturate(1.6);
  --material-badge-bg:    rgba(255, 255, 255, 0.80);
  --material-badge-blur:  blur(32px);

  /* ---------- Font (§1.2) ---------- */
  /* Cereal removed (proprietary). System stack from Airbnb's own fallback
     order. Hiragino added [+] so JP strings get a real Japanese face. */
  --font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                 "Hiragino Sans", "Hiragino Kaku Gothic ProN", Roboto, sans-serif;
  --font-weight-book:     400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Type styles as used (§1.2 "Styles as actually used").
     size / line-height / tracking. Weight is set per component. */
  --font-size-10: 10px; --font-line-10: 12px; --font-track-10: 0.2px;   /* tab label */
  --font-size-11: 11px; --font-line-11: 15px;                          /* badge, tag */
  --font-size-12: 12px; --font-line-12: 16px;                          /* meta, chip, pill */
  --font-size-13: 13px; --font-line-13: 16px;                          /* small card title */
  --font-size-14: 14px; --font-line-14: 18px;                          /* labels, rows */
  --font-line-14-body: 20px;                                           /* body paragraphs */
  --font-size-15: 15px; --font-line-15: 19px;                          /* large card text */
  --font-size-16: 16px; --font-line-16: 20px;                          /* buttons, rows */
  --font-line-16-body: 22px;                                           /* sheet body */
  --font-line-18-body: 28px;                                           /* body paragraph 18/28 (§1.2) */
  --font-size-18: 18px; --font-line-18: 24px; --font-track-18: -0.18px;/* section heading */
  --font-size-22: 22px; --font-line-22: 26px; --font-track-22: -0.44px;/* page section */
  --font-size-26: 26px; --font-line-26: 30px; --font-track-26: -0.52px;/* page / sheet title */
  --font-size-32: 32px; --font-line-32: 36px; --font-track-32: -0.96px;/* big name */
  --font-size-72: 72px; --font-line-72: 72px; --font-track-72: -2px;   /* hero number (countdown) */

  /* ---------- Space (§1.3) ---------- */
  /* Airbnb scale */
  --space-2: 2px;  --space-4: 4px;  --space-8: 8px;  --space-12: 12px;
  --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-64: 64px; --space-80: 80px;
  /* Off-scale values Airbnb actually uses */
  --space-6: 6px;    /* price row top margin */
  --space-10: 10px;  /* 3-up tile gap */
  --space-18: 18px;  /* heading to carousel */
  /* Named layout spacing */
  --inset-page:      24px;  /* side margin everywhere */
  --inset-float:     12px;  /* floating cards, search panels */
  --inset-chiprow:   16px;  /* filter chip row */
  --gap-card-stack:  40px;  /* between full-width cards */
  --gap-carousel-2:  12px;
  --gap-carousel-3:  10px;
  --gap-chip:         8px;
  --gap-chip-filter:  9px;
  --gap-photo-text-sm: 8px;
  --gap-photo-text-lg: 12px;
  --gap-text-rows:    2px;
  --inset-card-text:  4px;  /* text sits 4px in from photo edge */
  --inset-photo-ui:  12px;  /* badge/heart from photo edge */
  --pad-section-top: 32px;  /* detail page sections */
  --pad-section-bottom: 24px;
  --pad-list-row:    24px;  /* vertical padding of list rows */

  /* ---------- Radius (§1.4) ---------- */
  --radius-4:  4px;   /* photo counter */
  --radius-6:  6px;   /* small tag */
  --radius-8:  8px;   /* text input */
  --radius-12: 12px;  /* buttons, thumbnails */
  --radius-14: 14px;  /* badge on photo */
  --radius-16: 16px;  /* floating card, collapsed panel */
  --radius-20: 20px;  /* card photos, tiles */
  --radius-24: 24px;  /* results sheet, filter chip, map pill, expanded panel */
  --radius-28: 28px;  /* app results card (screenshot 2026-11-11) [S]; token xxlarge28 [T] */
  --radius-32: 32px;  /* bottom sheet / modal top corners */
  --radius-40: 40px;  /* category chip */
  --radius-pill: 9999px;
  --radius-round: 50%;

  /* ---------- Elevation (§1.5) ---------- */
  --shadow-1: 0 0 0 1px rgba(0,0,0,.02), 0 2px 4px rgba(0,0,0,.16);
  --shadow-2: 0 0 0 1px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.10);
  --shadow-3: 0 0 0 1px rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.10);
  --shadow-4: 0 0 0 1px rgba(0,0,0,.02), 0 4px 8px rgba(0,0,0,.08), 0 12px 30px rgba(0,0,0,.18);
  --shadow-5: 0 0 0 1px rgba(0,0,0,.02), 0 6px 8px rgba(0,0,0,.08), 0 16px 56px rgba(0,0,0,.18);
  --shadow-pill:      0 6px 20px rgba(0,0,0,.10);
  --shadow-panel:     0 0 0 1px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.20);
  --shadow-panel-flat:0 1px 2px rgba(0,0,0,.04), 0 4px 6px rgba(0,0,0,.04);
  --shadow-sheet:     0 8px 28px rgba(0,0,0,.28);
  --shadow-header:    0 0 6px rgba(0,0,0,.16);
  --shadow-control:   0 2px 4px rgba(0,0,0,.18);
  /* Category chip, simplified from 7-9 stacked shadows (§3.2) */
  --shadow-chip-raised: 0 1px 1px rgba(0,0,0,.15), 0 3px 2.5px rgba(0,0,0,.10), inset 0 1px 1.5px #FFFFFF;
  --shadow-chip-inset:  inset 0.5px 0.7px 2.5px rgba(0,0,0,.20), inset 1px 6px 6px 2px rgba(0,0,0,.10);

  /* ---------- Icons (§1.6) ---------- */
  --icon-24: 24px;  /* tab bar, heart, list icons */
  --icon-16: 16px;  /* header, round buttons, close */
  --icon-12: 12px;  /* chevrons, arrow chip */
  --icon-stroke:        1.5px;  /* default rendered stroke */
  --icon-stroke-strong: 2px;    /* close, search */

  /* ---------- Component sizes (§2, §3) ---------- */
  --size-tap:          44px;  /* tab hit height */
  --size-button:       48px;
  --size-button-sm:    40px;
  --size-icon-button:  40px;
  --size-heart:        32px;
  --size-arrow-chip:   28px;
  --size-search-pill:  56px;
  --size-chip:         40px;
  --size-chip-filter:  34px;
  --size-input:        54px;
  --size-thumb:        56px;
  --size-row-suggest:  72px;
  --size-panel-collapsed: 56px;
  --size-sheet-header: 48px;
  --size-map-pill:     38px;
  --size-dot:           6px;
  --tabbar-height:     65px;  /* [P] web: 1 border + 10 + 44 + 10 */
  --tabbar-item-width: 76.4px;/* 382 / 5: web slots are already 5-wide */
  --tabbar-bg:         #FFFFFF; /* [P] web is opaque; app blur unknown */
  /* [+] Clay icons deviate from Airbnb's 24px line icons (decided 2026-11-11):
     at 24px the clay detail is lost. 32px icon, no top padding, no gap, so the
     44px tab (0 + 32 + 0 + 12 label) and the 65px bar stay exactly as measured.
     The PNG's own transparent margin gives about 2.5px of visual gap. */
  --tabbar-icon:            32px;
  --tabbar-icon-gap:         0px;
  --tabbar-icon-idle-opacity: 0.6;  /* idle = greyscale + 60%; selected = full color */
  --sheet-top-gap:     12px;  /* full-height modal stops 12px below top */

  /* ---------- Aspect ratios (§3.3, §3.4) ---------- */
  --ratio-card-lg:  4 / 3;
  --ratio-card-sm:  20 / 19;
  --ratio-sheet-hero: 1.275 / 1;

  /* ---------- Motion (§4) ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter:    cubic-bezier(0.1, 0.9, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-inout:    cubic-bezier(0.455, 0.03, 0.515, 0.955);
  /* Springs: Airbnb's own linear() curves, numbers only */
  --ease-spring-standard: linear(0, 0.158, 0.415, 0.630, 0.780, 0.875, 0.932, 0.964, 0.982, 0.992, 0.997, 1);
  --ease-spring-fast:     linear(0, 0.186, 0.465, 0.682, 0.822, 0.905, 0.951, 0.976, 0.990, 0.996, 1);
  --dur-snappy:   294ms;
  --dur-fast:     452ms;
  --dur-standard: 584ms;
  --dur-slow:     746ms;
  --dur-press:    250ms;  /* button shape */
  --dur-color:    300ms;  /* button / tab color */
  --dur-chip:     220ms;
  --dur-chip-press: 120ms;
  --dur-header-shadow: 200ms;
  --dur-scrim-in:  400ms;
  --dur-scrim-out: 250ms;
  --dur-panel-in:  500ms;  /* search-modal panels, 50ms stagger */
  --stagger:        50ms;
  --dur-shimmer: 1050ms;   /* skeleton loop [P] */
  /* Press scales */
  --press-icon:  0.95;
  --press-heart: 0.92;
  --press-chip:  0.988;
  /* Standard buttons shrink exactly 2px each way: use the .press helper */

  /* ---------- Layers ---------- */
  --z-header: 100;
  --z-tabbar: 1;      /* web value; content scrolls under nothing */
  --z-float: 1999;    /* map pill, booking bar, toast */
  --z-sheet: 2000;
}

/* Base (§1.2) */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  line-height: var(--font-line-14-body);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* 2px press shrink for buttons (§4.3). Set --w and --h to the button size. */
.press { transition: transform var(--dur-press) var(--ease-standard); }
.press:active {
  transform: scaleX(calc((var(--w, 100) - 2) / var(--w, 100)))
             scaleY(calc((var(--h, 48) - 2) / var(--h, 48)));
}

/* Japanese: no global line-height override. A blanket :lang(ja) rule would
   change every line box and break the measured rhythm. JP strings in this app
   are short labels and day titles; body copy stays English. */