/* RotoChex theme: old-school rotisserie counter.
   Deep bottle green, golden roast, tomato + cream checkerboard trim, slab-serif signage. */
:root{
  --bg:#0F2A20; --bg-2:#123327; --surface:#173D2F; --surface-2:#1E4A39;
  --line:#28543F; --line-2:#33614C; --line-3:#4D7A66;
  --cream:#F6EEDC; --cream-2:#E6DCC4; --muted:#B5C3B4; --muted-2:#8EA394;
  --copper:#F2B33D; --copper-hover:#FFC65A; --copper-text:#F2B33D; --brown:#D9472B;
  --error:#FF9B85; --on-accent:#0F2A20; --hover-bg:#1E4A39;
  --disabled-bg:#4D6B5D; --disabled-fg:#173D2F;
  --header-bg:rgba(15,42,32,.96); --tabbar-bg:rgba(18,51,39,.97); --footer-bg:#0A1F17;
  --banner-bg:#D9472B; --banner-fg:#FFF6E5; --alert-bg:#3A1A14; --alert-fg:#FFD9CF;
  --shade-rgb:10,31,23; --on-photo:#F6EEDC; --on-photo-2:#E6DCC4; --accent-on-photo:#F2B33D;
  --input-scheme:dark; --grain:.45;
  --display:'Bitter',Rockwell,'Roboto Slab',Georgia,serif;
  --body:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tomato:#D9472B;
  --checks:repeating-conic-gradient(#F6EEDC 0 25%,#D9472B 0 50%) 0 0/16px 16px;
  color-scheme:dark;
}
.display,.feature-card__name,.cat__title,.panel legend,.dialog-head h2,.picker__head h2{letter-spacing:-.005em}
/* Checkerboard trim: under the header, above the footer, under section heads */
.site-header{border-bottom:0}
.site-header::after{content:'';display:block;height:8px;background:var(--checks)}
.site-footer{border-top:0;position:relative}
.site-footer::before{content:'';position:absolute;left:0;right:0;top:0;height:10px;background:var(--checks)}
.sides__head{border-bottom:0;position:relative;padding-bottom:22px}
.sides__head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--checks)}
.brand-roto{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-roto__mark{width:48px;height:48px;flex:none}
.brand-roto__word{display:flex;flex-direction:column;font-family:var(--display);font-weight:900;font-size:24px;line-height:.92;text-transform:uppercase;letter-spacing:.02em}
.brand-roto__word span:first-child{color:var(--copper)}
.brand-roto__word span:last-child{color:var(--cream);letter-spacing:.09em}
/* Buttons: sign-board corners instead of pills */
.btn,.chip,.choice,.cart-btn{border-radius:8px}
.btn-primary{box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--copper);border-color:var(--copper);color:var(--on-accent)}
.cart-count{background:var(--tomato);color:#FFF6E5}
.round-btn{border-radius:8px}
.stepper--solid{border-radius:8px}
/* Hero */
.hero__img{object-position:55% 50%}
.hero .eyebrow{color:var(--copper)}
.hero__title{text-transform:none;font-size:clamp(58px,11vw,128px);line-height:.92}
.hero__title span{display:block;color:var(--copper)}
/* Cards: framed like a menu board */
.feature-card,.cat,.sides,.summary,.confirm__card{border-radius:10px;border:2px solid var(--line-2)}
.feature-card{background:var(--surface)}
.feature-card:hover{border-color:var(--copper)}
.feature-card__name{text-transform:none}
.cat{background:var(--surface)}
.cat__title{text-transform:none;font-size:42px}
.sides{background:var(--surface)}
.sides__head{background:var(--surface-2)}
.menu{border-top:0;position:relative}
.menu::before{content:'';position:absolute;left:0;right:0;top:0;height:8px;background:var(--checks)}
.item .price,.feature-card .price{color:var(--copper)}
/* Checkout */
.panel{border-radius:10px;background:var(--bg-2)}
.panel legend{text-transform:none}
.input{border-radius:8px;background:var(--bg)}
.step-dot--done{background:var(--tomato);color:#FFF6E5}
.confirm__badge{background:var(--copper);color:var(--on-accent)}
.status-dot--done{background:var(--tomato)}
.toast{background:var(--copper);color:var(--on-accent)}
.toast button{background:var(--bg);color:var(--cream)}
.footer-logo-roto{display:flex;align-items:center;gap:14px;margin:0}
.footer-logo-roto svg{width:72px;height:72px}
.footer-logo-roto span{display:flex;flex-direction:column;font-family:var(--display);font-weight:900;font-size:46px;line-height:.9;text-transform:uppercase}
.footer-logo-roto span b{color:var(--copper);font-weight:900}
.footer-logo-roto span i{font-style:normal;color:var(--cream);letter-spacing:.09em}
