/* PackTrack: o que tokens.json não declara (movimento, foco, números tabulares) e as classes dos componentes. */

:root { --pt-motion-fast: 160ms; --pt-motion-standard: 240ms; }
@media (prefers-reduced-motion: reduce) { :root { --pt-motion-fast: 0ms; --pt-motion-standard: 0ms; } }

body { margin: 0; font-family: var(--font-sans); background: var(--pt-background); color: var(--pt-text); }

.pt-focus:focus-visible,
.pt-button:focus-visible,
.pt-chip:focus-visible,
.pt-nav__item:focus-visible { outline: 2px solid var(--pt-focus); outline-offset: 3px; }
.pt-code { font-variant-numeric: tabular-nums; }

/* Ícones: SVG inline do kit, 24 × 24, traço 2, herdam a cor do texto. */
.pt-icon { width: 24px; height: 24px; flex: none; }
.pt-icon--sm { width: 16px; height: 16px; }

/* Apoio de layout para os exemplos. */
.pt-row { display: flex; flex-wrap: wrap; gap: var(--pt-space-12); align-items: center; padding: var(--pt-space-24); }
.pt-stack { display: grid; gap: var(--pt-space-16); padding: var(--pt-space-24); max-width: 360px; }

/* Button */
.pt-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--pt-space-8); min-height: var(--pt-space-48); padding: 0 var(--pt-space-24); border: 0; border-radius: var(--pt-radius-button); background: var(--pt-primary); color: var(--pt-on-primary); font: 600 14px/20px var(--font-sans); text-decoration: none; cursor: pointer; transition: filter var(--pt-motion-fast); }
.pt-button:hover { filter: brightness(.95); }
.pt-button:active { filter: brightness(.9); }
.pt-button--secondary { background: none; color: var(--pt-text); box-shadow: inset 0 0 0 2px var(--pt-text); }
.pt-button--pill { min-height: 40px; padding: 0 var(--pt-space-16); border-radius: var(--pt-radius-pill); }
.pt-button--block { display: flex; width: 100%; }
.pt-button:disabled, .pt-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }

/* FilterChip */
.pt-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--pt-space-16); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-pill); background: var(--pt-surface); color: var(--pt-text); font: 600 14px/20px var(--font-sans); cursor: pointer; transition: background-color var(--pt-motion-fast), color var(--pt-motion-fast); }
.pt-chip[aria-pressed="true"] { background: var(--pt-text); border-color: var(--pt-text); color: var(--pt-surface); }
[data-theme="dark"] .pt-chip[aria-pressed="true"] { background: var(--pt-primary); border-color: var(--pt-primary); color: var(--pt-on-primary); }

/* StatusBadge */
.pt-status { display: inline-flex; align-items: center; gap: var(--pt-space-4); padding: var(--pt-space-4) var(--pt-space-12); border-radius: var(--pt-radius-pill); font: 600 12px/18px var(--font-sans); white-space: nowrap; }
.pt-status--waiting { background: var(--pt-waiting-bg); color: var(--pt-waiting-fg); box-shadow: inset 0 0 0 1px var(--pt-waiting-fg); }
.pt-status--transit { background: var(--pt-transit-bg); color: var(--pt-transit-fg); }
.pt-status--out-for-delivery { background: var(--pt-out-for-delivery-bg); color: var(--pt-out-for-delivery-fg); }
.pt-status--delivered { background: var(--pt-delivered-bg); color: var(--pt-delivered-fg); }
.pt-status--attention { background: var(--pt-attention-bg); color: var(--pt-attention-fg); }
.pt-status--error { background: var(--pt-error-bg); color: var(--pt-error-fg); }

/* DeliveryCard */
.pt-delivery { display: grid; grid-template-columns: auto 1fr; gap: var(--pt-space-12); padding: var(--pt-space-16); background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-card); color: var(--pt-text); }
.pt-delivery__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pt-radius-button); background: var(--pt-background); }
.pt-delivery__title { margin: 0; font: 700 16px/24px var(--font-sans); }
.pt-delivery__store { margin: 0; font: 500 12px/18px var(--font-sans); color: var(--pt-text-secondary); }
.pt-delivery__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-12); }
.pt-delivery__eta { font: 500 12px/18px var(--font-sans); color: var(--pt-text-secondary); }

/* SummaryPanel */
.pt-summary { display: flex; margin: 0; padding: var(--pt-space-16) var(--pt-space-24); border-radius: var(--pt-radius-card); background: var(--pt-primary); color: var(--pt-on-primary); }
.pt-summary__item { flex: 1; margin: 0; }
.pt-summary__item + .pt-summary__item { padding-left: var(--pt-space-24); border-left: 1px solid var(--pt-on-primary); }
.pt-summary__value { display: block; margin: 0; font: 700 28px/36px var(--font-sans); font-variant-numeric: tabular-nums; }
.pt-summary__label { display: block; font: 600 12px/18px var(--font-sans); }

/* ForecastCard */
.pt-forecast { padding: var(--pt-space-16); background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-card); color: var(--pt-text); }
.pt-forecast__label { margin: 0; font: 600 12px/18px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pt-text-secondary); }
.pt-forecast__value { margin: 0; font: 700 20px/28px var(--font-sans); }
.pt-forecast__source { margin: 0; font: 500 12px/18px var(--font-sans); color: var(--pt-text-secondary); }

/* Timeline */
.pt-timeline { list-style: none; margin: 0; padding: 0; color: var(--pt-text); }
.pt-timeline__item { position: relative; padding: 0 0 var(--pt-space-24) var(--pt-space-32); }
.pt-timeline__item:last-child { padding-bottom: 0; }
.pt-timeline__item::before { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--pt-text-secondary); border-radius: var(--pt-radius-pill); background: var(--pt-surface); }
.pt-timeline__item::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; border-radius: 1px; background: var(--pt-border); }
.pt-timeline__item:last-child::after { display: none; }
.pt-timeline__item[aria-current="step"]::before { left: 0; top: 2px; width: 16px; height: 16px; border-color: var(--pt-text); background: var(--pt-primary); }
.pt-timeline__title { margin: 0; font: 600 14px/20px var(--font-sans); }
.pt-timeline__item[aria-current="step"] .pt-timeline__title { font-weight: 700; }
.pt-timeline__meta { margin: 0; font: 500 12px/18px var(--font-sans); color: var(--pt-text-secondary); font-variant-numeric: tabular-nums; }

/* SourceNote */
.pt-source { display: flex; align-items: center; gap: var(--pt-space-12); padding: var(--pt-space-12) var(--pt-space-16); background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-card); color: var(--pt-text); }
.pt-source__time { margin: 0; font: 700 12px/18px var(--font-sans); font-variant-numeric: tabular-nums; }
.pt-source__origin { margin: 0; font: 500 12px/18px var(--font-sans); color: var(--pt-text-secondary); }

/* Notification: painel escuro nos dois temas; o elemento carrega data-theme="dark". */
.pt-notification { display: flex; align-items: center; gap: var(--pt-space-24); padding: var(--pt-space-24); border-radius: var(--pt-radius-panel); background: var(--pt-surface); color: var(--pt-text); }
.pt-notification .pt-icon { color: var(--pt-primary); }
.pt-notification__title { margin: 0; font: 700 20px/28px var(--font-sans); }
.pt-notification__body { margin: 0; font: 400 16px/24px var(--font-sans); color: var(--pt-text-secondary); }

/* BottomNav */
.pt-nav { display: flex; padding: var(--pt-space-8) 0; border-top: 1px solid var(--pt-border); background: var(--pt-background); }
.pt-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pt-space-4); min-height: var(--pt-space-48); color: var(--pt-text-secondary); font: 500 12px/18px var(--font-sans); text-decoration: none; }
.pt-nav__item[aria-current="page"] { color: var(--pt-text); font-weight: 700; }

/* Route: painel escuro nos dois temas; o elemento carrega data-theme="dark". */
.pt-route { position: relative; margin: 0; padding: var(--pt-space-24); border-radius: var(--pt-radius-panel); background: var(--pt-surface); color: var(--pt-text); }
.pt-route__title { margin: 0; font: 600 20px/28px var(--font-sans); }
.pt-route svg { display: block; width: 100%; height: auto; }
.pt-route__line { fill: none; stroke: var(--pt-primary); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.pt-route__end { fill: var(--pt-primary); }
.pt-route__event { fill: var(--pt-text); }