/* ===========================================================================
   Ask the Kitchen — shared brand layer
   ---------------------------------------------------------------------------
   The single source of truth for tokens and primitives across BOTH the public
   marketing site and the application portal. Mounted read-only into each
   container so neither can edit it and the two cannot drift apart.

     marketing-stack   ../shared/brand.css -> /var/www/html/assets/brand.css
     dev-stack         ../shared/brand.css -> public_html/assets/brand.css

   Rule of thumb: if it describes the BRAND (colour, type, the sticker edge,
   buttons) it belongs here. If it describes a PAGE (hero layout, pantry
   drawers, the tonight grid) it belongs in that stack's own stylesheet.
   =========================================================================== */

:root{
  /* --- palette ------------------------------------------------------------ */
  --ink:     #191428;   /* deep aubergine-black: all text, all borders */
  --milk:    #FFF9EE;   /* page base */
  --custard: #FFCE28;   /* cupboard / primary highlight */
  --tomato:  #FF4A2E;   /* actions, urgency, warnings */
  --mint:    #00B283;   /* fridge / fresh / success */
  --frost:   #9BD9F2;   /* freezer / information */
  --plum:    #3D2A6B;   /* depth, dark panels */
  --smoke:   rgba(25,20,40,.62);
  --hairline:rgba(25,20,40,.18);

  /* Location colours are semantic, not decorative. The portal uses the same
     three for pantry storage areas, so a chip means the same thing in both. */
  --loc-cupboard: var(--custard);
  --loc-fridge:   var(--mint);
  --loc-freezer:  var(--frost);

  /* --- type --------------------------------------------------------------- */
  --display: 'Archivo', system-ui, -apple-system, sans-serif;
  --body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* --- the sticker system ------------------------------------------------- */
  /* Chunky border plus a hard offset shadow. Applied consistently from chips
     to pricing cards, this is what makes the brand recognisable. No blurs. */
  --edge:   3px solid var(--ink);
  --edge-2: 2px solid var(--ink);
  --pop:    5px 5px 0 var(--ink);
  --pop-sm: 3px 3px 0 var(--ink);
  --r:      18px;
  --r-sm:   12px;
}

/* --- base ------------------------------------------------------------------ */
*{ box-sizing:border-box }

body{
  margin:0;
  background:var(--milk);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
a{ color:inherit }

/* Visible, branded focus. Never remove this — the portal gets used one-handed
   in a kitchen and keyboard users need it just as much. */
:focus-visible{
  outline:4px solid var(--tomato);
  outline-offset:3px;
  border-radius:6px;
}

h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:'wdth' 118;   /* the chunk comes from width, not size */
  letter-spacing:-.02em;
  line-height:.95;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.6rem,7.2vw,5.1rem) }
h2{ font-size:clamp(2rem,5vw,3.4rem) }
h3{ font-size:clamp(1.15rem,2.4vw,1.5rem); line-height:1.05 }
p{ margin:0 0 1rem }

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

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--smoke);
  margin:0 0 .9rem;
}

.wrap{ width:min(1180px, 100% - 2.5rem); margin-inline:auto }
.section{ padding:clamp(4rem,9vw,7rem) 0 }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 110;
  font-size:1.02rem; text-decoration:none; cursor:pointer;
  padding:.85rem 1.5rem;
  border:var(--edge); border-radius:999px;
  background:var(--custard); color:var(--ink);
  box-shadow:var(--pop-sm);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--pop) }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink) }
.btn--hot{ background:var(--tomato); color:#fff }
.btn--cool{ background:var(--frost) }
.btn--plain{ background:transparent; box-shadow:none }
.btn--lg{ font-size:1.15rem; padding:1.05rem 1.9rem }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:var(--pop-sm) }

/* Card: the workhorse. Everything boxed uses this. */
.card{
  border:var(--edge); border-radius:var(--r);
  background:#fff; box-shadow:var(--pop);
  padding:1.4rem;
}
.card--custard{ background:var(--custard) }
.card--mint{ background:var(--mint); color:#fff }
.card--frost{ background:var(--frost) }
.card--flat{ box-shadow:var(--pop-sm) }

/* Tag: small mono label. Used for storage areas, statuses, plan flags. */
.tag{
  display:inline-block;
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:999px;
  background:var(--ink); color:var(--custard);
}
.tag--hot{ background:var(--tomato); color:#fff }
.tag--mint{ background:var(--mint); color:#fff }

/* Chip: a toggleable ingredient. Shared with the portal's pantry view. */
.chip{
  font-family:var(--body); font-weight:700; font-size:.86rem; cursor:pointer;
  border:var(--edge-2); border-radius:999px; padding:.34rem .8rem;
  background:#fff; color:var(--smoke);
  transition:transform .1s ease, background .1s ease, color .1s ease;
}
.chip:hover{ transform:translateY(-2px) }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--milk); box-shadow:var(--pop-sm) }
.chip--cupboard[aria-pressed="true"]{ background:var(--loc-cupboard); color:var(--ink) }
.chip--fridge[aria-pressed="true"]{   background:var(--loc-fridge);   color:#fff }
.chip--freezer[aria-pressed="true"]{  background:var(--loc-freezer);  color:var(--ink) }

.mono{ font-family:var(--mono); font-size:.78rem; letter-spacing:.06em }
.muted{ color:var(--smoke) }

/* --- accessibility --------------------------------------------------------- */

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:absolute; left:.5rem; top:-4rem; z-index:100;
  background:var(--ink); color:var(--custard); padding:.7rem 1.1rem;
  border-radius:var(--r-sm); font-family:var(--mono); font-size:.8rem;
  text-decoration:none;
  transition:top .15s ease;
}
.skip:focus{ top:.5rem }

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