/* ============================================================
   Design tokens
   Palette: "cast-iron kitchen at night" — near-black warm charcoal,
   burnished copper accent, quiet sage secondary. Built for a kiosk
   screen glanced at from a few feet away, not a phone.
   Display face: Fraunces (a recipe-card serif, used sparingly)
   Body/UI face: Inter
   Utility face (tags, dates, category labels): IBM Plex Mono
   ============================================================ */
:root{
  --ink:        #17190F;
  --ink-soft:   #23261A;
  --surface:    #1F2216;
  --surface-2:  #2A2D1D;
  --line:       #3A3D2B;
  --paper:      #F3EEE1;
  --paper-dim:  #C9C4B2;
  --copper:     #C1793C;
  --copper-hi:  #E0995C;
  --sage:       #8A9A7E;
  --sage-hi:    #A8B99B;
  --danger:     #C1543C;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--copper-hi); }

::selection{ background: var(--copper); color: var(--ink); }

/* steam wisp — signature motif, used in headers/empty states */
.steam-mark{ display:inline-block; line-height:0; }
.steam-mark svg{ display:block; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 600; margin: 0 0 .3em; letter-spacing: .01em; }
.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  color: var(--copper-hi);
}

button{ font-family: var(--font-body); cursor: pointer; }
.btn{
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--paper);
  padding: .6em 1.1em;
  border-radius: var(--radius);
  font-size: .92rem;
  transition: border-color .15s, transform .1s;
}
.btn:hover{ border-color: var(--copper); }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--copper); border-color: var(--copper); color: var(--ink); font-weight: 600; }
.btn-primary:hover{ background: var(--copper-hi); }
.btn-danger{ background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover{ background: var(--danger); color: var(--paper); }
.btn-ghost{ background: transparent; border-color: transparent; }
.btn-ghost:hover{ border-color: var(--line); }
.btn:disabled{ opacity: .4; cursor: not-allowed; }
.btn:disabled:hover{ border-color: var(--line); }

input, textarea, select{
  font-family: var(--font-body);
  background: var(--ink-soft);
  border: 1px solid var(--line);
  color: var(--paper);
  border-radius: var(--radius);
  padding: .6em .8em;
  font-size: .95rem;
  width: 100%;
}
input:focus, textarea:focus, select:focus{
  outline: 2px solid var(--copper);
  outline-offset: 1px;
  border-color: var(--copper);
}
label{ font-size: .82rem; color: var(--paper-dim); display:block; margin-bottom: .3em; }
.field{ margin-bottom: 1em; }
.check-row{ display:flex; align-items:center; gap:.6em; }
.check-row input[type=checkbox]{ width: auto; accent-color: var(--copper); }
.check-row label{ margin: 0; color: var(--paper); }

.tag{
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: .25em .6em;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--paper-dim);
  display: inline-block;
}
.tag-copper{ border-color: var(--copper); color: var(--copper-hi); }
.tag-sage{ border-color: var(--sage); color: var(--sage-hi); }

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.2em;
}

.modal-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  padding: 2vh 3vw; z-index: 50;
}
.modal{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  max-width: 720px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  padding: 1.6em;
}
.modal-close{
  position: sticky; top:0; float:right;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--paper); border-radius: 999px; width: 32px; height: 32px;
  font-size: 1rem;
}

.empty-state{
  text-align:center; padding: 4em 1em; color: var(--paper-dim);
}

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-track{ background: transparent; }

.toast{
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--copper);
  color: var(--paper); padding: .7em 1.2em; border-radius: var(--radius);
  font-size: .88rem; box-shadow: var(--shadow); z-index: 100;
}