/* Post Lab · Design System v1.0 — tokens. Única fonte de cor, raio, espaço e fonte do site e do painel.
   Trocar a marca no futuro = mexer só neste arquivo. Âmbar é marca/foco/destaque, NUNCA "falhou". */
:root {
  --pl-ink: #18181B; --pl-ink-2: #2D2E32; --pl-paper: #F7F7F2; --pl-surface: #FFFFFF; --pl-surface-2: #F1F2EE;
  --pl-line: #E3E4DD; --pl-line-strong: #C9CAC2; --pl-muted: #66665F;  /* 5:1 sobre o papel (AA) */
  --pl-brand: #F4A62A; --pl-brand-strong: #D98700; --pl-brand-soft: #FFF1D6;
  --pl-blue: #2563EB; --pl-blue-soft: #E8F0FF;          /* agendado */
  --pl-yellow: #B45309; --pl-yellow-soft: #FFF2D8;      /* publicando */
  --pl-green: #15803D; --pl-green-soft: #E8F7ED;        /* publicado */
  --pl-red: #DC2626; --pl-red-soft: #FDECEC;            /* falhou */
  --pl-gray: #73736C; --pl-gray-soft: #ECEDE9;          /* vencido / cancelado */
  --pl-on-primary: #F7F7F2; --pl-primary: #18181B;      /* ação principal: grafite */
  --pl-radius-sm: 8px; --pl-radius-md: 12px; --pl-radius-lg: 16px; --pl-radius-xl: 24px; --pl-radius-pill: 999px;
  --pl-space-1: 4px; --pl-space-2: 8px; --pl-space-3: 12px; --pl-space-4: 16px; --pl-space-5: 20px;
  --pl-space-6: 24px; --pl-space-8: 32px; --pl-space-10: 40px; --pl-space-12: 48px; --pl-space-16: 64px;
  --pl-shadow-modal: 0 16px 48px rgba(24,24,27,.14);
  --pl-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pl-ink: #F7F7F2; --pl-ink-2: #D7D8D0; --pl-paper: #121314; --pl-surface: #1B1C1F; --pl-surface-2: #24262A;
    --pl-line: #34363A; --pl-line-strong: #50535A; --pl-muted: #A7A9A0;
    --pl-brand: #FFB53B; --pl-brand-strong: #FFC968; --pl-brand-soft: #3B2B16;
    --pl-blue: #83A9FF; --pl-blue-soft: #202E4D; --pl-yellow: #F3B25A; --pl-yellow-soft: #49351B;
    --pl-green: #65D48C; --pl-green-soft: #183B26; --pl-red: #FF7C7C; --pl-red-soft: #4B2525;
    --pl-gray: #A7A9A0; --pl-gray-soft: #34363A;
    --pl-primary: #F4A62A; --pl-on-primary: #18181B;    /* no escuro: âmbar com texto grafite */
    --pl-shadow-modal: 0 16px 36px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --pl-ink: #F7F7F2; --pl-ink-2: #D7D8D0; --pl-paper: #121314; --pl-surface: #1B1C1F; --pl-surface-2: #24262A;
  --pl-line: #34363A; --pl-line-strong: #50535A; --pl-muted: #A7A9A0;
  --pl-brand: #FFB53B; --pl-brand-strong: #FFC968; --pl-brand-soft: #3B2B16;
  --pl-blue: #83A9FF; --pl-blue-soft: #202E4D; --pl-yellow: #F3B25A; --pl-yellow-soft: #49351B;
  --pl-green: #65D48C; --pl-green-soft: #183B26; --pl-red: #FF7C7C; --pl-red-soft: #4B2525;
  --pl-gray: #A7A9A0; --pl-gray-soft: #34363A;
  --pl-primary: #F4A62A; --pl-on-primary: #18181B;
  --pl-shadow-modal: 0 16px 36px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* ── Temas trocáveis (21/10/2026): Claro (padrão) e Glass. As páginas fixam data-theme="light"; o tema vem de
   data-tema no <html>, gravado por /tema.js. Glass = as mesmas cores do DS em placas foscas sobre um campo
   âmbar/azul difuso; status e ação principal não mudam. ── */
:root {
  --pl-vidro: none;
  --pl-brilho: none;                                   /* filete de luz no topo das placas (só no glass) */
  --pl-fundo: none;
  --pl-font-display: var(--pl-font-sans);  /* DS v1.0: display na própria sans do sistema, peso 850 */
  --pl-shadow-1: 0 1px 2px rgba(24,24,27,.05);  /* DS: bordas antes de sombras */
  --pl-shadow-2: 0 2px 6px rgba(24,24,27,.06), 0 18px 40px rgba(24,24,27,.10);
}
:root[data-tema="glass"] {
  --pl-paper: #ECEEF2;
  --pl-surface: rgba(255,255,255,.60);
  --pl-surface-2: rgba(255,255,255,.42);
  --pl-line: rgba(24,24,27,.10);
  --pl-line-strong: rgba(24,24,27,.20);
  --pl-gray-soft: rgba(24,24,27,.07);
  --pl-vidro: blur(22px) saturate(175%);
  --pl-brilho: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.35);
  --pl-shadow-1: 0 1px 2px rgba(40,30,10,.06), 0 10px 30px rgba(40,30,10,.08);
  --pl-shadow-2: 0 2px 8px rgba(40,30,10,.08), 0 28px 60px rgba(40,30,10,.16);
  --pl-shadow-modal: 0 28px 70px rgba(40,30,10,.20);
  --pl-fundo:
    radial-gradient(58% 48% at 8% 6%, rgba(244,166,42,.50), transparent 70%),
    radial-gradient(46% 42% at 92% 12%, rgba(91,134,255,.34), transparent 70%),
    radial-gradient(50% 46% at 78% 96%, rgba(255,128,153,.26), transparent 72%),
    radial-gradient(44% 40% at 20% 92%, rgba(80,200,170,.20), transparent 72%),
    linear-gradient(180deg, #F5F1E8 0%, #E8ECF4 100%);
}
:root[data-tema="glass"] body { background: var(--pl-fundo) fixed, var(--pl-paper); }

/* Glass: a tinta e a ação principal saem do quase-preto e vão para um grafite azulado tirado do próprio campo de
   vidro (pedido do Vinicera em 21/10: o preto chapado destoava). O tema Claro continua no grafite #18181B do DS. */
:root[data-tema="glass"] {
  --pl-ink: #1D2232; --pl-ink-2: #3B4152; --pl-muted: #5C6273;
  --pl-primary: #1D2232; --pl-on-primary: #F7F7F2;
  --pl-vidro-escuro: linear-gradient(180deg, rgba(58,65,88,.94) 0%, rgba(29,34,50,.95) 100%);
}
:root[data-tema="glass"] :is(.btn-primario, .botao.primario, .login button) {
  background: var(--pl-vidro-escuro); color: #F7F7F2; border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(29,34,50,.18), 0 8px 22px -6px rgba(29,34,50,.38);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); }
:root[data-tema="glass"] :is(.btn-primario, .botao.primario):hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 3px rgba(244,166,42,.22), 0 10px 26px -6px rgba(29,34,50,.42); }
:root[data-tema="glass"] :is(.faixa-escura, .vitrine) { background: linear-gradient(160deg, rgba(43,49,68,.90), rgba(25,29,43,.92)) !important; }
::selection { background: var(--pl-brand-soft); color: var(--pl-ink); }
:root[data-tema="glass"] ::selection { background: rgba(244,166,42,.35); }

/* Seletor de tema (o mesmo componente no site, no login e no painel) */
.tema-seletor { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--pl-radius-md); background: var(--pl-surface-2);
  border: 1px solid var(--pl-line); backdrop-filter: var(--pl-vidro); -webkit-backdrop-filter: var(--pl-vidro); }
.tema-seletor button { border: 0; background: transparent; color: var(--pl-muted); font: 800 12px/1 var(--pl-font-sans);
  padding: 8px 13px; border-radius: 9px; cursor: pointer; transition: background .2s, color .2s; }
.tema-seletor button[aria-pressed="true"] { background: var(--pl-surface); color: var(--pl-ink); box-shadow: var(--pl-shadow-1), var(--pl-brilho); }
.tema-seletor button:focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 1px; }