/* =========================================================
   MERCADO7AM — Brand Book stylesheet
   Tokens, page chrome, and template-canvas scaffolding
   ========================================================= */

:root {
  /* Brand palette */
  --ink:        #0B0F14;
  --ink-90:     #161A20;
  --ink-70:     #2A2F38;
  --deep:       #0A2540;
  --deep-soft:  #143358;
  --bone:       #F4F1E8;
  --bone-2:     #ECE7D8;
  --paper:      #FBF9F2;
  --bull:       #00B36B;
  --bull-soft:  #0E8A57;
  --bear:       #DC3A2F;
  --bear-soft:  #B53127;
  --gold:       #C9A24B;
  --gold-soft:  #A2812F;
  --graphite:   #2C3539;
  --steel:      #4B5563;
  --line:       #D8D2C2;
  --line-dark:  #1F2731;

  /* Type */
  --f-display: "Sora", system-ui, sans-serif;
  --f-body:    "Manrope", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Page chrome */
  --page-max: 1280px;
  --gutter: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* =========================================================
   Page chrome — top bar + section anchors
   ========================================================= */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: var(--deep);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-dark);
}
.topbar .brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.topbar nav { display: flex; gap: 22px; }
.topbar nav a { text-decoration: none; opacity: 0.7; transition: opacity .15s; }
.topbar nav a:hover { opacity: 1; color: var(--bull); }
.topbar .ticker { font-family: var(--f-mono); font-size: 11px; opacity: 0.6; }

/* =========================================================
   Section scaffolding
   ========================================================= */
section.bb {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 96px var(--gutter) 64px;
  border-bottom: 1px solid var(--line);
}
section.bb.dark {
  max-width: none;
  background: var(--deep);
  color: var(--bone);
  border-bottom: 1px solid var(--line-dark);
}
section.bb.dark > .bb-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 96px var(--gutter) 64px;
}
section.bb.dark { padding: 0; }

.bb-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bb-eyebrow .num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px;
  background: var(--ink); color: var(--bone);
  border-radius: 3px;
  font-weight: 600;
}
section.bb.dark .bb-eyebrow { color: var(--bone); opacity: 0.7; }
section.bb.dark .bb-eyebrow .num { background: var(--bull); color: var(--ink); }

.bb-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  max-width: 14ch;
}
.bb-lead {
  font-size: 17px;
  max-width: 66ch;
  color: var(--ink-70);
  margin: 0 0 56px;
}
section.bb.dark .bb-lead { color: rgba(244,241,232,0.74); }

.bb-divider { height: 1px; background: var(--line); margin: 56px 0; }
section.bb.dark .bb-divider { background: var(--line-dark); }

.bb-subhead {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.bb-caption {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}
section.bb.dark .bb-caption { color: rgba(244,241,232,0.6); }

/* Grid helpers */
.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Card */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px;
}
section.bb.dark .card { background: var(--ink-90); border-color: var(--line-dark); }

/* =========================================================
   Story / Post template canvas — actual size 1080×1920 / 1080×1080
   Scaled down via CSS transform to fit the page
   ========================================================= */
.tpl-frame {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tpl-frame .tpl-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}
.tpl-frame .tpl-meta strong { font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; font-family: var(--f-display); font-size: 14px; }
section.bb.dark .tpl-frame .tpl-meta strong { color: var(--bone); }

.tpl-stage {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #ddd;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 20px 40px -20px rgba(11,15,20,0.25),
    0 4px 12px -4px rgba(11,15,20,0.12);
}
/* For 9:16 stories the inner canvas is 1080×1920; we render scaled. */
.tpl-stage.story   { width: 270px; height: 480px; }     /* 1080/4 */
.tpl-stage.post    { width: 320px; height: 320px; }     /* 1080/3.375 */
.tpl-stage.story-l { width: 360px; height: 640px; }     /* larger gallery */
.tpl-stage.post-l  { width: 420px; height: 420px; }

.tpl-canvas {
  position: absolute; top: 0; left: 0;
  width: 1080px;
  transform-origin: top left;
  font-family: var(--f-body);
  color: var(--ink);
}
.tpl-canvas.story { height: 1920px; }
.tpl-canvas.post  { height: 1080px; }

.tpl-stage.story   .tpl-canvas.story { transform: scale(0.25); }
.tpl-stage.story-l .tpl-canvas.story { transform: scale(0.3333333); }
.tpl-stage.post    .tpl-canvas.post  { transform: scale(0.2962962); }
.tpl-stage.post-l  .tpl-canvas.post  { transform: scale(0.3888888); }

/* =========================================================
   Story canvas — internal style primitives (work at native px)
   ========================================================= */
.canvas-ink   { background: var(--ink); color: var(--bone); }
.canvas-deep  { background: var(--deep); color: var(--bone); }
.canvas-bone  { background: var(--bone); color: var(--ink); }
.canvas-paper { background: var(--paper); color: var(--ink); }

/* Story safe-zone overlay (toggled by inspector if needed) */
.safe-zone {
  position: absolute;
  inset: 220px 60px 280px 60px;
  border: 2px dashed rgba(255,255,255,0.35);
  pointer-events: none;
  display: none;
}

/* Native-size pieces inside canvases */
.c-pad { padding: 96px 80px; }

.c-headline {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.96;
}

.c-mono {
  font-family: var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-rule {
  height: 4px;
  background: currentColor;
  width: 64px;
}

/* Index card on the homepage */
.section-card {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .15s, border-color .15s;
}
.section-card:hover { transform: translateY(-2px); border-color: var(--ink); }
.section-card .n {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--steel);
}
.section-card h4 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}
.section-card p { margin: 0; color: var(--steel); font-size: 13px; }

/* Token rows */
.token-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12px;
}
.token-row:first-child { border-top: 0; }
.token-row .swatch { height: 56px; border-radius: 4px; }

/* Misc */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 6px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }