/* ==========================================================================
   Master Chef Supply Ltd — Theme
   Aesthetic: premium FMCG import & distribution. Deep pantry-green + warm
   saffron gold. Confident, modern, trustworthy — a working supply chain
   dressed for a board deck. Dark "Warehouse" mode is the brand default.
   ========================================================================== */
:root{
  --bg:#0a1712; --surface:#0f2119; --surface-2:#15291f; --text:#eef6ef;
  --muted:#a3bcac; --border:rgba(238,246,239,.10);
  --accent:#dba838; --accent-2:#49a86a; --accent-ink:#191204;
  --header-bg:rgba(9,18,14,.84); --nav-link:#eef6ef;
  --hero-overlay:linear-gradient(105deg,rgba(6,13,10,.93) 10%,rgba(6,13,10,.62) 54%,rgba(6,13,10,.28) 100%);
  --hero-lead:rgba(238,246,239,.88);
  --input-bg:rgba(255,255,255,.04); --input-bg-focus:rgba(255,255,255,.07);
  --cta-bg:linear-gradient(120deg,#0f2119,#1a3526);
  --footer-bg:#071009;
  --shadow-sm:0 2px 12px rgba(3,9,6,.3);
  --shadow:0 24px 60px -24px rgba(3,9,6,.55);
  --shadow-lg:0 50px 100px -34px rgba(3,9,6,.6);
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --header-h:84px;
}
h1,.h1,h2,.h2,.display{font-weight:700;letter-spacing:-.022em}
h3,.h3{font-weight:600}
.eyebrow{color:var(--accent)}

/* every page hero here is a dark-overlaid photo, in both themes — keep the
   header readable against it before scroll, regardless of active theme */
.site-header .brand{color:#fff}
.site-header .nav-links a{color:rgba(255,255,255,.92)}
.site-header .nav-links a.is-active{color:var(--accent)}
.site-header .nav-toggle{border-color:rgba(255,255,255,.35)}
.site-header .nav-toggle span{background:#fff}
.site-header .theme-toggle{color:#fff;border-color:rgba(255,255,255,.35)}
.site-header.is-scrolled .brand{color:var(--text)}
.site-header.is-scrolled .nav-links a{color:var(--text)}
.site-header.is-scrolled .nav-links a.is-active{color:var(--accent)}
.site-header.is-scrolled .nav-toggle{border-color:var(--border)}
.site-header.is-scrolled .nav-toggle span{background:var(--text)}
.site-header.is-scrolled .theme-toggle{color:var(--text);border-color:var(--border)}
.site-header .theme-toggle:hover{color:var(--accent);border-color:var(--accent)}

/* ambient background flourish — warm gold + green glow, like light through a warehouse skylight */
body{background:
  radial-gradient(1200px 620px at 86% -10%,rgba(219,168,56,.10),transparent 60%),
  radial-gradient(950px 520px at -8% 20%,rgba(73,168,106,.10),transparent 60%),
  var(--bg)}

/* section surfaces */
.section--panel{background:linear-gradient(180deg,var(--surface),transparent)}
.bg-surface{background:var(--surface)}
.hairline-top{border-top:1px solid var(--border)}
.section--alt{background:var(--surface-2)}
.section--dark{background:var(--footer-bg);color:#eef6ef;--text:#eef6ef;--muted:#a3bcac;--border:rgba(238,246,239,.10);--surface:#0f1f16;--surface-2:#132818}
.section--dark .eyebrow{color:var(--accent)}
.section--dark .card{background:#0f1f16}

/* gold rule */
.rule-gold{width:60px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);border:0;margin:20px 0}

/* number-led steps ("Why Master Chef Supply") */
.steps{counter-reset:s}
.step{position:relative;padding-left:66px}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;left:0;top:-4px;
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--accent)}
.step h4{margin-bottom:6px}
.step p{color:var(--muted);font-size:.95rem}

/* quote / statement */
.quote{font-family:var(--font-display);font-weight:500;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.4;letter-spacing:-.01em}

/* pill on dark */
.pill{background:rgba(255,255,255,.04)}

/* ------- Data table (Who We Supply) ------------------------------------ */
.datatable-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.datatable{width:100%;border-collapse:collapse;min-width:640px;background:var(--surface)}
.datatable th{text-align:left;font-family:var(--font-display);font-weight:600;font-size:.86rem;letter-spacing:.02em;
  color:var(--accent-ink);background:var(--accent);padding:16px 22px}
.datatable td{padding:15px 22px;border-bottom:1px solid var(--border);font-size:.95rem;color:var(--text)}
.datatable td:last-child{color:var(--muted)}
.datatable tr:last-child td{border-bottom:0}
.datatable tbody tr{transition:background var(--t)}
.datatable tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* ------- Channel chips (Routes to Market) ------------------------------- */
.channels{display:flex;flex-wrap:wrap;gap:12px}
.channel-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.85em 1.3em;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);font-weight:600;font-size:.94rem;color:var(--text);
  transition:transform var(--t),border-color var(--t),background var(--t)}
.channel-chip svg{width:18px;height:18px;color:var(--accent);flex:none}
.channel-chip:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--surface))}

/* ------- Coverage: hub & spoke network ----------------------------------- */
.hub-map{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:clamp(28px,5vw,56px);overflow:hidden}
.hub-map__svg{width:100%;height:auto;display:block}
.hub-map__svg .spoke{stroke:var(--border);stroke-width:1.4;fill:none}
.hub-map__svg .hub-dot{fill:var(--accent)}
.hub-map__svg .city-dot{fill:var(--accent-2)}
.hub-map__svg .hub-label{font-family:var(--font-display);font-weight:700;font-size:15px;fill:var(--text)}
.hub-map__svg .city-label{font-family:var(--font-body);font-weight:600;font-size:11.5px;fill:var(--muted)}
.hub-map__pulse{animation:hubPulse 2.8s ease-in-out infinite}
@keyframes hubPulse{0%,100%{opacity:.55;r:5}50%{opacity:1;r:7}}
@media (prefers-reduced-motion:reduce){.hub-map__pulse{animation:none}}

/* city chip list (mobile-friendly companion to the map) */
.city-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.city-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.55em 1.05em;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);font-size:.86rem;font-weight:600;color:var(--muted)}
.city-chip.is-hub{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.city-chip svg{width:14px;height:14px}

/* stat inline (used in dense rows) */
.inline-stats{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,44px)}
.inline-stats .stat__num{font-size:clamp(1.5rem,2.6vw,2rem)}

/* selection */
::selection{background:var(--accent);color:var(--accent-ink)}

/* ==========================================================================
   Light theme — "Market Fresh": warm ivory, deep saffron, forest ink.
   Activated via <html data-theme="light">. Dark remains the brand default.
   ========================================================================== */
html[data-theme="light"]{
  --bg:#faf7ee; --surface:#ffffff; --surface-2:#f1ece0; --text:#12261c;
  --muted:#57685c; --border:rgba(18,38,28,.12);
  --accent:#b07f1e; --accent-2:#2f8f57; --accent-ink:#ffffff;
  --header-bg:rgba(250,247,238,.9); --nav-link:#12261c;
  --input-bg:#f3efe2; --input-bg-focus:#ffffff;
  --cta-bg:linear-gradient(120deg,#0f2119,#173a26);
  --shadow-sm:0 2px 12px rgba(18,38,28,.08);
  --shadow:0 22px 55px -22px rgba(18,38,28,.22);
  --shadow-lg:0 45px 90px -32px rgba(18,38,28,.28);
}
html[data-theme="light"] body{background:
  radial-gradient(1200px 620px at 86% -10%,rgba(176,127,30,.07),transparent 60%),
  radial-gradient(950px 520px at -8% 20%,rgba(47,143,87,.07),transparent 60%),
  var(--bg)}
/* footer stays dark in both modes — re-scope its palette locally */
html[data-theme="light"] .site-footer{--text:#eef6ef;--muted:#a3bcac;--border:rgba(238,246,239,.10);
  background:#0f2119;border-top-color:rgba(238,246,239,.10)}
html[data-theme="light"] .datatable th{color:#fff}
html[data-theme="light"] .ticks li::before{background-color:rgba(176,127,30,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b07f1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
html[data-theme="light"] .acc__q::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b07f1e' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}
html[data-theme="light"] .pill{background:#fffdf8;box-shadow:var(--shadow-sm)}
html[data-theme="light"] .hero__overlay{background:linear-gradient(105deg,rgba(6,13,10,.9) 10%,rgba(6,13,10,.58) 54%,rgba(6,13,10,.24) 100%)}
html[data-theme="light"] .section--dark{--text:#eef6ef;--muted:#a3bcac;--border:rgba(238,246,239,.10);--surface:#0f1f16;--surface-2:#132818;background:#071009;color:#eef6ef}

/* theme toggle icons: dark default shows the sun (switch to light) */
.theme-toggle .i-moon{display:none}
html[data-theme="light"] .theme-toggle .i-sun{display:none}
html[data-theme="light"] .theme-toggle .i-moon{display:block}