/* ─────────────────────────────────────────────
   Top Cocktail Bars — brand tokens
   Three palette modes set on [data-palette]:
     cream-on-dark   (default — editorial, like topcocktailbars.es hero)
     dark-on-cream   (paper/listado feel)
     all-dark        (high-contrast, all-black w/ terracotta)
   ───────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Marcellus&family=Hanken+Grotesk:wght@300;400;500;600;700;800&display=swap");

:root {
  /* core brand */
  --tcb-cream:       #e8e1c6;
  --tcb-cream-soft:  #efeada;
  --tcb-cream-deep:  #d3cba9;
  --tcb-paper:       #f3eed8;
  --tcb-ink:         #13142B;
  --tcb-ink-2:       #191a33;
  --tcb-ink-3:       #20223d;
  --tcb-gold:        #c9a96e;
  --tcb-gold-deep:   #a88550;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-md: 0 10px 30px rgba(0,0,0,.18);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.28);

  --font-display: "Cormorant Garamond", "Marcellus", Georgia, serif;
  --font-editorial: "Marcellus", "Cormorant Garamond", serif;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

/* default = cream-on-dark */
:root,
[data-palette="cream-on-dark"] {
  --bg:        var(--tcb-ink);
  --bg-2:      var(--tcb-ink-2);
  --bg-elev:   #1c1d36;
  --surface:   #1e1f3a;
  --surface-2: #262744;
  --fg:        #ffffff;
  --fg-soft:   rgba(255,255,255,0.72);
  --fg-mute:   rgba(255,255,255,0.45);
  --line:      rgba(255,255,255,0.14);
  --line-2:    rgba(255,255,255,0.28);
  --accent:    #ffffff;
  --accent-hi: #ffffff;
  --accent-lo: rgba(255,255,255,0.85);
  --on-accent: var(--tcb-ink);
  --star:      var(--tcb-gold);
}

[data-palette="dark-on-cream"] {
  --bg:        var(--tcb-cream);
  --bg-2:      var(--tcb-cream-soft);
  --bg-elev:   var(--tcb-paper);
  --surface:   #efe8cf;
  --surface-2: #ddd6ba;
  --fg:        var(--tcb-ink);
  --fg-soft:   #2a2a2a;
  --fg-mute:   #5e5849;
  --line:      rgba(0,0,0,0.14);
  --line-2:    rgba(0,0,0,0.28);
  --accent:    var(--tcb-ink);
  --accent-hi: #1a1a1a;
  --accent-lo: #2a2a2a;
  --on-accent: var(--tcb-cream);
  --star:      var(--tcb-gold-deep);
}

[data-palette="all-dark"] {
  --bg:        #0a0b1f;
  --bg-2:      #11122a;
  --bg-elev:   #161734;
  --surface:   #1a1b38;
  --surface-2: #232444;
  --fg:        #ffffff;
  --fg-soft:   #c8c4b0;
  --fg-mute:   #6a6555;
  --line:      rgba(255,255,255,0.10);
  --line-2:    rgba(255,255,255,0.22);
  --accent:    var(--tcb-gold);
  --accent-hi: #d9bb80;
  --accent-lo: #8c6e3f;
  --on-accent: #0a0b1f;
  --star:      var(--tcb-gold);
}

/* ─── base reset for the prototype frames ─── */
.tcb {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.005em;
}
.tcb *, .tcb *::before, .tcb *::after { box-sizing: border-box; }
.tcb :where(a) { color: inherit; text-decoration: none; }
.tcb button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 0; }
.tcb input, .tcb select, .tcb textarea {
  font: inherit; color: inherit; background: transparent;
  border: 0; outline: none;
}
.tcb h1, .tcb h2, .tcb h3, .tcb h4 { margin: 0; font-weight: 500; }

/* ─── type helpers ─── */
.tcb-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1; }
.tcb-display-italic { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: -0.015em; }
.tcb-editorial { font-family: var(--font-editorial); letter-spacing: 0.04em; }
.tcb-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg-soft);
}
.tcb-overline {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tcb-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-feature-settings: "tnum"; }
.tcb-num  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ─── UI atoms ─── */
.tcb-divider {
  border: 0;
  height: 1px;
  background: var(--line);
}
.tcb-divider-strong {
  border: 0;
  height: 1px;
  background: var(--line-2);
}
.tcb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.tcb-btn:hover { background: var(--accent-hi); }
.tcb-btn:active { transform: translateY(1px); }
.tcb-btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-2);
}
.tcb-btn-ghost:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.tcb-btn-block { width: 100%; }
.tcb-btn-sm { height: 34px; padding: 0 14px; font-size: 11px; }

.tcb-field {
  display: block;
  width: 100%;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--fg);
  transition: border-color .15s, background .15s;
}
.tcb-field::placeholder { color: var(--fg-mute); }
.tcb-field:focus { border-color: var(--accent); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.tcb-label {
  display: block;
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-soft);
  margin-bottom: 8px;
}
.tcb-required { color: var(--accent); font-weight: 400; }

.tcb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.tcb-card-flat {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* rating-circle (1..10) */
.tcb-rating-row { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 6px; }
.tcb-rating-row.mobile { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
.tcb-rcircle {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  border: 1px solid var(--line-2);
  color: var(--fg-soft);
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}
.tcb-rcircle:hover { border-color: var(--accent); color: var(--fg); }
.tcb-rcircle.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  transform: scale(1.04);
}
.tcb-rcircle.is-in-range:not(.is-selected) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--fg);
}

/* star marks */
.tcb-stars { display: inline-flex; gap: 4px; }
.tcb-star {
  width: 14px; height: 14px;
  color: var(--star);
}

/* tables */
.tcb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tcb-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-soft);
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
}
.tcb-table td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tcb-table tr:last-child td { border-bottom: 0; }
.tcb-table tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* chips/badges */
.tcb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.tcb-chip.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.tcb-chip.is-muted {
  color: var(--fg-mute);
  border-color: var(--line);
}

/* hero curtain (subtle vertical stroke detail used on big editorial blocks) */
.tcb-curtain {
  position: relative;
  isolation: isolate;
}
.tcb-curtain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent 78px,
      color-mix(in srgb, var(--fg) 5%, transparent) 78px,
      color-mix(in srgb, var(--fg) 5%, transparent) 79px);
}

/* tiny logo monogram */
.tcb-monogram {
  font-family: var(--font-editorial);
  font-size: 11px;
  letter-spacing: 0.32em;
  font-weight: 400;
}

/* image-slot host styling so placeholders blend in */
image-slot {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg-mute);
}

/* scrollbar inside frames */
.tcb ::-webkit-scrollbar { width: 8px; height: 8px; }
.tcb ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.tcb ::-webkit-scrollbar-track { background: transparent; }

/* flash banners */
.tcb-flash {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  font-size: 13px;
}
.tcb-flash.success {
  background: color-mix(in srgb, #6c6a3a 22%, var(--bg-2));
  border-color: color-mix(in srgb, #b1ad6a 40%, transparent);
  color: var(--fg);
}
.tcb-flash.alert {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--fg);
}