/*
 * Mishpacha — Global Design Tokens
 * Premium editorial reskin (The New Yorker style).
 * Loaded first in wp_enqueue_scripts so all subsequent stylesheets can use these vars.
 */

:root {
  /* Typography */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body:  'EB Garamond', Georgia, serif;
  --font-sans:  'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Colors */
  --ink:        #1D0506;
  --paper:      #FBFBF9;
  --divider:    #E0DED7;
  --red:        #DE1C22;
  --red-dark:   #B20108;

  /* Spacing scale (8px) */
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;

  /* Radius */
  --radius-btn: 2px;
}

/* Warm paper surface for the entire site.
 * Sections with explicit dark/branded backgrounds (.sa-*, .pod-*, etc.)
 * override this on their own containers — body color is just the base canvas. */
body {
  background-color: var(--paper);
}

/* Always reserve scrollbar gutter so toggling body.overflow:hidden
 * (drawer open/close) doesn't shift page content horizontally. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll; /* fallback for older browsers without scrollbar-gutter */
}

/* Comparison toggle — append ?bg=white to any URL to swap the warm paper
 * background for pure white. All places that use var(--paper) follow
 * automatically (header chrome stays white either way). */
body.mishpacha-bg-white {
  --paper: #ffffff;
}

/* Legal consent checkbox — used on every user-submission form */
.mp-legal-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 16px 0;
  cursor: pointer;
}
.mp-legal-consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--red);
  cursor: pointer;
}
.mp-legal-consent a {
  color: var(--red);
  text-decoration: underline;
}
.mp-legal-consent a:hover { color: var(--red-dark); }
.mp-legal-consent-req { color: var(--red); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-left: 4px; }