/* Paramjit's Kitchen — night mode.

   Applied as <html data-theme="night">, set by the tiny inline snippet in each
   page's <head> (before first paint, so the site never flashes cream and then
   go dark) and toggled afterwards by night.js.

   Almost all of it is one palette swap: the site was already built on CSS
   custom properties, so the sections, cards, borders and buttons follow along
   on their own. What's below the palette block is the short list of places
   that hardcode a light value and can't.

   Loaded as a stylesheet rather than injected by JS precisely so it's parsed
   before the first paint. */

:root[data-theme="night"]{
  /* Warm and candlelit rather than neutral grey — the day palette's browns
     turned down, not swapped out. Accent and saffron are lifted a couple of
     steps because the terracotta that reads rich on cream goes muddy on
     near-black. */
  --paper:#15100A;
  --paper-2:#1C150D;
  --panel:#231A11;
  --ink:#F3E7D3;
  --ink-soft:#B49A7C;
  --line:rgba(243,231,211,0.15);
  --accent:#DA6A48;
  --accent-deep:#F08359;
  --saffron:#E2A44A;
  --grain:0.3;
  color-scheme:dark;
}

/* body's colours are literals in each page's <style>, so they need saying
   again — everything else inherits from the variables above. */
:root[data-theme="night"] body{ background:var(--paper); color:var(--ink); }

/* The paper grain multiplies, which on a dark ground is invisible. Screen
   turns the same texture into faint warm dust instead. Inline style, so
   !important is the only way to reach it. */
:root[data-theme="night"] .paper-grain{
  mix-blend-mode:screen !important;
  opacity:0.16 !important;
}

/* Sticky cuisine/search bar on the menu page: an inline translucent cream. */
:root[data-theme="night"] #menu{ background:rgba(28,21,13,0.88) !important; }

/* Alternating dish cards on narrow screens (index.html). */
@media (max-width:600px){
  :root[data-theme="night"] .dish-card:nth-child(even){ background:#2A2016; }
}

/* Google's map tiles are their own light-mode image. Not inverted — an
   inverted map looks wrong and misreads elevation shading — just dimmed
   enough that it stops being a lightbulb in the corner of the page. */
:root[data-theme="night"] iframe[title^="Map"]{
  /* !important because the iframe carries its own inline saturate(). */
  filter:saturate(0.62) brightness(0.56) contrast(1.1) !important;
}

/* Hover states that assumed a light ground. */
:root[data-theme="night"] .btn-ghost:hover{ background:rgba(243,231,211,0.10); }
:root[data-theme="night"] ::selection{ background:var(--accent); color:#15100A; }

/* ---- the toggle itself (both pages; colour is inherited from the header,
        which is cream over the hero and ink on the menu page) ---- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none; padding:0;
  border-radius:999px; border:1px solid currentColor; background:transparent;
  color:inherit; opacity:.72; cursor:pointer;
  transition:opacity .15s ease, transform .2s ease, background .15s ease;
}
.theme-toggle:hover{ opacity:1; transform:translateY(-1px); background:rgba(190,82,53,0.14); }
.theme-toggle svg{ width:16px; height:16px; display:block; }
@media (max-width:480px){ .theme-toggle{ width:32px; height:32px; } }
/* Only dropped on genuinely tiny screens. Measured at 360px: the header's
   contents come to 303px of 345px available with the toggle in, so hiding it
   there (as an earlier 380px cut-off did) lost night mode on ordinary phones
   for no reason. Below ~340px the logo + Call button + burger do run out. */
@media (max-width:340px){ .theme-toggle{ display:none; } }
