/* ==========================================================================
   Design System — Dra. Lidiana / Palestras
   Documentação completa: /DESIGN-SYSTEM.md
   Autocontido: NÃO depende de ../styles.css (a home segue intocada).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* height:auto obrigatório: sem ele, img com atributos width/height encolhida
   pelo max-width fica com a altura travada — achata/estica a proporção. */
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Cor: areia (fundos) --- */
  --sand-100: #FBFAF7;
  --sand-200: #F4F2EC;
  --sand-300: #EDEAE3;  /* ★ base da marca */
  --sand-400: #E2DED4;

  /* --- Cor: réguas --- */
  --line:        #D7D3CC;
  --line-strong: #C4BFB4;

  /* --- Cor: ardósia (tinta e superfícies escuras) --- */
  --slate-900: #1E272C;
  --slate-800: #2B353B;
  --slate-700: #36434A;
  --slate-600: #42525B;  /* ★ tinta da marca */
  --slate-400: #6B7A83;
  --slate-300: #8D9AA2;

  /* --- Cor: âmbar (acento) — ver regras de contraste na doc --- */
  --amber-700: #905C31;  /* ★ único âmbar seguro para texto sobre areia */
  --amber-600: #B6743E;
  --amber-500: #C99162;  /* ★ acento da marca — superfície/régua/ícone, não texto */
  --amber-400: #D8AF8D;  /* âmbar sobre fundo escuro */
  --amber-100: #F1E2D5;

  /* --- Papéis semânticos --- */
  --bg:            var(--sand-300);
  --bg-raised:     var(--sand-100);
  --bg-sunken:     var(--sand-400);
  --bg-inverse:    var(--slate-800);
  --ink:           var(--slate-600);
  --ink-muted:     var(--slate-400);
  --ink-inverse:   var(--sand-300);
  --ink-on-amber:  var(--slate-900);

  /* --- Tipografia --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Sans 3', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --fs-display-xl: clamp(2.75rem, 7vw, 5.5rem);
  --fs-display-l:  clamp(2rem, 4.5vw, 3.25rem);
  --fs-display-m:  clamp(1.5rem, 2.6vw, 2rem);
  --fs-title:      1.25rem;
  --fs-body-l:     1.125rem;
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-meta:       0.75rem;

  /* --- Espaço --- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-8: 3rem;     --space-10: 4rem;    --space-12: 6rem;
  --space-16: 8rem;

  --section-y:   clamp(5rem, 10vw, 9rem);
  --container:   1280px;
  --measure:     44rem;
  --rail:        180px;

  /* --- Forma --- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  /* --- Movimento --- */
  --ease:        cubic-bezier(.2, .6, .2, 1);
  --dur-fast:    200ms;
  --dur-reveal:  600ms;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

h1 { font-size: var(--fs-display-xl); letter-spacing: -0.02em;  line-height: 1.02; }
h2 { font-size: var(--fs-display-l);  letter-spacing: -0.015em; line-height: 1.08; }
h3 { font-size: var(--fs-display-m);  line-height: 1.15; }

:focus-visible {
  outline: 2px solid var(--amber-700);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.ds-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.ds-section    { padding-block: var(--section-y); }
.ds-measure    { max-width: var(--measure); }
.ds-bleed      { width: 100%; border-radius: var(--radius-0); }

/* Faixas. Só a faixa define fundo — não empilhe com .ds-section. */
.ds-band-sand    { background: var(--sand-300); color: var(--ink); }
.ds-band-subtle  { background: var(--sand-200); color: var(--ink); }
.ds-band-dark    { background: var(--slate-800); color: var(--ink-inverse); }
.ds-band-dark h1,
.ds-band-dark h2,
.ds-band-dark h3 { color: var(--ink-inverse); }

/* Rail: [metadados mono] [conteúdo] — a estrutura-assinatura da página */
.ds-rail { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .ds-rail { grid-template-columns: var(--rail) 1fr; gap: var(--space-8); }
}

/* --------------------------------------------------------------------------
   5. Tipografia utilitária
   -------------------------------------------------------------------------- */
.ds-lead    { font-size: var(--fs-body-l); line-height: 1.7; color: var(--ink-muted); }
.ds-small   { font-size: var(--fs-small); }
.ds-muted   { color: var(--ink-muted); }

/* Camada mono: índices, metadados, rótulos, datas */
.ds-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.ds-band-dark .ds-meta { color: var(--slate-300); }

/* Ênfase em dois tons dentro da própria frase (empréstimo da referência) */
.ds-dim { color: var(--ink-muted); }
.ds-band-dark .ds-dim { color: var(--slate-300); }

/* --------------------------------------------------------------------------
   6. Eyebrow — rótulo de seção
   -------------------------------------------------------------------------- */
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber-700);
  margin-bottom: var(--space-5);
}
.ds-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--amber-500);
  flex-shrink: 0;
}
.ds-band-dark .ds-eyebrow { color: var(--amber-400); }

/* --------------------------------------------------------------------------
   7. Botões
   -------------------------------------------------------------------------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-1);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: background-color var(--dur-fast) var(--ease);
}

.ds-btn-primary        { background: var(--slate-800); color: var(--sand-300); }
.ds-btn-primary:hover  { background: var(--slate-900); }

/* Texto ardósia, nunca branco — branco sobre âmbar reprova em contraste */
.ds-btn-amber          { background: var(--amber-500); color: var(--ink-on-amber); }
.ds-btn-amber:hover    { background: var(--amber-600); }

.ds-btn-text {
  padding: 0;
  color: var(--amber-700);
  text-decoration: underline;
  text-decoration-color: var(--amber-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.ds-btn-text:hover { text-decoration-color: var(--amber-700); }

.ds-band-dark .ds-btn-primary       { background: var(--sand-300); color: var(--slate-900); }
.ds-band-dark .ds-btn-primary:hover { background: var(--sand-100); }
.ds-band-dark .ds-btn-text          { color: var(--amber-400); }

/* --------------------------------------------------------------------------
   8. Ficha de palestra — a assinatura
   -------------------------------------------------------------------------- */
.ds-fichas { border-top: 1px solid var(--line); }

.ds-ficha {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-fast) var(--ease);
}
@media (min-width: 900px) {
  .ds-ficha {
    grid-template-columns: var(--rail) 1fr;
    gap: var(--space-8);
    padding-inline: var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
  }
}
.ds-ficha:hover { background: var(--sand-200); }

/* Código de catálogo: P-03. É referência real ("queremos a P-03"), não enfeite. */
.ds-ficha-code {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: 600;
  color: var(--amber-700);
  letter-spacing: -0.01em;
  line-height: 1;
}

.ds-ficha-specs {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-3);
}
/* Rótulo empilhado sobre o valor: cabe no rail e lê como coluna de ficha técnica. */
.ds-ficha-spec dt { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500;
                    text-transform: uppercase; letter-spacing: 0.12em; color: var(--slate-300); }
.ds-ficha-spec dd { font-size: var(--fs-small); color: var(--ink-muted); }

.ds-ficha-title { margin-bottom: var(--space-3); }
.ds-ficha-desc  { color: var(--ink-muted); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   9. Faixa sangrada com metadado sobreposto
   -------------------------------------------------------------------------- */
.ds-plate { position: relative; overflow: hidden; border-radius: var(--radius-0); }
.ds-plate img { width: 100%; height: 100%; object-fit: cover; }
.ds-plate::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,39,44,.15), rgba(30,39,44,.55));
}
.ds-plate-meta {
  position: absolute; z-index: 1;
  inset-inline: var(--space-5);
  bottom: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  color: var(--sand-300);
}
.ds-plate-meta .ds-meta { color: rgba(237,234,227,.7); }

/* Régua de ticks — usar UMA vez por página, na abertura */
.ds-ticks {
  height: 8px;
  background-image: repeating-linear-gradient(
    to right, var(--line) 0 1px, transparent 1px 8px
  );
}

/* --------------------------------------------------------------------------
   10. Régua divisória
   -------------------------------------------------------------------------- */
.ds-rule { height: 1px; background: var(--line); border: 0; }
.ds-rule-strong { background: var(--line-strong); }
.ds-band-dark .ds-rule { background: var(--slate-700); }

/* --------------------------------------------------------------------------
   11. Movimento
   -------------------------------------------------------------------------- */
.ds-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}
.ds-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .ds-reveal { opacity: 1; transform: none; }
}