/* ==========================================================================
   Lojas Próximas · TOKENS
   Única fonte de cores/medidas. Claro = :root · Escuro = [data-theme="dark"].
   Nenhum outro arquivo CSS tem cor "solta": tudo usa estas variáveis.
   Para mudar a aparência do site inteiro, mexa só aqui.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Marca (iguais nos dois temas) */
  --navy: #073b60;
  --orange: #ff941e;
  --orange-hi: #ffa83f;
  --red-orange: #f0522b;
  --on-orange: #2a1700;
  --on-brand: #fff;

  /* Papéis de cor */
  --brand: #073b60;            /* fundo de botão primário */
  --brand-hi: #0b4a76;         /* topo do gradiente / realce */
  --brand-hover: #062f4e;
  --heading: #073b60;          /* títulos e texto de destaque */

  /* Superfícies */
  --bg: #fff;
  --surface: #fff;             /* cartões, busca, menu */
  --surface-end: #f6f9fb;      /* fim do gradiente dos cartões */
  --surface-panel: rgba(255,255,255,.94);
  --surface-2: #fff;           /* chips, botão fantasma, logo de loja */
  --surface-soft: #eef3f7;     /* ícones, tags */
  --surface-hover: #f1f5f8;
  --surface-note: #f4f7fa;
  --surface-pressed: #e6edf3;
  --hi: #fff;                  /* brilho interno (inset) dos cartões */

  /* Linhas */
  --line: rgba(16,43,66,.14);
  --line-soft: rgba(16,43,66,.1);
  --line-faint: rgba(16,43,66,.07);
  --panel-line: rgba(255,255,255,.9);

  /* Texto */
  --ink: #102b42;
  --text-2: #3a5163;
  --muted: #536474;
  --faint: #6a7a88;
  --faint-2: #7a8a97;          /* placeholder, notas */
  --eyebrow: #557185;

  /* Sombras */
  --shadow-sm: 0 8px 22px rgba(11,39,59,.08);
  --shadow-md: 0 22px 70px rgba(11,39,59,.09), 0 2px 10px rgba(11,39,59,.045);
  --shadow-pop: 0 24px 70px rgba(11,39,59,.18), 0 2px 10px rgba(11,39,59,.06);
  --shadow-ctl: 0 6px 22px rgba(11,39,59,.07);
  --shadow-cta: 0 10px 24px rgba(7,59,96,.18);
  --shadow-lift: 0 16px 32px rgba(11,39,59,.18);

  /* Estados (verde / laranja / neutro) */
  --ok: #2f8268;       --ok-bg: #e6f2ee;
  --warn: #b4690f;     --warn-bg: #fff1e0;
  --bad: #b6532f;
  --star: #d98a1c;
  --mark-bg: #ffe9cc;
  --prod: #c9741a;     --prod-bg: #fff1e0;
  --door-ico-bg: #e8f0f6;

  /* Fundo da página */
  --doodle-opacity: 1;
  --logo-bg: transparent;
  --logo-pad: 0;
  --logo-radius: 0;
  --logo-shadow: none;

  /* Quadro das soluções (ilustração/foto) */
  --tile-mix: 100%; --tile-base: transparent;
  --dot: rgba(255,255,255,.75);
  --art-shadow: rgba(11,39,59,.16);

  /* Linha do tempo */
  --tl-line: #cdd8e2;
  --tl-node-bg: #fff;
  --tl-node-fg: #7a8a97;
  --dot-off: #dfe7ee;

  /* Interruptor de tema */
  --sw-track: #dbeaf6; --sw-border: rgba(16,43,66,.14); --sw-thumb: #fff; --sw-icon: #5b7a93;

  /* Bloco final (CTA escuro) */
  --final-from: #0a4570; --final-to: #062f4e;

  /* Medidas */
  --wrap: min(1160px, calc(100% - 48px));
  --radius-panel: 28px;
}

/* Tons dos cartões (ecossistema / quem participa / qualquer cartão colorido) */
.tone-azul    { --cta-bg:#073b60; --cta-fg:#fff;    --icon-bg:#e8f1f8; --icon-fg:#073b60; --wash:#f1f6fa; }
.tone-verde   { --cta-bg:#2f7d66; --cta-fg:#fff;    --icon-bg:#e3f1ec; --icon-fg:#2a7560; --wash:#f0f7f4; }
.tone-laranja { --cta-bg:#ff941e; --cta-fg:#073b60; --icon-bg:#fff0dc; --icon-fg:#c7700a; --wash:#fff8ee; }
.tone-laranja2{ --cta-bg:#c9441a; --cta-fg:#fff;    --icon-bg:#fbe6de; --icon-fg:#b93d16; --wash:#fdf3ef; }
.tone-roxo    { --cta-bg:#65559f; --cta-fg:#fff;    --icon-bg:#ece9f6; --icon-fg:#5a4a96; --wash:#f6f4fa; }

/* ============================ MODO ESCURO ============================ */
[data-theme="dark"] {
  color-scheme: dark;

  --brand: #1d6aa3;
  --brand-hi: #2380c4;
  --brand-hover: #2380c4;
  --heading: #a8d3f3;

  --bg: #0b1520;
  --surface: #172839;
  --surface-end: #132232;
  --surface-panel: rgba(18,31,44,.94);
  --surface-2: #1c3043;
  --surface-soft: #1c3043;
  --surface-hover: #1c3043;
  --surface-note: #172839;
  --surface-pressed: #24394e;
  --hi: rgba(255,255,255,.04);

  --line: rgba(255,255,255,.1);
  --line-soft: rgba(255,255,255,.1);
  --line-faint: rgba(255,255,255,.1);
  --panel-line: rgba(255,255,255,.1);

  --ink: #e8eff6;
  --text-2: #b4c4d2;
  --muted: #9db0c1;
  --faint: #8ea2b4;
  --faint-2: #7f93a5;
  --eyebrow: #8fb0c9;

  --shadow-sm: 0 8px 22px rgba(0,0,0,.4);
  --shadow-md: 0 22px 70px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25);
  --shadow-pop: 0 24px 70px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.25);
  --shadow-ctl: 0 6px 22px rgba(0,0,0,.35);
  --shadow-cta: 0 10px 24px rgba(0,0,0,.4);
  --shadow-lift: 0 16px 32px rgba(0,0,0,.55);

  --ok: #6fd0b0;       --ok-bg: #16342b;
  --warn: #ffb257;     --warn-bg: #3a2a14;
  --bad: #ff9a74;
  --mark-bg: #5a3d12;
  --prod: #ffb257;     --prod-bg: #3a2a14;
  --door-ico-bg: #1c3043;

  --doodle-opacity: .32;
  --logo-bg: #f4f8fb;
  --logo-pad: 4px 10px;
  --logo-radius: 18px;
  --logo-shadow: 0 6px 22px rgba(0,0,0,.35);
  --tile-mix: 20%; --tile-base: #101c28;
  --dot: rgba(255,255,255,.07);
  --art-shadow: rgba(0,0,0,.4);

  --tl-line: #35495c;
  --tl-node-bg: #172839;
  --tl-node-fg: #8ea2b4;
  --dot-off: #2a3f53;

  --sw-track: #1c3550; --sw-border: rgba(255,255,255,.14); --sw-thumb: #0b1520; --sw-icon: #9fb6cc;

  --final-from: #0f3d63; --final-to: #072a47;
}
[data-theme="dark"] .tone-azul    { --cta-bg:#1d6aa3; --cta-fg:#fff;    --icon-bg:#1c3a54; --icon-fg:#8cc7f3; --wash:#162c40; }
[data-theme="dark"] .tone-verde   { --cta-bg:#2f7d66; --cta-fg:#fff;    --icon-bg:#17372d; --icon-fg:#6fd0b0; --wash:#15302a; }
[data-theme="dark"] .tone-laranja { --cta-bg:#ff941e; --cta-fg:#1d1200; --icon-bg:#3a2a14; --icon-fg:#ffb257; --wash:#2e2415; }
[data-theme="dark"] .tone-laranja2{ --cta-bg:#d9531f; --cta-fg:#fff;    --icon-bg:#40231a; --icon-fg:#ff9a74; --wash:#2e1f19; }
[data-theme="dark"] .tone-roxo    { --cta-bg:#7766b8; --cta-fg:#fff;    --icon-bg:#2a2542; --icon-fg:#b9aef0; --wash:#241f38; }

/* ==================== MARCA ALTERNATIVA: AGÊNCIA ====================
   Mesmas cores, prioridades invertidas: laranja = ação, azul = estrutura.
   Ativar com <html data-brand="agencia">. Vale nos dois temas. */
[data-brand="agencia"] {
  --brand: #ff941e; --brand-hi: #ffa83f; --brand-hover: #f08a0c;
  --on-brand: #2a1700;
  --shadow-cta: 0 10px 24px rgba(240,138,12,.28);
}
[data-brand="agencia"][data-theme="dark"] { --on-brand: #1d1200; --shadow-cta: 0 10px 24px rgba(0,0,0,.4); }