/* Canoe Design System 2.0 — global visual rhythm & motion foundation.
   Deliberately scoped to shared primitives; feature-specific layouts remain untouched. */
:root{
  --ds-space-1:4px;
  --ds-space-2:8px;
  --ds-space-3:12px;
  --ds-space-4:16px;
  --ds-space-5:20px;
  --ds-space-6:24px;
  --ds-radius-sm:10px;
  --ds-radius-md:16px;
  --ds-radius-lg:22px;
  --ds-duration-fast:160ms;
  --ds-duration-normal:240ms;
  --ds-duration-slow:360ms;
  --ds-ease-standard:cubic-bezier(.2,.75,.25,1);
  --ds-ease-emphasized:cubic-bezier(.22,1,.36,1);
  --ds-shadow-soft:0 2px 8px rgba(15,18,28,.045),0 8px 24px rgba(15,18,28,.035);
  --ds-shadow-float:0 8px 24px rgba(15,18,28,.075),0 2px 6px rgba(15,18,28,.045);
}
html[data-theme="dark"]{
  --ds-shadow-soft:0 2px 8px rgba(0,0,0,.16),0 8px 24px rgba(0,0,0,.12);
  --ds-shadow-float:0 8px 24px rgba(0,0,0,.24),0 2px 6px rgba(0,0,0,.16);
}

/* Stable numeric alignment without changing the chosen typeface. */
time, [data-tabular-nums], .tabular-nums,
.floor-number, .unread-count, .count-number{
  font-variant-numeric:tabular-nums lining-nums;
}

/* Balanced wrapping only for short, explicit heading elements. */
h1,h2,h3,.page-title,.section-title,[data-balanced-title]{
  text-wrap:balance;
}

/* Consistent focus feedback and tactile response for native buttons.
   No global transition on all elements: that can animate layout and hurt scrolling. */
button{
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--ds-duration-fast) var(--ds-ease-standard),
             opacity var(--ds-duration-fast) ease,
             box-shadow var(--ds-duration-normal) var(--ds-ease-standard),
             background-color var(--ds-duration-normal) ease,
             color var(--ds-duration-normal) ease;
}
button:active:not(:disabled){ transform:scale(.975); }
button:disabled{ cursor:default; }
:where(button,a,[role="button"],input,textarea,select):focus-visible{
  outline:2px solid rgba(var(--tint-rgb),.42);
  outline-offset:3px;
}

/* Hover is limited to devices with a real pointer; touch devices keep first-tap behavior. */
@media (hover:hover) and (pointer:fine){
  button:hover:not(:disabled){ box-shadow:var(--ds-shadow-soft); }
}

/* Respect reduced-motion preferences while preserving immediate state changes. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}