/* Scroggy's DopaDash — brand tokens. Structure lives in /shared/css/base.css.

   THE COLOUR CONTRACT, which every rule below exists to enforce:

     · on ORANGE          → text is WHITE or CREAMY YELLOW. Never dark.
     · on WHITE / CREAM   → text is NEAR-BLACK or DEEP ORANGE. Never white.
     · on CREAMY YELLOW   → text is DARK.

   Three surfaces, four inks. The page is orange, panels (cards, menu rows,
   sheets, the drawer) are cream, and buttons/chips on the orange are creamy
   yellow. The tracking page is light throughout — see .page-light.

   Measured: white on #ff563a is 3.16:1, which clears WCAG AA for large text
   (3:1) but not small (4.5:1). The contract forbids the dark ink that would
   fix it, so small copy on the orange is deliberately kept short and sparse,
   and anything substantial lives on a cream panel where it reaches 12:1. */
:root{
  --accent:#ffd27d;                  /* creamy yellow */
  --accent-soft:#ffffff;             /* the better of the two inks on orange */
  --accent-hover:#ffe3ab;
  --ink:#ff563a;                     /* the page ground: Scroggy orange */
  --surface:#fffaf2;                 /* panels: warm near-white */
  --paper:#ffffff;                   /* type on the orange */
  --muted:#ffffff;                   /* secondary type on the orange, also white */
  --line:rgba(255,255,255,.38);
  --deal:#a32f06; --gold:#ffd27d; --coin:#ffd27d;   /* stars on the orange */

  --r-control:6px; --r-panel:12px; --r-card:14px;
  --gap:14px; --wrap:1240px;
  --shadow:0 12px 30px rgba(96,38,2,.22);
  --display:"Henny Penny",Georgia,serif;
  --body:"Plus Jakarta Sans",system-ui,sans-serif;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0 25 14 40 20 25 26 20 40 14 26 0 20 14 14Z'/%3E%3C/svg%3E");

  --on-deal:#fff;
  --media-bg:#fdf0e4;
  --placeholder:#9c8471;
  --scrim-1:rgba(44,18,2,.55);
  --scrim-2:rgba(44,18,2,.72);
  --scrim-3:rgba(44,18,2,.80);
  --scrim-soft:rgba(44,18,2,.35);
  --spiral-glow:#ffc2a6;

  /* the Skint Wheel: orange and creamy yellow only, in shades chosen so the
     label on every wedge clears AA — white on the deep oranges (5.2:1 and
     7.4:1), near-black on the yellow (11:1) */
  --wheel-a:#c2410c;                 /* orange wedge  → white label */
  --wheel-b:#ffd27d;                 /* yellow wedge  → dark label */
  --wheel-x:#8c2a05;                 /* FREE / SUPER  → white label */
  --wheel-a-ink:#ffffff;
  --wheel-b-ink:#2b1405;
  --wheel-x-ink:#ffffff;

  /* Solid light coral behind Scroggy — one flat fill, no gradient, no scrim.
     Requested brand colour #ff7e4b. Contrast is tighter than the old deep red:
     white is 2.5:1 and the creamy yellow 1.8:1 — below AA even at headline
     sizes, so hero strings lean on their text-shadow and stay short. */
  --sky-glow:transparent;
  --sky-1:#ff7e4b; --sky-2:#ff7e4b; --sky-3:#ff7e4b;
  --cloud-1:transparent; --cloud-2:transparent;
  --cloud-3:transparent; --cloud-4:transparent;
  --cloud-5:transparent;
  --sky-scrim:transparent;
}

/* ===== panels: cream ground, near-black and deep-orange ink ==============
   Redefining the tokens re-scopes every var() inside these containers, and the
   explicit `color` makes children that merely inherit follow too. */
.card, .dish, .drawer, .celebrate-card, .pay-card, .deals-card, .wheel-card,
.sheet-card, .comment, .comment-form, .rev, .order-box, .courier, .vendor-hero,
.searchbar, .coin-chip, .chip, .sort-chip, .opt-row, .tag, .spec,
.when-chip, .tip-chip, .deliv, .menu-nav, #sgBadge{
  --paper:#241405;
  --muted:#6f5a49;
  --line:#f2dcc2;
  --ink:#fffaf2;
  --accent:#c2410c;
  --accent-soft:#c2410c;
  --accent-hover:#a32f06;
  --placeholder:#9c8471;
  --gold:#c2410c;                    /* stars on a cream panel */
  color:var(--paper);
}
.vendor-hero h1, .sheet-body h2, .order-box h2, .celebrate-card h2,
.pay-head h2, .deals-card h2, .wheel-card h2,
.rev-text, .dish-name, .rev-who, .ob-line{color:var(--paper)}
.vendor-hero .tagline, .vendor-stats, .rev-when, .dish-desc, .sheet-desc,
.courier span{color:var(--muted)}
/* the toast inverts on purpose: dark pill, cream type */
.toast{--paper:#241405; --ink:#fffaf2}

/* ===== the orange page =================================================
   base.css loads after this file, so same-specificity rules there would win.
   Prefixing with `body` buys the one point needed. No !important anywhere. */
body{background:var(--ink)}
body .brand-word .dop{color:var(--accent)}
body .brand .star{color:var(--accent)}
body .eyebrow{color:var(--accent)}
body .cat-rail{border-bottom-color:rgba(255,255,255,.26)}
body .site-header{border-bottom-color:rgba(255,255,255,.28)}
body .site-foot{border-top-color:rgba(255,255,255,.28); color:#fff}
body .site-foot a, body .back-link, body .rail-head .hint, body .feed-sub,
body .track-sub, body .loader, body .loader .display{color:#fff}
body .site-foot .brand-word{color:#fff}
body .site-foot .brand-word .dop, body .site-foot .brand .star{color:var(--accent)}
body .rev-big{color:#fff}

/* buttons and chips on the orange: creamy yellow fill, dark label, with a thin
   dark hairline so the pill reads as a control against the orange */
body .cart-btn, body .deals-btn, body .lang-toggle, body .sfx-btn,
body .btn-ghost, body .searchbar button,
body .chip[aria-pressed="true"], body .sort-chip[aria-pressed="true"]{
  background:#ffd27d; color:#2b1405; border:1px solid rgba(43,20,5,.38);
}
body .cart-count, body .deals-count{border-color:#ff563a; color:#fff}
body #sgBadge{background:#fffaf2; border-color:#f2dcc2; color:#241405}
body #sgBadge i, body #sgBadge svg{color:#c2410c; fill:#c2410c}

/* primary actions inside panels: deep orange on cream, white label */
body .card-add, body .pc-apply, body .sheet-add,
body .checkout-btn, body .pay-confirm{background:#c2410c; color:#fff; border:0}
body .btn-primary{color:#fff}

/* ===== the Skint Wheel ================================================== */
.wheel-disc{border-color:#fffaf2}
.wheel-disc .wl-a{color:var(--wheel-a-ink)}
.wheel-disc .wl-b{color:var(--wheel-b-ink)}
.wheel-disc .wl-x{color:var(--wheel-x-ink)}
.wheel-hub{background:#fffaf2; border-color:#c2410c}
.wheel-hub .star{color:#c2410c}
.wheel-pointer{border-top-color:#c2410c}

/* ===== the tracking page: light throughout ==============================
   Rule 2 applies here — near-black and deep orange on the light ground, and
   none of the white-on-orange page chrome above. */
body.page-light{background:#fffaf2; color:#241405}
body.page-light .track h1{color:#241405}
body.page-light .track-sub, body.page-light .back-link{color:#6f5a49}
body.page-light .step-body h3{color:#241405}
body.page-light .step-body p{color:#6f5a49}
body.page-light .step-dot{background:#fff; border-color:#e6cdb2; color:#241405}
body.page-light .step.done .step-dot{background:#c2410c; border-color:#c2410c; color:#fff}
body.page-light .step::before{background:#e6cdb2}
body.page-light .step.done::before{background:#c2410c}
body.page-light .track-bar{background:#fff; border-color:#e6cdb2}
body.page-light .track-bar i{background:#c2410c}
body.page-light .courier{background:#fff; border-color:#e6cdb2}
body.page-light .courier-av{background:#c2410c; color:#fff}
body.page-light .order-box{background:#fff; border-color:#e6cdb2}
body.page-light .site-foot{border-top-color:#e6cdb2; color:#6f5a49}
body.page-light .site-foot a{color:#c2410c}
body.page-light .site-foot .brand-word{color:#241405}
body.page-light .site-foot .brand-word .dop,
body.page-light .site-foot .brand .star{color:#c2410c}
body.page-light .btn-primary{background:#c2410c; color:#fff}

/* the courier avatar is an orange disc — its glyph follows the orange rule */
.courier-av{color:#fff}