/* =====================================================================
 * assets/css/ridee-ds.css — DESIGN SYSTEM RIDEE (26/08/2026)
 * ---------------------------------------------------------------------
 * Pedido do dono: "tem que ser padronizado no /go e /marketplace as cores,
 * fontes, espaçamentos etc — é a mesma marca".
 *
 * Este arquivo é a FONTE ÚNICA dos tokens da marca. É carregado pelos dois
 * apps do cliente (/go e /marketplace) ANTES das folhas de cada um, que
 * apenas consomem os tokens daqui.
 *
 * O que é comum a toda a marca: a família tipográfica e a escala, a paleta
 * (amarelo, tinta, cinzas, estados), os raios, as sombras e o espaçamento.
 * O que é de cada superfície: QUAL papel usar — o /go é escuro (padrão do
 * app do motoboy, sobre o mapa) e a vitrine é clara (comida). Isso não é
 * inconsistência: é o mesmo sistema aplicado a dois contextos, como o iFood
 * faz com o app e o mapa da entrega.
 *
 * ATENÇÃO: nunca escrever a sequência asterisco+barra dentro de comentário.
 * ===================================================================== */

:root {
  /* ── tipografia ────────────────────────────────────────────────────── */
  --rd-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rd-fs-11: 11px;   /* etiqueta */
  --rd-fs-12: 12px;   /* apoio */
  --rd-fs-13: 13px;   /* secundário */
  --rd-fs-14: 14px;   /* corpo */
  --rd-fs-15: 15px;   /* corpo forte */
  --rd-fs-17: 17px;   /* título de seção */
  --rd-fs-21: 21px;   /* título de tela */
  --rd-fw-regular: 600;
  --rd-fw-bold: 800;
  --rd-fw-black: 900;

  /* ── marca ─────────────────────────────────────────────────────────── */
  --rd-brand: #F9D515;          /* amarelo Ridee — AÇÃO e dinheiro */
  --rd-brand-2: #FFB800;
  --rd-brand-ink: #14161C;      /* tinta sobre o amarelo */
  --rd-brand-soft: rgba(249, 213, 21, .14);

  /* ── estados (iguais nos dois apps) ────────────────────────────────── */
  --rd-ok: #0F9D63;
  --rd-ok-soft: #E7F7EF;
  --rd-warn: #E8A200;
  --rd-warn-soft: #FBF3DC;
  --rd-danger: #E5484D;
  --rd-danger-soft: #FDECEC;
  --rd-info: #1D4ED8;           /* SÓ origem no mapa — nunca link/ação */

  /* ── espaçamento (escala de 4) ─────────────────────────────────────── */
  --rd-sp-1: 4px;
  --rd-sp-2: 8px;
  --rd-sp-3: 12px;
  --rd-sp-4: 16px;
  --rd-sp-5: 20px;
  --rd-sp-6: 24px;

  /* ── raios ─────────────────────────────────────────────────────────── */
  --rd-r-sm: 12px;
  --rd-r-md: 14px;
  --rd-r-lg: 18px;
  --rd-r-xl: 22px;
  --rd-r-pill: 999px;

  /* ── alvo de toque ─────────────────────────────────────────────────── */
  --rd-tap: 44px;
}

/* ── PAPEL CLARO (vitrine, telas de conteúdo) ────────────────────────── */
:root {
  --rd-paper: #F6F7F9;
  --rd-surface: #FFFFFF;
  --rd-ink: #0B0F19;
  --rd-ink-2: rgba(11, 15, 25, .58);
  --rd-ink-3: rgba(11, 15, 25, .38);
  --rd-line: rgba(11, 15, 25, .08);
  --rd-sh-sm: 0 1px 3px rgba(11, 15, 25, .08);
  --rd-sh-md: 0 4px 16px rgba(11, 15, 25, .10);
  --rd-sh-lg: 0 10px 30px rgba(11, 15, 25, .16);
  /* LINK/AÇÃO textual: tinta forte, nunca azul (o azul é do pino de origem) */
  --rd-link: #0B0F19;
  --rd-link-soft: rgba(11, 15, 25, .58);
}

/* ── PAPEL ESCURO (/go, sobre o mapa — mesmo do app do motoboy) ──────── */
[data-ui="v2"] {
  --rd-paper: #0E1014;
  --rd-surface: #161A21;
  --rd-surface-2: #1C1F28;
  --rd-ink: #FFFFFF;
  --rd-ink-2: rgba(255, 255, 255, .64);
  --rd-ink-3: rgba(255, 255, 255, .40);
  --rd-line: rgba(255, 255, 255, .09);
  --rd-sh-sm: 0 1px 3px rgba(0, 0, 0, .40);
  --rd-sh-md: 0 4px 16px rgba(0, 0, 0, .40);
  --rd-sh-lg: 0 14px 34px rgba(0, 0, 0, .34);
  --rd-link: var(--rd-brand);
  --rd-link-soft: rgba(255, 255, 255, .64);
}

/* ── a fonte da marca vale para tudo que escreve texto ───────────────── */
html, body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, span, label, small, b, strong, a, li, td, th {
  font-family: var(--rd-font);
}

/* ── links: a marca não usa azul de navegador ────────────────────────── */
a { color: inherit; }

/* ── controles não podem herdar a cor de destaque do SISTEMA ──────────────
   No iOS, <button> e afins SEM `color` explícito são pintados com o azul de
   destaque do aparelho — foi de lá que veio o "texto azul" no "Toque para
   localizar" e nos botões dentro das telas (no computador aparecia preto,
   por isso só se via no iPhone). Herdar do contexto resolve na raiz. */
button, input, select, textarea,
[type="button"], [type="submit"], [type="reset"] {
  color: inherit;
  font-family: inherit;
}
/* aba da barra de baixo é <a> quando navega: sem risco de sublinhado */
.bnTab, a.bnTab, .bnTab:hover, .bnTab:focus { text-decoration: none; }