/* ============================================================
   The Bottomless — house style
   Two materials: lacquer (the bar) and card stock (the menu, the receipt).
   Brass is the only metal. Nothing else glows.
   ============================================================ */

@import url('/css/fonts.css');

:root {
  /* lacquer: a deep plum bar front rather than a green one */
  --lacquer:      #1A0B14;
  --lacquer-deep: #10060C;
  --felt:         #26101C;
  --felt-hi:      #331624;
  --edge:         rgba(217, 155, 164, 0.24);
  --edge-soft:    rgba(243, 231, 233, 0.10);

  /* rose gold: the only metal in the room */
  --brass:        #D99BA4;
  --brass-bright: #F3C9CE;
  --brass-deep:   #A4636E;
  --blush:        #EF8FB4;

  /* card stock */
  --bone:         #F3E7E9;
  --bone-dim:     #DCC7CB;
  --docket:       #FBF1F1;
  --ink:          #170B10;

  /* speech */
  --text:         #EDE0E3;
  --text-dim:     #B39BA4;
  --text-faint:   #7A5F6A;
  --claret:       #B23A5E;
  --sage:         #7FBF9E;

  /* type */
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --ui:      'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --docket-font: 'Courier Prime', 'Courier New', monospace;

  --gut: clamp(16px, 4vw, 28px);
  --radius: 3px;

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lacquer-deep);
  color: var(--text);
  font-family: var(--ui);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overscroll-behavior-y: contain; }

/* The bar front: a deep lacquer with a faint vertical grain and a brass line at the top. */
.lacquer {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(239,143,180,.13), transparent 60%),
    linear-gradient(180deg, var(--felt) 0%, var(--lacquer) 38%, var(--lacquer-deep) 100%);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--brass); }

:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
}

/* ---------- type primitives ---------- */

.eyebrow {
  font-family: var(--ui);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--brass);
}

.wordmark {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .30em;
  margin-right: -.30em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
}

.serif { font-family: var(--display); font-weight: 400; }
.num   { font-family: var(--docket-font); font-variant-numeric: tabular-nums; }

/* The engraved brass rule that separates everything. */
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge) 12%, var(--edge) 88%, transparent);
  border: 0;
  margin: 0;
}

.rule-diamond {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--brass-deep);
}
.rule-diamond::before,
.rule-diamond::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge), transparent);
}
.rule-diamond span { font-size: .55rem; letter-spacing: .3em; }

/* ---------- brass controls ---------- */

.brass-btn {
  font-family: var(--ui);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  padding: 1.05rem 1.4rem;
  color: var(--ink);
  background: linear-gradient(175deg, var(--brass-bright), var(--brass) 45%, var(--brass-deep));
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 6px 18px rgba(0,0,0,.45);
  transition: transform .12s ease, filter .12s ease;
}
.brass-btn:active { transform: translateY(1px); filter: brightness(.94); }
.brass-btn[disabled] { opacity: .35; pointer-events: none; }

.ghost-btn {
  font-family: var(--ui);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .72rem;
  padding: .85rem 1.2rem;
  color: var(--text-dim);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  transition: color .15s, border-color .15s;
}
.ghost-btn:hover { color: var(--bone); border-color: var(--edge); }

/* ---------- monogram ---------- */

.monogram {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--felt-hi);
  color: var(--bone);
  font-family: var(--display);
  border: 1px solid var(--edge);
  overflow: hidden;
  flex: none;
}
.monogram img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- scrollbars, kept quiet ---------- */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}