/* =====================================================================
A Praia — design system (tokens + componentes compartilhados)
Incluir cedo no :
As regras-base têm especificidade baixa de propósito: são um padrão
que o CSS próprio de cada página ainda pode sobrescrever.
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
/* --- paleta de delivery --- */
--ap-primary: #FF6B35; /* tangerina */
--ap-primary-600: #E8442B; /* tomate */
--ap-primary-700: #C4361F;
--ap-primary-tint: #FFF1EA;
--ap-accent: #FFB300; /* sol */
/* --- neutros (leve viés quente) --- */
--ap-ink: #211C17;
--ap-muted: #6B6157;
--ap-line: #ECE3D8;
--ap-bg: #FAF6F1;
--ap-surface: #FFFFFF;
--ap-surface-2: #F6EFE6;
/* --- semânticas (separadas do accent) --- */
--ap-success: #1FA36B;
--ap-success-bg: #E3F4EC;
--ap-warning: #E08A00;
--ap-warning-bg: #FBEED6;
--ap-danger: #E23D2D;
--ap-danger-bg: #FBE3E0;
--ap-info: #2A7DE1;
--ap-info-bg: #E1EDFB;
/* --- forma --- */
--ap-radius: 14px;
--ap-radius-sm: 10px;
--ap-radius-pill: 999px;
--ap-shadow-sm: 0 2px 8px rgba(33, 28, 23, .08);
--ap-shadow: 0 8px 24px rgba(33, 28, 23, .12);
/* --- ritmo --- */
--ap-space-1: 4px;
--ap-space-2: 8px;
--ap-space-3: 12px;
--ap-space-4: 16px;
--ap-space-5: 24px;
--ap-space-6: 32px;
--ap-gradient: linear-gradient(135deg, #FF6B35 0%, #E8442B 100%);
--ap-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* ---------- base compartilhada ---------- */
html { -webkit-text-size-adjust: 100%; }
/* tipografia única em todo o app (só a família — não mexe em tamanhos/layout) */
body, button, input, select, textarea { font-family: var(--ap-font) !important; }
img, svg, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--ap-line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ap-line); border-radius: var(--ap-radius-pill); }
*::-webkit-scrollbar-track { background: transparent; }
::selection { background: var(--ap-primary); color: #fff; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 3px solid rgba(255, 107, 53, .45);
outline-offset: 2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ---------- componentes utilitários (use quando quiser padronizar) ---------- */
.ap-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 20px; border: 0; border-radius: var(--ap-radius-sm);
font: 600 15px/1 var(--ap-font); cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.ap-btn:hover { transform: translateY(-1px); }
.ap-btn:active { transform: translateY(0); }
.ap-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ap-btn--primary { background: var(--ap-gradient); color: #fff; box-shadow: var(--ap-shadow-sm); }
.ap-btn--solid { background: var(--ap-primary-600); color: #fff; }
.ap-btn--ghost { background: var(--ap-primary-tint); color: var(--ap-primary-700); }
.ap-btn--outline { background: transparent; color: var(--ap-primary-700); box-shadow: inset 0 0 0 2px var(--ap-primary); }
.ap-btn--danger { background: var(--ap-danger); color: #fff; }
.ap-btn--block { display: flex; width: 100%; }
.ap-card {
background: var(--ap-surface); border: 1px solid var(--ap-line);
border-radius: var(--ap-radius); box-shadow: var(--ap-shadow-sm);
padding: var(--ap-space-5);
}
.ap-field {
width: 100%; padding: 12px 14px; font: 400 15px/1.3 var(--ap-font);
color: var(--ap-ink); background: var(--ap-surface);
border: 2px solid var(--ap-line); border-radius: var(--ap-radius-sm);
transition: border-color .15s ease;
}
.ap-field:focus { outline: none; border-color: var(--ap-primary); }
.ap-label { display: block; font: 600 13px/1 var(--ap-font); color: var(--ap-ink); margin-bottom: 6px; }
.ap-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px; border-radius: var(--ap-radius-pill);
font: 700 11px/1.2 var(--ap-font); text-transform: uppercase; letter-spacing: .04em;
background: var(--ap-surface-2); color: var(--ap-muted);
}
.ap-badge--pending { background: var(--ap-warning-bg); color: var(--ap-warning); }
.ap-badge--accepted { background: var(--ap-info-bg); color: var(--ap-info); }
.ap-badge--preparing { background: var(--ap-info-bg); color: var(--ap-info); }
.ap-badge--on_route { background: var(--ap-primary-tint); color: var(--ap-primary-700); }
.ap-badge--delivered { background: var(--ap-success-bg); color: var(--ap-success); }
.ap-badge--cancelled { background: var(--ap-danger-bg); color: var(--ap-danger); }
.ap-appbar {
display: flex; align-items: center; gap: 12px;
padding: 16px 20px; color: #fff; background: var(--ap-gradient);
}
.ap-appbar h1 { font: 800 20px/1 var(--ap-font); margin: 0; }
.ap-empty {
text-align: center; color: var(--ap-muted); padding: 40px 20px;
font: 500 15px/1.5 var(--ap-font);
}
.ap-empty .ap-empty__icon { font-size: 44px; display: block; margin-bottom: 10px; }
/* =====================================================================
RESPONSIVO — adequação a todos os tamanhos de celular
Regras com !important porque o