/* ──────────────────────────────────────────────────────────────────────
   Creole Cravings Cuisine — design tokens
   SUPERSEDES build-brief §5. Matched to the LIVE mother site creolecravings.com.

   CORE CORRECTION: the storefront is WHITE / LIGHT based. Navy, red, and gold
   are ROLES, not the page background. (The navy sidebar is portals-only.)

   Role map (mother-site exact):
     white/cream  = base — page, cards, section bands
     navy         = STRUCTURE — body+heading text, product names, prices,
                    POPULAR badge, cart-panel header, hero info/stats strip
     red          = ACTION + logo script — primary buttons, active "All" pill,
                    cart button
     gold         = ACCENT — hero accent word, cart count badge, info icons,
                    available/popular starbursts, gold underlines
     gray         = secondary text / descriptions, "SOLD OUT" badge
     green + palm/hibiscus = THIS restaurant's sibling signature (a light
                    tropical accent layer — dividers, hero corners, flourishes)

   Humanist sans for all UI; no serif anywhere (also what keeps it distinct
   from Griot ak Banan). Wordmark is the supplied logo image.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand palette (mother-site hexes) ── */
  --navy-900: #16294A;   /* deepest — headings, sidebar, info strip */
  --navy-800: #1B2F52;   /* navy structure / bands */
  --navy-700: #24406E;   /* hover / raised navy */
  --navy-600: #2E5187;

  --red:      #E03127;   /* action + logo script */
  --red-600:  #C7281F;
  --red-700:  #A81F18;

  --gold:     #F4A52A;   /* accent / highlight */
  --gold-300: #F8C065;
  --gold-700: #D2851A;

  --green:    #1E7A46;   /* Haitian green — sibling signature accent */
  --green-600:#196A3C;
  --green-300:#3FA268;

  --white:    #FFFFFF;   /* primary surface (storefront base) */
  --cream:    #FBF6EC;   /* warm section bands */
  --cream-200:#F5EEDD;
  --line:     #ECEEF1;   /* very light gray card/border lines */
  --line-200: #DCE0E6;

  --gray:     #6B7686;   /* secondary text, SOLD OUT badge */
  --gray-700: #4A5462;
  --ink:      #16294A;   /* primary text == navy structure */

  --on-navy:  #FFFFFF;
  --on-navy-muted: #AFC0DA;

  /* ── Semantic (STOREFRONT = light) ── */
  --bg:            var(--white);
  --surface:       var(--white);
  --surface-band:  var(--cream);     /* optional warm section band */
  --border:        var(--line);
  --text:          var(--ink);       /* navy */
  --text-muted:    var(--gray);
  --heading:       var(--navy-900);
  --price:         var(--navy-900);
  --accent:        var(--gold);
  --action:        var(--red);       /* primary buttons, cart */
  --positive:      var(--green);

  /* ── Typography ── */
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Heavy poster-grotesque for headlines (mother-site "flavors of home" feel) */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif; /* used at 800 wght */
  --font-script: "Pacifico", cursive;   /* incidental script fallback only; real wordmark is the logo image */

  /* ── Radii — storefront soft, portal sharper ── */
  --radius-card: 14px;
  --radius-portal: 6px;
  --radius-pill: 999px;

  /* ── Elevation (navy-tinted, soft on white) ── */
  --shadow-sm: 0 1px 2px rgba(22,41,74,.06), 0 1px 3px rgba(22,41,74,.05);
  --shadow-md: 0 6px 18px rgba(22,41,74,.10);
  --shadow-lg: 0 16px 40px rgba(22,41,74,.16);
  --shadow-card-hover: 0 14px 34px rgba(22,41,74,.16);

  /* ── Layout ── */
  --sidebar-w: 240px;
  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Reusable component primitives (storefront) ── */

/* Navy "POPULAR" badge / gray "SOLD OUT" badge */
.cc-badge {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff; background: var(--navy-900);
  padding: .28em .62em; border-radius: var(--radius-pill);
}
.cc-badge--sold { background: var(--gray); }

/* Gold starburst "available / popular" accent */
.cc-starburst {
  color: var(--navy-900); background: var(--gold);
  font-weight: 800; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .3em .55em; border-radius: var(--radius-pill);
  box-shadow: 0 0 0 3px rgba(244,165,42,.22);
}

/* Red pill primary action ("Add" / "Choose options" / cart) */
.cc-action {
  font-family: var(--font-ui); font-weight: 700; font-size: .9rem;
  color: #fff; background: var(--red);
  border: 0; border-radius: var(--radius-pill);
  padding: .6em 1.2em; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.cc-action:hover { background: var(--red-600); box-shadow: var(--shadow-sm); }
.cc-action:active { transform: translateY(1px); }

/* Ghost / secondary button (e.g. "Call to order") */
.cc-ghost {
  font-family: var(--font-ui); font-weight: 700; font-size: .9rem;
  color: var(--navy-900); background: transparent;
  border: 2px solid var(--navy-900); border-radius: var(--radius-pill);
  padding: calc(.6em - 2px) 1.2em; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
}
.cc-ghost--on-photo { color: #fff; border-color: rgba(255,255,255,.85); }

/* Category filter pill (active = red, rest = white/outlined) */
.cc-pill {
  font-weight: 700; font-size: .82rem;
  color: var(--navy-900); background: #fff;
  border: 1.5px solid var(--line-200); border-radius: var(--radius-pill);
  padding: .45em .95em; cursor: pointer; display: inline-flex; align-items: center; gap: .4em;
}
.cc-pill[aria-selected="true"] { background: var(--red); color: #fff; border-color: var(--red); }

/* White product card */
.cc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease;
}
.cc-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

/* Navy info/stats strip under the hero */
.cc-info-strip { background: var(--navy-900); color: var(--on-navy); }
.cc-info-strip .icon { color: var(--gold); }

/* Cart count badge (gold on navy header) */
.cc-cart-count {
  background: var(--gold); color: var(--navy-900);
  font-weight: 800; font-size: .72rem;
  min-width: 1.4em; height: 1.4em; padding: 0 .35em;
  border-radius: var(--radius-pill); display: inline-grid; place-items: center;
}