/* =========================================================
   RESTO — Base design tokens & shared components
   Warm & rustic theme — terracotta, espresso, turmeric, sage
   ========================================================= */

:root{
  /* --- Color tokens --- */
  --color-bg:        #F6EDE0;   /* warm parchment */
  --color-bg-alt:    #EFE2CC;   /* deeper cream, alt sections */
  --color-card:      #FFFBF2;   /* card surface */
  --color-ink:       #3A2A1F;   /* espresso — main text */
  --color-ink-soft:  #6B5C4E;   /* softened text */
  --color-primary:   #B5512B;   /* burnt terracotta — CTAs, headings */
  --color-primary-d: #8F3F1F;   /* darker terracotta — hover */
  --color-secondary: #6B7A4F;   /* sage olive — tags, secondary accents */
  --color-gold:      #D9A441;   /* turmeric gold — stamps, dividers */
  --color-dark:      #2A1F17;   /* espresso-black — footer / dark sections */
  --color-dark-card: #3A2C20;
  --color-line:      #D8C6A8;   /* hairline divider */
  --color-cream-2:   #FBF6EC;

  /* --- Type --- */
  --font-display: 'Fraunces', 'Noto Serif Bengali', serif;
  --font-body:    'Karla', 'Noto Sans Bengali', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* --- Scale --- */
  --radius-card: 14px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 24px rgba(58, 42, 31, 0.10);
  --shadow-lift: 0 14px 36px rgba(58, 42, 31, 0.16);
  --container: 1180px;
}

html[lang="bn"]{
  --font-display: 'Noto Serif Bengali', serif;
  --font-body: 'Noto Sans Bengali', sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--color-ink);
  margin: 0 0 .4em;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  color: var(--color-primary-d);
  background: rgba(181,81,43,.09);
  border: 1px solid rgba(181,81,43,.22);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--color-gold); }

/* --- Buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .96rem;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--color-primary); color: #FFF8EE; box-shadow: var(--shadow-soft); }
.btn-primary:hover{ background: var(--color-primary-d); box-shadow: var(--shadow-lift); }
.btn-ghost{ background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn-ghost:hover{ background: var(--color-ink); color: var(--color-bg); }
.btn-light{ background: var(--color-cream-2); color: var(--color-ink); border-color: var(--color-line); }
.btn-light:hover{ border-color: var(--color-primary); color: var(--color-primary-d); }
.btn-wa{ background:#2E6B4F; color:#fff; }
.btn-wa:hover{ background:#234F39; }
.btn-block{ width:100%; }
.btn-sm{ padding: 9px 16px; font-size: .82rem; }

/* --- Cuisine "passport stamp" badges — signature element --- */
.stamp{
  --stamp-c: var(--color-primary);
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 2px solid var(--stamp-c);
  color: var(--stamp-c);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .62rem;
  letter-spacing: .06em;
  text-align: center;
  transform: rotate(-6deg);
  flex: none;
}
.stamp::before{
  content:"";
  position:absolute;
  inset: 6px;
  border: 1px dashed var(--stamp-c);
  border-radius: 50%;
  opacity: .55;
}
.stamp span{ position: relative; padding: 0 8px; }
.stamp.gold{ --stamp-c: var(--color-gold); }
.stamp.sage{ --stamp-c: var(--color-secondary); }
.stamp.ink{ --stamp-c: var(--color-ink); }

/* Cuisine tag chip (used on menu cards) */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  background: var(--color-cream-2);
}
.tag.thai{ color:#8F3F1F; border-color: rgba(181,81,43,.4); background: rgba(181,81,43,.08);}
.tag.continental{ color:#4B5A8F; border-color: rgba(75,90,143,.35); background: rgba(75,90,143,.08);}
.tag.fastfood{ color:#A8732A; border-color: rgba(217,164,65,.5); background: rgba(217,164,65,.12);}
.tag.local{ color:#4D5A33; border-color: rgba(107,122,79,.4); background: rgba(107,122,79,.10);}
.tag.veg::before{ content:"●"; color:#4D7A33; font-size:.6em; }
.tag.nonveg::before{ content:"●"; color:#A8332A; font-size:.6em; }

/* Section dividers — torn paper line, signature texture */
.divider{
  height: 14px;
  width: 100%;
  background-image: radial-gradient(circle at 6px 7px, var(--color-bg) 6px, transparent 7px);
  background-size: 18px 14px;
  background-repeat: repeat-x;
}
.divider.alt{ background-image: radial-gradient(circle at 6px 7px, var(--color-bg-alt) 6px, transparent 7px); }
.divider.dark{ background-image: radial-gradient(circle at 6px 7px, var(--color-dark) 6px, transparent 7px); }

.section{ padding: 88px 0; }
.section-tight{ padding: 56px 0; }
.bg-alt{ background: var(--color-bg-alt); }
.bg-dark{ background: var(--color-dark); color: #F3E8D8; }
.bg-dark h1, .bg-dark h2, .bg-dark h3{ color: #FBF1E2; }
.bg-dark .muted{ color: #C9B8A2; }

.muted{ color: var(--color-ink-soft); }
.center{ text-align:center; }
.grid{ display:grid; gap: 28px; }
.g2{ grid-template-columns: repeat(2,1fr); }
.g3{ grid-template-columns: repeat(3,1fr); }
.g4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .g3{ grid-template-columns: repeat(2,1fr);} .g4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .g2,.g3,.g4{ grid-template-columns: 1fr; } }

.card{
  background: var(--color-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-soft);
}

/* Placeholder image frame — used until real photography is dropped in */
.frame{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #EAD9B8, #DEC79C);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--color-line);
}
.frame.square{ aspect-ratio: 1/1; }
.frame.wide{ aspect-ratio: 16/9; }
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame .ph-icon{ width: 38%; opacity: .55; }
.frame .ph-label{
  position:absolute; bottom:10px; left:10px; right:10px;
  font-family: var(--font-mono); font-size:.62rem; letter-spacing:.04em;
  color: rgba(58,42,31,.55); background: rgba(255,251,242,.7);
  padding: 4px 8px; border-radius: 6px; text-align:center;
}

/* Skip link for accessibility */
.skip-link{
  position:absolute; left:-999px; top:0;
  background: var(--color-ink); color:#fff; padding:10px 16px; z-index: 999;
}
.skip-link:focus{ left: 10px; top: 10px; border-radius:8px; }