@import url('../../css/menu-drilldown.css');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700;800&display=swap');

/* ============================================================
   STREET FOOD (2026-08-09) — burger joints, döner, food trucks.
   Charcoal, acid yellow, condensed caps, sticker badges. Loud on
   purpose: the type does the shouting, the photos stay clean.
   ============================================================ */

:root {
    --ym-primary: #ffd400;
    --ym-primary-dark: #e0b800;
    --ym-ink: #ffffff;
    --ym-muted: #a5a5a8;
    --ym-bg: #17181a;
    --ym-card: #232427;
    --ym-border: #33353a;
    --ym-radius: 6px;
    --ym-radius-sm: 4px;
    --ym-shadow: none;
    --ym-shadow-lg: 0 -12px 40px rgba(0, 0, 0, .6);

    --cg-font-body: 'Barlow', -apple-system, sans-serif;
    --cg-font-display: 'Bebas Neue', 'Barlow', sans-serif;

    --cg-hero-min: 210px;
    --cg-hero-pad: 20px 16px 20px;
    --cg-scrim: linear-gradient(to bottom, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .72) 100%);
    --cg-hero-name-size: 46px;
    --cg-hero-name-weight: 400;
    --cg-hero-name-spacing: .02em;
    --cg-logo-size: 50px;
    --cg-logo-radius: 6px;

    --cg-gap: 10px;
    --cg-cat-ratio: 1 / 1;
    --cg-cat-radius: 6px;
    --cg-cat-name-size: 21px;
    --cg-cat-name-weight: 400;
    --cg-cat-name-spacing: .04em;
    --cg-cat-name-transform: uppercase;

    --cg-card-radius: 6px;
    --cg-card-pad: 11px;
    --cg-card-gap: 8px;
    --cg-thumb: 88px;
    --cg-thumb-radius: 4px;
    --cg-name-size: 23px;
    --cg-name-weight: 400;
    --cg-name-spacing: .03em;
    --cg-name-transform: uppercase;
    --cg-price-size: 17px;
    --cg-price-color: var(--ym-primary);

    --cg-pill-radius: 4px;
    --cg-pill-bg: transparent;
    --cg-pill-active-bg: var(--ym-primary);
    --cg-pill-active-ink: #17181a;
    --cg-search-radius: 6px;
    --cg-chip-radius: 4px;
    --cg-badge-radius: 3px;
    --cg-section-title-size: 26px;
    --cg-section-title-weight: 400;
}

/* Bebas has no lowercase and sits tight — give the lines their own metrics. */
.ym-card-name, .ym-cg-cat-name, .ym-hero-name, .ym-section-title { line-height: 1.02; }
.ym-card-desc { font-size: 12.5px; margin-top: 6px; }
.ym-cat-pill { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; }
.ym-cg-title, .ym-cg-crumb { font-size: 22px; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; }
.ym-cg-back, .ym-icon-btn.ym-lang-toggle { background: var(--ym-card); border-radius: 6px; }
.ym-cg-cat-count { background: var(--ym-primary); color: #17181a; border-radius: 3px; font-family: var(--cg-font-body); font-weight: 800; }
/* Sticker badges — the one place colour is allowed to fight the yellow. */
.ym-badge { background: var(--ym-primary); color: #17181a; font-weight: 800; letter-spacing: .04em; }
.ym-badge.veg, .ym-badge.vegan, .ym-badge.halal { background: #2c7a4b; border: none; color: #fff; }
.ym-badge.veg i, .ym-badge.vegan i, .ym-badge.halal i { color: #fff; }
.ym-badge.sold-out { background: #d92b2b; color: #fff; }
.ym-search { background: var(--ym-card); }
.ym-diet-chip { background: transparent; }
.ym-diet-chip.active { color: #17181a; }
.ym-sheet-title { font-size: 30px; font-weight: 400; letter-spacing: .03em; line-height: 1.05; }
.ym-allergen-chip, .ym-nutri { background: rgba(255, 255, 255, .05); border-color: var(--ym-border); }

/* The shared service FAB, cart "+" and modal buttons hardcode white text on
   --ym-primary (assets/menu/css/menu-actions.css, ordering.css). On this
   skin's acid yellow that is unreadable, so re-ink them locally — the shared
   files stay untouched for the other templates. */
.ym-actions-fab,
.ym-ord-add,
.ym-actions-btn,
.ym-act-ic-waiter { color: #17181a; }