/*
 * Binds the tm-motion colour variables to the app's existing palette (apps/web/tailwind.config.ts).
 * Only --tm-* variables are defined here and every value is a colour the app already uses: no new colours.
 * Unlayered, so it wins over the defaults inside tm-motion.css (@layer tm-motion).
 */
:root {
  --tm-accent:    #DE7F70; /* coral */
  --tm-warm:      #DE7F70; /* coral */
  --tm-success:   #7C9E6A; /* green */
  --tm-gold:      #D1A543; /* yellow */
  --tm-pink:      #F6C9D3; /* sakura */
  --tm-sea:       #6FA5BD; /* water */
  --tm-surface:   #FFFCF6; /* paper */
  --tm-bg:        #FFFCF6; /* paper */
  --tm-ink:       #3E3A39; /* ink */
  --tm-muted:     color-mix(in srgb, #3E3A39 60%, #FFFCF6); /* ink, softened */
  --tm-line:      #E5D3BC; /* asa */
  --tm-on-accent: #FFFCF6; /* paper */
}

/* ---- day tabs ---- */
/* The tabs sit in their own stacking context, so their z-index cannot lift them above the sheets that open over the page. */
.tm-pill-host { isolation: isolate; }
/* The indicator is as round as the tabs and glides without overshooting (the module's default spring bounced past the tab). */
.tm-pill {
  border-radius: 9999px;
  transition: transform .26s cubic-bezier(.22,.8,.3,1), width .26s cubic-bezier(.22,.8,.3,1), height .2s;
}
/* The day's content slides out the way you swiped, then the new day slides in from that side. Only the content moves: no page snapshot, nothing covers the page. */
/* fully invisible by 60%: if the page is busy drawing the next day, the last frame it shows is empty, not a half-faded copy */
@keyframes tm-day-out { 60% { opacity: 0; } 100% { opacity: 0; transform: translateX(calc(var(--tm-dir, 1) * -40px)); } }
@keyframes tm-day-in  { from { opacity: 0; transform: translateX(calc(var(--tm-dir, 1) * 40px)); } }
.tm-day-out { animation: tm-day-out .15s cubic-bezier(.4,0,.8,.6) both; }
.tm-day-in  { animation: tm-day-in .34s cubic-bezier(.22,.8,.3,1) both; will-change: transform, opacity; }
/* bottom sheets: the panel rises from the bottom edge, the backdrop fades in */
@keyframes tm-sheet-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes tm-sheet-fade { from { opacity: 0; } }
.tm-sheet-up { animation: tm-sheet-up .32s cubic-bezier(.22,.8,.3,1) both; }
.tm-sheet-fade { animation: tm-sheet-fade .25s ease-out both; }
@media (prefers-reduced-motion: reduce) { .tm-sheet-up, .tm-sheet-fade { animation: none; } }

/* tm-shuttle's van: the module's own navy is not in the palette, so the van uses the palette's ink and paper tones */
:root {
  --tm-shuttle-body: var(--tm-ink);
  --tm-shuttle-glass: color-mix(in srgb, var(--tm-ink) 55%, var(--tm-bg));
  --tm-shuttle-chrome: var(--tm-line);
}