@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root{
  color-scheme: light;
  --bg:#FCFAF8;            /* Linen */
  --surface:#FFFFFF;       /* Card */
  --line:#E7E2DC;          /* Stone */
  --text:#3F3A35;          /* Cocoa */
  --muted:#7B756E;
  --accent:#FF6B5A;        /* Coral */
  --accent-2:#E14D42;      /* Coral (hover/darker) */
  --olive:#7A8F61;         /* Tag/secondary */
  --shadow:0 8px 28px rgba(63,58,53,.10);
  --radius:16px;
  --radius-sm:12px;
}

*{box-sizing:border-box}

/* Global font system */
html, body {
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Optional: slightly heavier headings */
h1, h2, h3, h4 {
  font-weight: 700;
}

/* === GLOBAL NAVBAR (FINAL VERSION) === */
.navbar {
  height: 64px;
  width: 100%;
  background: #000;                 /* solid black */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* logo left, nav right */
  padding: 0 28px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* Logo */
.logo {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  text-transform: uppercase;
  user-select: none;
}

.logo-img {
  height: 38px;
  width: auto;
  display: block;
  filter: invert(1);
}

/* Navigation links */
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 6px 4px;
  transition: opacity 0.2s ease;
}

.nav-links a:hover {
  opacity: 0.6;
}

@media (max-width: 600px) {
  .navbar { padding: 0 16px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 0.875rem; }
}

@media (max-width: 400px) {
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 0.8rem; }
  .logo-img { height: 32px; }
}


/* Containers & cards */
.container{width:100%;max-width:1140px;margin:0 auto;padding:20px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:999px;border:1px solid transparent;
  background:var(--accent);color:#fff;cursor:pointer;transition:.15s ease
}
.btn:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-outline{
  background:#fff;color:var(--text);border-color:var(--line)
}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:#fff}

/* Inputs */
input,select,textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:var(--text)
}
input::placeholder,textarea::placeholder{color:#A0978E}

/* Chips */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:var(--olive);color:#fff;font-size:.85rem
}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:.85rem}

/* Grid (gallery) */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.col-12{grid-column:span 12}
@media (min-width:640px){.col-6{grid-column:span 6}}
@media (min-width:900px){.col-4{grid-column:span 4}}

/* Dish card */
.dish-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease
}
.dish-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(63,58,53,.16)}
.dish-img{aspect-ratio:4/3;width:100%;object-fit:cover;display:block}
.dish-body{padding:12px}
.dish-title{font-family:"Playfair Display",serif;font-size:1.15rem;margin:0 0 6px}
.dish-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.9rem}

/* Glass search (hero) */
.glass{
  display:flex;align-items:center;gap:10px;width:min(760px,92vw);
  background:rgba(255,255,255,.72);backdrop-filter:blur(12px) saturate(160%);
  border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 16px;box-shadow:var(--shadow)
}
.glass input{border:none;background:transparent}

/* Table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}

/* Floating action button */
.fab{
  position:fixed;bottom:24px;right:24px;width:58px;height:58px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;text-decoration:none;box-shadow:var(--shadow)
}

/* Typeahead dropdown */
.combo-list{
  position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:8px;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-height:280px;overflow:auto
}
.combo-item{padding:10px 12px;display:flex;justify-content:space-between;gap:10px;cursor:pointer}
.combo-item:hover{background:#FFF5F3}
.combo-muted{color:var(--muted);font-size:.9rem}
.combo-suggest{color:var(--accent);font-weight:700}