/* ===========================================================================
   LAYER 1 — TOKENS
   Mistilteinn Phase 5. Source: README.md 1.1 (settings_data.json, verified
   2026-09-25) and COM-TARGET-2026-09-26.md sections 1 and 3.

   Custom properties ONLY. No element selectors in this file. Anything that
   paints belongs in a later layer, so that the four-layer order in
   functions.php stays the whole explanation of what wins.

   READ THIS BEFORE CHANGING A VALUE: the theme tokens are NOT the design.
   Three !important layers sit on top of them and win where they disagree.
   COM-TARGET section 1 has the full "token says X / renders Y" table. The
   tokens below are the FLOOR, not the finished page.
   =========================================================================== */

:root {
  /* --- palette, from the six Origin colour schemes -------------------- */
  --mcs-ink:        #11151c;   /* body/heading text, home page            */
  --mcs-ink-pdp:    #1a1a1a;   /* body/heading text, PDP — a real diff    */
  --mcs-white:      #ffffff;
  --mcs-offwhite:   #f7f7f7;   /* page background, home                   */
  --mcs-cream:      #e7e7e2;
  --mcs-cream-warm: #dfdfd8;
  --mcs-brown:      #855832;   /* announcement bar, FAQ accordion, footer */
  --mcs-brown-deep: #5c3a1e;   /* color-scheme-1 button, from custom.css  */
  --mcs-green:      #4c6762;
  --mcs-orange:     #ff7800;   /* EVERY button actually renders this      */

  /* PDP-only section backgrounds. COM-TARGET section 4. */
  --mcs-pdp-bg-a:   #f7f5f2;
  --mcs-pdp-bg-b:   #f7f5f1;
  --mcs-pdp-bg-c:   #faf8f5;

  /* --- colour schemes -------------------------------------------------- */
  /* Only schemes 1, 4 and 5 appear on the home page. 2, 3 and the custom
     c7a56198 are captured for completeness and are unused there. */
  --mcs-scheme-1-bg: #f7f7f7; --mcs-scheme-1-text: #11151c; --mcs-scheme-1-btn: #855832; --mcs-scheme-1-btn-text: #dfdfd8;
  --mcs-scheme-2-bg: #ffffff; --mcs-scheme-2-text: #11151c; --mcs-scheme-2-btn: #11151c; --mcs-scheme-2-btn-text: #ffffff;
  --mcs-scheme-3-bg: #11151c; --mcs-scheme-3-text: #ffffff; --mcs-scheme-3-btn: #ffffff; --mcs-scheme-3-btn-text: #11151c;
  --mcs-scheme-4-bg: #855832; --mcs-scheme-4-text: #dfdfd8; --mcs-scheme-4-btn: #dfdfd8; --mcs-scheme-4-btn-text: #855832;
  --mcs-scheme-5-bg: #4c6762; --mcs-scheme-5-text: #dfdfd8; --mcs-scheme-5-btn: #dfdfd8; --mcs-scheme-5-btn-text: #4c6762;
  --mcs-scheme-c7-bg: #e7e7e2; --mcs-scheme-c7-text: #11151c; --mcs-scheme-c7-btn: #855832; --mcs-scheme-c7-btn-text: #dfdfd8;

  /* --- type ------------------------------------------------------------ */
  /* Heading face is Platypi. The weight loaded differs per page and is set
     by fonts-home.css / fonts-pdp.css, not here. */
  --mcs-font-heading: "Platypi", Georgia, "Times New Roman", serif;

  /* Body is NOT a webfont on either page, and the two pages use DIFFERENT
     stacks. Home = Shopify's system_ui stack. PDP = -apple-system first.
     COM-TARGET section 4. Reproduced rather than unified. */
  --mcs-font-body-home: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mcs-font-body-pdp:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* Absolute px. perry-fonts.css sets these with !important; the multiplier
     scales in settings_data.json are irrelevant on the rendered page. */
  --mcs-size-body: 18px;
  --mcs-size-h1:   36px;   /* stays 36px from 1440 down to 375 — no mobile scale-down */
  --mcs-size-h2:   28px;
  --mcs-size-h3:   24px;
  --mcs-size-h4:   20px;
  --mcs-size-h5:   18px;
  --mcs-size-nav:  13px;   /* 13px WINS over perry-fonts' 17px. See layer 4. */

  --mcs-lh-body: 1.8;   /* 18px x 1.8 = 32.4px, the target's BODY line-height.
                           NOT 1.6: that is the .com's PARAGRAPH line-height and it is
                           still ported verbatim in layer 2 part A. Finding N-13. */
  --mcs-lh-h1:   1.2;
  --mcs-lh-h2:   1.25;
  --mcs-lh-h3:   1.3;
  --mcs-ls-heading: 0.69px;
  --mcs-ls-body:    0.6px;

  /* Body copy is 75% opacity ink, not solid. COM-TARGET section 3. */
  --mcs-body-color: rgba(17, 21, 28, .75);

  /* --- layout ---------------------------------------------------------- */
  --mcs-page-width:     1200px;  /* home */
  --mcs-page-width-pdp: 1152px;  /* PDP — a real difference, not a rounding */
  --mcs-gutter-h: 40px;
  --mcs-gutter-v: 40px;
  --mcs-header-pad-wide: 70px;   /* 7rem at >=990px, from custom.css */
  --mcs-header-pad:      20px;   /* 2rem below that */

  /* --- radius ----------------------------------------------------------- */
  /* The token is 0. The page is not. DECISIONS: global token 0 with three
     documented per-block overrides, and NO blanket !important radius rule.
     Finding H-2. The overrides are declared here as named tokens so a
     section can opt in explicitly instead of a global rule opting everything out. */
  --mcs-radius: 0;
  --mcs-radius-hero-box:   12px;  /* home hero content box            */
  --mcs-radius-s2-image:    8px;  /* home section-2 image             */
  --mcs-radius-s2-textbox:  8px;  /* home section-2 text box, +1px border */
  --mcs-radius-value-card: 12px;  /* home value-stack card            */
  --mcs-radius-button:     14px;  /* home buttons — from custom.css   */
  --mcs-radius-button-pdp:  8px;  /* PDP orange buttons               */
  --mcs-radius-button-pdp-secondary: 10px; /* PDP brown buttons       */
  --mcs-radius-pdp-gallery: 12px;
  --mcs-radius-pill:      999px;  /* PDP eyebrow pills                */

  /* --- shadow ----------------------------------------------------------- */
  /* Tokens say opacity 0 everywhere. The value-stack card has a real shadow. */
  --mcs-shadow: none;
  --mcs-shadow-value-card: rgba(0, 0, 0, .1) 0 4px 20px;

  /* --- motion ------------------------------------------------------------ */
  /* reveal-on-scroll false; hover animations none. */
  --mcs-transition: none;
}