/*
Theme Name:  OO Base
Theme URI:   https://ryanaxtell.dev/
Description: The thin GeneratePress child a restaurant-ordering site starts from. It carries the four Orderable templates that cannot live anywhere but a theme, the site's type, and the brand colour. Everything else is in the fieldkit-order plugin, so an ordering fix reaches every client site by updating one plugin rather than by merging into twenty diverged themes.
Author:      Ryan Axtell
Template:    generatepress
Version:     0.1.0
*/

/* ==========================================================================
   THE OVERRIDE POINT.

   This is where a client's build changes how the ordering layer looks, and for
   most sites it is the only file that needs editing. The plugin drives every
   colour, radius and dimension through an `--oo-*` custom property with a
   sensible default; redeclaring one here wins, because fieldkit-order makes
   this stylesheet a dependent of its own (see the plugin's `inc/assets.php`)
   so WordPress always prints it last.

   Do NOT copy the plugin's stylesheet in here to edit it. The whole point of
   the split is that the ordering CSS updates in place; a copy is a fork, and a
   fork is how twenty sites end up with twenty different bugs.

   The full token list is at the top of
   `fieldkit-order/assets/order.css` (`:root`). The ones a brand usually
   touches:

     --oo-brand        the accent a client recognises as theirs. Defaults to
                       --oo-ink, so an unbranded site is monochrome rather than
                       accidentally red. Declared by the plugin on
                       `.orderable-main`, so override it there -- see the note
                       below the token list.
     --oo-accent       the alert/price-change red. Semantic, not decorative;
                       change it only to keep a brand's own warning colour.
     --oo-ink          body text
     --oo-muted        secondary text
     --oo-ground       card and page background
     --oo-sunk         the panel behind a photo
     --oo-line         hairlines
     --oo-radius       card corner
     --oo-btn-radius   button corner
     --oo-photo        carousel tile size
     --oo-layout-max   caps the menu layout's width. Unset by default, so the
                       layout is as wide as GeneratePress's container, which is
                       the width the client configured.
   ========================================================================== */

/* THE SELECTOR IS TWO SELECTORS, AND IT MATTERS. MEASURED, NOT ASSUMED.

   The plugin does not put all of its tokens in one place, and it is right not
   to. The shared icon and focus tokens are on `:root`, because the product
   drawer and the sticky order bar are rendered OUTSIDE the menu wrapper and
   would otherwise fall back to Orderable's own square-ended glyphs. Everything
   else -- ink, ground, line, brand, radius, the photo size -- is on
   `.orderable-main`, the wrapper Orderable prints around the menu.

   That makes a `:root`-only override a trap. Custom properties inherit, and an
   element inside `.orderable-main` takes the value declared on `.orderable-main`
   whatever a `:root` rule later in the cascade says, because the nearer
   declaration wins for that subtree. A client writing `:root { --oo-brand: ... }`
   would see it apply to the drawer and do nothing at all to the menu -- half a
   brand, with no error.

   The first version of this file made exactly that mistake, and it was caught by
   reading the computed value in a browser rather than by reading the CSS:
   `--oo-brand` came back as the empty string, because it was declared here as
   `var(--oo-ink)` at `:root`, where `--oo-ink` does not exist.

   Both selectors, then. `.orderable-main` ties with the plugin's own rule on
   specificity and wins on order, which the plugin guarantees by making this
   stylesheet a dependent of its own. */

:root,
.orderable-main {
	/* Nothing overridden by default, deliberately: an unbranded build should
	   look unbranded rather than like a half-finished copy of someone else's
	   site. A client build adds its colours here.

	       --oo-brand: #b4472a;
	       --oo-radius: 6px;
	*/
}