/* ==========================================================================
   moonson — TOKENS
   --------------------------------------------------------------------------
   Two jobs, in this order:

     1. Declare the moonson design tokens (--m-*). Single source of truth,
        lifted from site/assets/css/epk.css so both sites stay in step.
     2. Push those values into the CSS variables Impreza 9.1 actually reads,
        so every builder element, WooCommerce button and form field inherits
        them without a single !important.

   WHY :root:root — Impreza writes its palette into an inline
   <style id="us-theme-options-css"> on :root. That block sits in <head> and
   may come after this file. :root:root has specificity (0,2,0) against
   Impreza's (0,1,0), so these win on specificity rather than on source order.
   That makes the theme self-sufficient: upload it and the look is correct,
   before anyone touches Theme Options.

   You should STILL enter the same values under Theme Options → Colors (see
   README). Not for the front end — for the builder previews in wp-admin,
   which read the options, not this file.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Shipped with the theme rather than uploaded through Impreza's custom-font
   UI, so the files travel with the code and survive a database restore.
   WOFF2 only — every browser that can run this site supports it, and it is
   ~40% smaller than the OTFs the site serves today.

   LICENSING — see assets/fonts/READ-ME-LICENSE.txt before this goes live.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Supply Mono';src:url('../fonts/PPSupplyMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Supply Mono';src:url('../fonts/PPSupplyMono-Ultralight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Supply Sans';src:url('../fonts/PPSupplySans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Supply Sans';src:url('../fonts/PPSupplySans-Ultralight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}

/* Aliases for the two families already uploaded to /wp-content/uploads and
   selected in existing builder elements. Without these, any element whose
   typography was set by hand to "Supply Regular" or "Supply Ultralight" would
   fall back to a system font the moment those uploads are removed. Note the
   names are misleading on the live site: "Supply Ultralight" is the MONO cut,
   "Supply Regular" is the SANS cut. Mapped here as they actually are. */
@font-face{font-family:'Supply Ultralight';src:url('../fonts/PPSupplyMono-Ultralight.woff2') format('woff2');font-weight:200 400;font-display:swap}
@font-face{font-family:'Supply Regular';src:url('../fonts/PPSupplySans-Regular.woff2') format('woff2');font-weight:200 400;font-display:swap}

/* ==========================================================================
   1 — moonson tokens
   ========================================================================== */
:root{
  /* Red. --m-red is the brand, --m-red-hot is hover only, --m-red-dim is for
     borders and inert states that should read as red without shouting. */
  --m-red:#C1071A;
  --m-red-hot:#FF1425;
  --m-red-dim:#6E0410;

  /* Ground. Pure black is the page; -1 and -2 are the two raised surfaces.
     Nothing in this system is lighter than --m-bg-2. */
  --m-bg:#000;
  --m-bg-1:#070707;
  --m-bg-2:#0D0D0E;

  --m-line:rgba(255,255,255,.10);
  --m-line-2:rgba(255,255,255,.05);
  /* Form fields need a border you can actually find on black — .10 disappears.
     This is the one place the EPK's line value is deliberately not reused. */
  --m-line-field:rgba(255,255,255,.18);

  /* Text greys — the three steps settled on in the Brevo newsletter
     (Transmission 01, v15), where they were tuned for reading rather than for
     a one-off screening. Solid hex, not white at an opacity: the EPK's .62
     and .34 came out at 7.4:1 and 2.6:1 on black, and 2.6:1 is below what a
     label needs. Contrast on #000:
       --m-fg    #E8E6E1  16.8:1   headings, primary text
       --m-fg-2  #ABA8A2   8.9:1   body copy, secondary text
       --m-fg-3  #8A8A8A   6.1:1   labels, eyebrows, footer, placeholders   */
  --m-fg:#E8E6E1;
  --m-fg-2:#ABA8A2;
  --m-fg-3:#8A8A8A;

  --m-mono:'Supply Mono','Supply Ultralight',ui-monospace,'SF Mono',Menlo,monospace;
  --m-sans:'Supply Sans','Supply Regular',-apple-system,'Helvetica Neue',sans-serif;

  --m-ease:cubic-bezier(.16,1,.3,1);

  /* Film grain. The EPK runs .045 because it is a one-off screening; a shop
     you read for ten minutes wants less. Raise it here, in one place. */
  --m-grain-opacity:.03;
}

/* ==========================================================================
   2 — mapping onto Impreza 9.1
   --------------------------------------------------------------------------
   Variable names below were read off the live site's generated CSS, not
   guessed. If a future Impreza release renames them, this block is the only
   thing that needs revisiting.
   ========================================================================== */
:root:root{

  /* --- Content ----------------------------------------------------------
     Was #B11A03 as the page background — a red canvas. Now black, with red
     demoted to accent, which is what it is in the EPK. */
  --color-content-bg:var(--m-bg);
  --color-content-bg-grad:var(--m-bg);
  --color-content-bg-alt:var(--m-bg-2);
  --color-content-bg-alt-grad:var(--m-bg-2);
  --color-content-border:var(--m-line);
  --color-content-text:var(--m-fg);
  --color-content-heading:var(--m-fg);
  --color-content-heading-grad:var(--m-fg);
  --color-content-faded:var(--m-fg-3);
  --color-content-link:var(--m-fg);
  --color-content-link-hover:var(--m-red);
  --color-content-primary:var(--m-red);
  --color-content-primary-grad:var(--m-red);
  --color-content-primary-faded:rgba(193,7,26,.15);
  --color-content-secondary:var(--m-red-hot);
  --color-content-secondary-grad:var(--m-red-hot);
  --color-content-overlay:rgba(0,0,0,.75);
  --color-content-overlay-grad:rgba(0,0,0,.75);

  /* --- Alternate colours -------------------------------------------------
     Impreza's "Alternate" scheme is its light-on-dark escape hatch and ships
     white. In a system with no light mode that reads as a bug the first time
     someone flips a section to Alternate. Pointed at the raised dark surface
     instead, so Alternate means "one step up from the page", not "white". */
  --color-alt-content-bg:var(--m-bg-2);
  --color-alt-content-bg-grad:var(--m-bg-2);
  --color-alt-content-bg-alt:var(--m-bg-1);
  --color-alt-content-bg-alt-grad:var(--m-bg-1);
  --color-alt-content-border:var(--m-line);
  --color-alt-content-text:var(--m-fg);
  --color-alt-content-heading:var(--m-fg);
  --color-alt-content-heading-grad:var(--m-fg);
  --color-alt-content-faded:var(--m-fg-3);
  --color-alt-content-link:var(--m-fg);
  --color-alt-content-link-hover:var(--m-red);
  --color-alt-content-primary:var(--m-red);
  --color-alt-content-primary-grad:var(--m-red);
  --color-alt-content-secondary:var(--m-red-hot);
  --color-alt-content-secondary-grad:var(--m-red-hot);
  --color-alt-content-overlay:rgba(0,0,0,.75);
  --color-alt-content-overlay-grad:rgba(0,0,0,.75);

  /* --- Header -----------------------------------------------------------
     The EPK header is a gradient-to-transparent bar that turns into a solid
     blurred one on scroll (.hdr / .hdr.solid). Impreza's header builder has
     the same two states: "transparent" for the top of the page, "middle" for
     the sticky one. Wired accordingly. */
  --color-header-transparent-bg:transparent;
  --color-header-transparent-bg-grad:transparent;
  --color-header-transparent-text:var(--m-fg-3);
  --color-header-transparent-text-hover:var(--m-red);
  --color-header-middle-bg:rgba(0,0,0,.86);
  --color-header-middle-bg-grad:rgba(0,0,0,.86);
  --color-header-middle-text:var(--m-fg-3);
  --color-header-middle-text-hover:var(--m-red);
  --color-header-top-bg:var(--m-bg);
  --color-header-top-bg-grad:var(--m-bg);
  --color-header-top-text:var(--m-fg-3);
  --color-header-top-text-hover:var(--m-red);
  --color-header-top-transparent-bg:transparent;
  --color-header-top-transparent-bg-grad:transparent;
  --color-header-top-transparent-text:var(--m-fg-3);
  --color-header-top-transparent-text-hover:var(--m-red);

  /* --- Footer + subfooter ------------------------------------------------
     Both were still on Impreza's stock blue-grey (#384b5f / #2c3e50). */
  --color-footer-bg:var(--m-bg);
  --color-footer-bg-grad:var(--m-bg);
  --color-footer-bg-alt:var(--m-bg-1);
  --color-footer-bg-alt-grad:var(--m-bg-1);
  --color-footer-border:var(--m-line-2);
  --color-footer-text:var(--m-fg-3);
  --color-footer-heading:var(--m-fg-2);
  --color-footer-heading-grad:var(--m-fg-2);
  --color-footer-link:var(--m-fg-3);
  --color-footer-link-hover:var(--m-red);
  --color-subfooter-bg:var(--m-bg);
  --color-subfooter-bg-grad:var(--m-bg);
  --color-subfooter-bg-alt:var(--m-bg-1);
  --color-subfooter-bg-alt-grad:var(--m-bg-1);
  --color-subfooter-border:var(--m-line-2);
  --color-subfooter-text:var(--m-fg-3);
  --color-subfooter-link:var(--m-fg-3);
  --color-subfooter-link-hover:var(--m-red);

  /* Mobile browser chrome */
  --color-chrome-toolbar:var(--m-bg);

  /* --- Layout ------------------------------------------------------------
     0.3rem rounded corners are the single biggest tell that this is a
     multipurpose theme. The EPK has no radius anywhere.

     The width bump is the one change here that reflows existing pages: the
     canvas goes from 1300px to the EPK's 1560px. If a page you already built
     looks stretched afterwards, comment out the two width lines — everything
     else in this file is independent of them. */
  --site-border-radius:0px;
  --site-canvas-width:1560px;
  --site-content-width:1500px;

  /* --- Typography --------------------------------------------------------
     The live site has these the other way round: mono for body copy, sans for
     headings. The EPK does the opposite — sans ultralight for reading, mono
     for every label, title and number — and that contrast is most of why the
     EPK reads as a document rather than a website. Swapped to match.

     To go back: --font-family → var(--m-mono), --h1-font-family → var(--m-sans).

     Sizes are clamped rather than Impreza's max(3rem,3vw): max() has no upper
     bound, so headings kept growing past 2560px displays. */
  --font-family:var(--m-sans);
  --font-weight:200;
  --font-size:17px;
  --line-height:1.62;
  --letter-spacing:0em;
  --text-transform:none;
  --bold-font-weight:400;

  --h1-font-family:var(--m-mono);
  --h1-font-weight:400;
  --h1-font-size:clamp(34px,5vw,72px);
  --h1-line-height:1.05;
  --h1-letter-spacing:-.01em;
  --h1-text-transform:lowercase;
  --h1-margin-bottom:.4em;
  --h1-bold-font-weight:400;

  --h2-font-size:clamp(24px,3vw,40px);
  --h2-line-height:1.1;
  --h2-letter-spacing:-.01em;
  --h2-margin-bottom:.5em;

  --h3-font-size:clamp(19px,2.1vw,27px);
  --h3-line-height:1.2;
  --h3-letter-spacing:-.01em;

  --h4-font-size:clamp(16px,1.5vw,20px);
  --h4-letter-spacing:.02em;

  --h5-font-size:14px;
  --h5-letter-spacing:.12em;
  --h5-text-transform:uppercase;

  --h6-font-size:11px;
  --h6-letter-spacing:.24em;
  --h6-text-transform:uppercase;
}