/* =========================================================================
   walker_tokens.css — the walker design tokens, portable.

   WHAT THIS IS, AND WHY IT IS NOT walked-shell.css.
   walked-shell.css carries three things: the :root token block, the page
   chrome (.bar / .stage / .foot), and a body{} that paints the cream gradient
   and sets the base font. Loading it wholesale outside walked.html drops that
   body rule and a whole header implementation onto pages that already have
   their own -- which on an OpenCart route wrapped by a WordPress theme means
   two headers and a fight over the background.

   So the tokens are extracted here and NOTHING else. Any page that wants the
   walker palette loads this and inherits the vocabulary; the page decides for
   itself what to paint with it. When --accent is retuned in walked-shell.css,
   change it here too -- these two blocks are the contract.

   LOAD ORDER: first. Everything downstream reads var(--*), so this has to be
   registered before the sheets that consume it.

   ------------------------------------------------------------------------
   THREE ACCENT ROLES, AND THEY ARE NOT INTERCHANGEABLE
     --accent         surface only  -- borders, rules, rings, fills. 3:1 floor.
     --accent-deep    text          -- anything a person reads.      4.5:1 floor.
     --accent-bright  dark surfaces -- logos and counts on ink.
   Never use --accent as a `color:`. walked-shell.css line 34 records that as
   "the entire contrast bug"; it is repeated here so the rule travels with the
   tokens rather than staying behind in a file this one deliberately replaces.
   ========================================================================= */

/* =========================================================================
   1. Self-hosted faces.

   Not fonts.googleapis.com. OpenCart's document registry is emitted through
   oc.class.php line 435 as wp_enqueue_style('oc-...', $base . $href) -- the
   store URL is prepended unconditionally, so an absolute or protocol-relative
   font URL becomes https://flipsidez.com/shop///fonts.googleapis.com/... and
   404s. Self-hosting sidesteps the bridge entirely, matches how the drawstring
   bag already serves its faces out of /webfonts/, and removes a third-party
   round trip from the critical path.

   Jost is variable: one file covers 100-900, so the weight range is declared
   and every weight below is a real instance rather than a synthetic bold.
   Marcellus ships single-weight 400 and is used at 400 everywhere.
   ========================================================================= */
@font-face{
  font-family:'Jost';
  src:url('https://flipsidez.com/webfonts/Jost-VariableFont_wght.woff2') format('woff2-variations'),
      url('https://flipsidez.com/webfonts/Jost-VariableFont_wght.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('https://flipsidez.com/webfonts/Jost-Italic-VariableFont_wght.woff2') format('woff2-variations'),
      url('https://flipsidez.com/webfonts/Jost-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Marcellus';
  src:url('https://flipsidez.com/webfonts/Marcellus-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =========================================================================
   2. Tokens. Lockstep with walked-shell.css :root.
   ========================================================================= */
:root{
  /* ACCENT = AQUA. GOLD = WEDDINGS ONLY.
     Gold was doing two jobs: global brand accent AND the wedding segment's
     identity colour. Corporate is already teal, so a blanket gold->aqua swap
     would have collapsed the coral / gold / teal segment system. Aqua takes
     the accent role; gold keeps the one job it was good at.
     To retune the hue, change these four lines and nothing else. */
  --accent:#3695ab;          /* 3.08 on cream, 3.47 on white -- surfaces only */
  --accent-deep:#1d778c;     /* 4.58 on cream, 5.16 on white -- text          */
  --accent-bright:#4db4cb;   /* 6.76 on ink,   5.35 on foot  -- dark surfaces */
  --accent-tint:#ebf5f7;     /* the pale wash under crumbs, gates, personas   */
  --accent-line:#a8d3de;     /* hairline on tinted surfaces                   */

  /* --accent as bare RGB channels, for rgba() alpha work.
     CSS cannot decompose a hex token, so any rule needing a translucent
     accent had to hardcode the channels -- which is how easyorder-v2.css
     ended up with 27 literal rgba(156,125,63,a) values frozen at the OLD
     gold, still sitting there a full palette generation later. Written as
     rgba(var(--accent-rgb), a) they follow the accent forever.
     MUST be kept in step with --accent above. */
  --accent-rgb:54, 149, 171;

  /* gold survives, scoped to weddings */
  --wed:#9c7d3f;
  --wed-deep:#7d5e22;

  /* Back-compat aliases. accordion.css, walker_bag.css and the interview panel
     all consume var(--gold)/var(--darkgold)/var(--bright-gold); aliasing here
     recolours every one of them without touching a rule in those files.
     --brass is styles.css's token, pinned to gold by recolor.css. */
  --gold:var(--accent);
  --darkgold:var(--accent-deep);
  --bright-gold:var(--accent-bright);
  --brass:var(--accent);

  --cream:#f6f1e6;--cream-deep:#efe7d6;--panel:#fbf8f1;--ink:#16212c;
  --ink-soft:#45433c;--hairline:#ddd3bf;
  --foot:#26333f;--foot-line:#36434f;--foot-text:#ccd2d8;
  --sans:'Jost',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --serif:'Marcellus',Georgia,serif;

  /* the shared grid */
  --maxw:1180px;
  --gutter:32px;
  --barh:74px;             /* header height; the mobile drawer hangs off it */
}
@media (max-width:900px){ :root{ --gutter:24px; --barh:66px; } }
@media (max-width:560px){ :root{ --gutter:18px; } }

/* =========================================================================
   3. Logo fills.

   Lives here rather than in walker_nav.css because the footer wordmark uses
   the same classes against a navy ground and needs the bright end of the
   accent. Keeping both pairs together is what stops the two drifting.
   ========================================================================= */
.logo-light .lg-ink{fill:var(--ink);}
.logo-light .lg-acc{fill:var(--accent);}
.logo-foot  .lg-ink{fill:var(--cream);}
.logo-foot  .lg-acc{fill:var(--accent-bright);}   /* footer is navy -- needs the bright end */

/* =========================================================================
   4. Reduced motion + focus ring.

   Global on the walker because every surface here animates something. The
   focus ring uses --gold (aliased to --accent) as an OUTLINE, which is a
   surface role, so the 3:1 floor applies and it is legal.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}