/* BeeLabs · Brand System v1.0 — Calendar templates */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500&family=Space+Grotesk:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* Colors — manual da marca */
  --lab-orange: #F97316;
  --deep-navy: #0F2742;
  --midnight-ink: #0A1628;
  --slate-grey: #475569;
  --bone-white: #FAFAF7;
  --mist-grey: #E5E7EB;
  --bone-soft: #F3F2EC;

  /* Type */
  --font-op: 'Space Grotesk', system-ui, sans-serif;
  --font-ed: 'Fraunces', Georgia, serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Status */
  --status-approved: #1F8A5B;
  --status-review: #C9890C;
  --status-pending: #475569;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-op);
  color: var(--midnight-ink);
  background: #d9d9d4;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv01';
}

/* A4 page — 210×297mm. Render at 794×1123px (96dpi). */
.page {
  width: 210mm;
  min-height: 297mm;
  background: var(--bone-white);
  margin: 12mm auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 12px 40px rgba(10,22,40,0.10);
  page-break-after: always;
  break-after: page;
}
.page.dark {
  background: var(--deep-navy);
  color: var(--bone-white);
}
.page.ink {
  background: var(--midnight-ink);
  color: var(--bone-white);
}

.page-inner {
  padding: 18mm 16mm 16mm;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8mm;
}

/* Top metadata bar */
.meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--slate-grey);
  text-transform: uppercase;
  border-bottom: 0.5px solid var(--mist-grey);
  padding-bottom: 6mm;
}
.page.dark .meta-bar, .page.ink .meta-bar {
  color: rgba(250,250,247,0.55);
  border-color: rgba(250,250,247,0.12);
}
.meta-bar .left, .meta-bar .right { display: flex; gap: 14px; align-items: center; }
.meta-bar .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--lab-orange); display: inline-block;
}

/* Footer */
.foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--slate-grey);
  text-transform: uppercase;
  padding-top: 6mm;
  border-top: 0.5px solid var(--mist-grey);
}
.page.dark .foot, .page.ink .foot {
  color: rgba(250,250,247,0.55);
  border-color: rgba(250,250,247,0.12);
}
.foot .lockup { font-family: var(--font-op); font-weight: 600; font-size: 11px; letter-spacing: -0.02em; text-transform: none; color: var(--midnight-ink); }
.page.dark .foot .lockup, .page.ink .foot .lockup { color: var(--bone-white); }
.foot .lockup .bee { font-family: var(--font-ed); font-style: italic; font-weight: 400; }

/* Wordmark */
.wordmark {
  font-size: 28px;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.wordmark .bee { font-family: var(--font-ed); font-style: italic; font-weight: 400; }
.wordmark .labs { font-family: var(--font-op); font-weight: 600; letter-spacing: -0.02em; }
.wordmark .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lab-orange);
  display: inline-block;
  transform: translateY(-2px);
}

/* Typography helpers */
.kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-grey);
}
.kicker .o { color: var(--lab-orange); }

.section-title {
  font-family: var(--font-op);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.section-title::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lab-orange);
  display: inline-block;
  transform: translateY(-2px);
}
.page.dark .section-title, .page.ink .section-title { color: var(--bone-white); }

h1.display {
  font-family: var(--font-op);
  font-weight: 600;
  font-size: 64px;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
h1.display .ed {
  font-family: var(--font-ed);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

p.body { font-size: 13px; line-height: 1.55; color: var(--slate-grey); max-width: 70ch; }
.page.dark p.body, .page.ink p.body { color: rgba(250,250,247,0.72); }

.editorial {
  font-family: var(--font-ed);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
.mono.comment { color: var(--slate-grey); }
.mono.comment::before { content: '// '; color: var(--lab-orange); }

/* Cards */
.card {
  border: 0.5px solid var(--mist-grey);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--bone-white);
}
.card.dark {
  background: var(--midnight-ink);
  color: var(--bone-white);
  border-color: rgba(250,250,247,0.08);
}
.card.navy {
  background: var(--deep-navy);
  color: var(--bone-white);
  border-color: rgba(250,250,247,0.08);
}

/* Pill / pacote */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-op);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.01em;
}
.pill.orange { background: var(--lab-orange); color: var(--midnight-ink); }
.pill.ink { background: var(--midnight-ink); color: var(--bone-white); }
.pill.bone { background: var(--bone-white); color: var(--midnight-ink); border: 0.5px solid var(--mist-grey); }
.pill.outline { border: 0.5px solid currentColor; }

/* Status badges */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.status.approved { color: var(--status-approved); background: rgba(31,138,91,0.1); }
.status.review { color: var(--status-review); background: rgba(201,137,12,0.12); }
.status.pending { color: var(--status-pending); background: rgba(71,85,105,0.1); }
.status.draft { color: var(--lab-orange); background: rgba(249,115,22,0.1); }

/* Constellation pattern (used in dark sections) */
.constellation {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 22%, var(--lab-orange) 1px, transparent 1.5px),
    radial-gradient(circle at 78% 14%, rgba(249,115,22,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 32% 78%, rgba(249,115,22,0.7) 1px, transparent 1.5px),
    radial-gradient(circle at 88% 64%, rgba(249,115,22,0.3) 1px, transparent 1.5px),
    radial-gradient(circle at 56% 44%, rgba(249,115,22,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 18% 56%, rgba(249,115,22,0.3) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 88%, rgba(249,115,22,1) 1px, transparent 1.5px);
  pointer-events: none;
  opacity: 0.9;
}

/* Editable highlight */
[contenteditable="true"] { outline: none; }
[contenteditable="true"]:hover { background: rgba(249,115,22,0.06); border-radius: 3px; }
[contenteditable="true"]:focus { background: rgba(249,115,22,0.10); border-radius: 3px; box-shadow: 0 0 0 1px var(--lab-orange); }

/* Image slot fallback */
.img-slot {
  background:
    repeating-linear-gradient(135deg, var(--bone-soft) 0 8px, var(--mist-grey) 8px 9px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-grey);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.img-slot::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(10,22,40,0.02);
}

/* Bullet list with orange dot */
ul.dot-list { list-style: none; }
ul.dot-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--midnight-ink);
}
ul.dot-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lab-orange);
}

/* Separator */
.sep {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--lab-orange);
  letter-spacing: 0.6em;
  font-size: 10px;
}
.sep::before { content: '· · ·'; }

/* Print */
@media print {
  html, body { background: white; }
  .page {
    margin: 0 auto;
    box-shadow: none;
    page-break-after: always;
  }
  .page:last-child { page-break-after: auto; }
  .no-print { display: none !important; }
  @page { size: A4; margin: 0; }
}

/* Editor toolbar */
.toolbar {
  position: fixed;
  top: 14px; right: 14px;
  z-index: 100;
  display: flex;
  gap: 8px;
  background: var(--midnight-ink);
  color: var(--bone-white);
  padding: 8px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(10,22,40,0.25);
}
.toolbar button {
  background: transparent;
  color: inherit;
  border: 0;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.toolbar button:hover { background: rgba(250,250,247,0.10); }
.toolbar button.primary { background: var(--lab-orange); color: var(--midnight-ink); }
.toolbar button.primary:hover { background: #FFA049; }
.toolbar .sep-tb { width: 1px; background: rgba(250,250,247,0.15); margin: 0 4px; }