/* ---------------------------------------------------------------------------
   Tokens do Notion Design System
   (VoltAgent/awesome-design-md → design-md/notion/DESIGN.md)

   O spec original descreve um site institucional (hero navy, tabela de
   pricing). Aqui só entrou o que se traduz para um app de leitura: paleta de
   superfície e texto, escala tipográfica, escala de 4px, raios, cards, chips e
   breakpoints.

   Dois pontos em que estendi o spec, porque ele não cobre:
   - Ele define só o modo claro. O tema escuro abaixo é derivado (mesma
     hierarquia de superfícies, roxo clareado para manter contraste no escuro).
   - Os "pastel card tints" são listados por nome (peach, rose, mint...) sem
     hex. Os valores abaixo são minha interpretação desses nomes.
--------------------------------------------------------------------------- */

:root {
  /* Marca */
  --purple: #5645d4;
  --purple-pressed: #4534b3;
  --purple-deep: #3a2a99;
  --link: #0075de;

  /* Superfícies e texto */
  --canvas: #ffffff;
  --surface: #f6f5f4;
  --ink: #1a1a1a;
  --charcoal: #37352f;
  --steel: #787671;
  --border: #e8e7e4;

  /* Semântico */
  --success: #1aae39;
  --warning: #dd5b00;
  --error: #e03131;

  /* Pastel tints (nomes do spec, hex meu) */
  --tint-lavender: #efeafc;
  --tint-sky: #e6f1fb;
  --tint-mint: #e4f4ea;
  --tint-peach: #fdeee3;
  --tint-yellow: #fdf5dd;
  --tint-cream: #f7f4ee;
  --tint-rose: #fceaf2;
  --tint-gray: #f1f0ee;
  --tint-ink: var(--charcoal);

  /* Escala de espaçamento, base 4px */
  --xxs: 4px;  --xs: 8px;   --sm: 12px;  --md: 16px;
  --lg: 20px;  --xl: 24px;  --xxl: 32px; --xxxl: 40px;
  --section: 64px;

  /* Raios */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px;
  --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;

  --shadow-card: rgba(15, 15, 15, 0.06) 0px 2px 6px -1px;
  --shadow-float: rgba(15, 15, 15, 0.12) 0px 12px 28px -8px;

  --sidebar-w: 260px;
  --container: 1280px;
  --reading: 720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --purple: #8577e8;
    --purple-pressed: #9d92ee;
    --purple-deep: #6b5cdd;
    --link: #5aa9f0;

    --canvas: #191919;
    --surface: #202020;
    --ink: #ebebeb;
    --charcoal: #d4d3d0;
    --steel: #9b9a97;
    --border: #2f2f2f;

    --tint-lavender: #2a2440;
    --tint-sky: #1e2c3a;
    --tint-mint: #1e3128;
    --tint-peach: #3a2a20;
    --tint-yellow: #3a3320;
    --tint-cream: #2b2823;
    --tint-rose: #37232e;
    --tint-gray: #262625;
    --tint-ink: var(--ink);

    --shadow-card: rgba(0, 0, 0, 0.35) 0px 2px 6px -1px;
    --shadow-float: rgba(0, 0, 0, 0.5) 0px 12px 28px -8px;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--charcoal);
  /* "Notion Sans (Inter-based)". Inter se estiver instalada; senão a stack do
     sistema — nada é buscado da rede, o app tem que abrir offline. */
  font-family: Inter, "Notion Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------- layout: sidebar + coluna de leitura */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  max-width: var(--container);
  margin: 0 auto;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: var(--xl);
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--xs);
  margin-bottom: var(--xxl);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--purple);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.nav-label {
  margin: 0 0 var(--xs);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--steel);
}

.nav-list { list-style: none; margin: 0; padding: 0; }

.nav-list button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--xs);
  width: 100%;
  padding: var(--xs) var(--sm);
  margin-bottom: 2px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--charcoal);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.nav-list button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

.nav-list button[aria-current="true"] {
  background: color-mix(in srgb, var(--purple) 12%, transparent);
  color: var(--purple);
  font-weight: 500;
}

.nav-list .count { color: var(--steel); font-size: 13px; font-weight: 400; }

main {
  padding: var(--section) var(--xxl) var(--section);
  max-width: calc(var(--reading) + var(--xxl) * 2);
}

/* ---------------------------------------- cabeçalho do briefing */

.eyebrow {
  margin: 0 0 var(--sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--steel);
}

h1 {
  margin: 0 0 var(--lg);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------------------------------------- card de áudio (opt-in) */

.audio-card {
  margin: 0 0 var(--xxl);
  padding: var(--md);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.audio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
}

.audio-text { min-width: 0; }

.audio-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.audio-sub { margin: 2px 0 0; font-size: 14px; color: var(--steel); }

/* Botão primário do spec: fundo roxo, padding 10/18, raio 8, texto 14/500 */
.btn-primary {
  flex: none;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}

.btn-primary:hover { background: var(--purple-pressed); }
.btn-primary:active { background: var(--purple-deep); }

audio { width: 100%; margin-top: var(--md); }

/* ---------------------------------------- notícias */

.story {
  padding: var(--xl) 0;
  border-bottom: 1px solid var(--border);
}

.story:last-child { border-bottom: 0; }

.story h2 {
  margin: var(--xs) 0 var(--xs);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}

.story p { margin: 0 0 var(--sm); }

.story-meta {
  display: flex;
  align-items: center;
  gap: var(--xs);
  flex-wrap: wrap;
}

/* Tag chips do spec: raio 4px, fundo suave */
.chip {
  padding: 2px var(--xs);
  border-radius: var(--r-xs);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tint-ink);
  background: var(--tint-gray);
}

.chip[data-cat="agentes"]    { background: var(--tint-lavender); }
.chip[data-cat="modelos"]    { background: var(--tint-sky); }
.chip[data-cat="ferramentas"] { background: var(--tint-mint); }
.chip[data-cat="pesquisa"]   { background: var(--tint-peach); }
.chip[data-cat="negocios"]   { background: var(--tint-yellow); }
.chip[data-cat="outro"]      { background: var(--tint-cream); }

/* Badges do spec: pill completo */
.badge {
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--steel);
  background: color-mix(in srgb, var(--steel) 12%, transparent);
}

.badge[data-rel="alta"] {
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 14%, transparent);
}

.source { font-size: 14px; color: var(--steel); }

.story a {
  display: inline-block;
  color: var(--link);
  font-size: 14px;
  text-decoration: none;
}

.story a:hover { text-decoration: underline; }

/* ---------------------------------------- roteiro + estados */

.script-box {
  margin-top: var(--section);
  padding: var(--xl);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.script-box summary {
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
}

.script-box p {
  margin: var(--md) 0 0;
  color: var(--charcoal);
  white-space: pre-wrap;
}

.empty {
  padding: var(--section) 0;
  color: var(--steel);
}

.empty code {
  padding: 2px var(--xxs);
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: 14px;
}

/* ---------------------------------------- breakpoints do spec */

/* Navegação colapsa abaixo de 1024px */
@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: static;
    height: auto;
    padding: var(--md) var(--lg);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .brand { margin-bottom: var(--md); }
  .nav-label { display: none; }

  /* Lista de datas vira faixa horizontal rolável */
  .nav-list {
    display: flex;
    gap: var(--xs);
    overflow-x: auto;
    padding-bottom: var(--xxs);
  }

  .nav-list li { flex: none; }
  .nav-list button { margin: 0; white-space: nowrap; }
  .nav-list .count { display: none; }

  main { padding: var(--xxl) var(--lg) var(--section); }
  h1 { font-size: 36px; letter-spacing: -0.5px; }
}

@media (max-width: 479px) {
  h1 { font-size: 28px; }
  .story h2 { font-size: 18px; }
  .audio-head { flex-direction: column; align-items: stretch; }
  .btn-primary { width: 100%; }
}