/* ─────────────────────────────────────────────────────────────────────────────
   Shalom · Site CSS
   ─────────────────────────────────────────────────────────────────────────────
   The system source of truth for design tokens, fonts, and themes.
   Loaded after each blade's local <style> via partials/theme-vars.blade.php,
   so values defined here OVERRIDE any drifted local copies.

   Edit colors / fonts here and they apply to every page on the site.
   Phase B refactor — 2026-05-23.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── CANONICAL DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --parchment:  #fefcef;
  --cream:      #faf3dd;
  --line:       rgba(26, 35, 50, 0.10);

  /* Ink (text) */
  --ink:        #1a2332;
  --ink-soft:   #334455;
  --ink-faint:  rgba(26, 35, 50, 0.45);

  /* Brand */
  --teal:       #03617A;
  --teal-dark:  #024357;
  --teal-light: #e6f0f3;
  --brass:      #b08d3c;
  --brass-dark: #8c6f2e;

  /* Status */
  --red:        #a82a1f;
  --green:      #2d8659;
  --warn:       #b08d3c;

  /* Layout */
  --gutter:     clamp(20px, 5vw, 32px);
}

/* ── FONT FACES ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Xtreem';
  src: url('/fonts/XtreemMedium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

/* (Cormorant Garamond, Instrument Sans, Poppins, JetBrains Mono are loaded
   via Google Fonts <link> tags in each blade's head — they're CDN-served,
   not @font-face declarations.) */

/* ── THEME OVERRIDES ─────────────────────────────────────────────────────── */
/* When body has data-theme="...", these override the standard token values.
   Specificity (0,1,1) wins over plain :root (0,1,0). */
body[data-theme="communion"]    { --parchment: #f5f0fb; --cream: #f1ebf9; --teal: #6b4d8a; --teal-dark: #553a72; --teal-light: #ece2f5; --brass: #8a6dab; }
body[data-theme="easter"]       { --parchment: #f0faf3; --cream: #eaf6ed; --teal: #3a8e63; --teal-dark: #2c714d; --teal-light: #dff0e3; --brass: #c2a652; }
body[data-theme="christmas"]    { --parchment: #fbf2f2; --cream: #f7eaea; --teal: #8b3a4b; --teal-dark: #6e2d3b; --teal-light: #f3dcdf; --brass: #b08d3c; }
body[data-theme="mothers"]      { --parchment: #fdf1f5; --cream: #fbe8ee; --teal: #b1657a; --teal-dark: #8d4d61; --teal-light: #f6dde3; --brass: #c8916b; }
body[data-theme="thanksgiving"] { --parchment: #fbf3e9; --cream: #f7ecdb; --teal: #8a5a2c; --teal-dark: #6b4622; --teal-light: #f0e0c8; --brass: #b08d3c; }

/* html background needs to match body's themed parchment — CSS variables don't
   cascade upward, so we set the bg explicitly when html contains a themed body.
   Fixes the cream strip at page bottom when content is shorter than viewport. */
html:has(body[data-theme="communion"])    { background: #f5f0fb; }
html:has(body[data-theme="easter"])       { background: #f0faf3; }
html:has(body[data-theme="christmas"])    { background: #fbf2f2; }
html:has(body[data-theme="mothers"])      { background: #fdf1f5; }
html:has(body[data-theme="thanksgiving"]) { background: #fbf3e9; }
html:not(:has(body[data-theme="default"])):not(:has(body[data-theme]:not([data-theme="default"]))) { background: var(--parchment); }
html:has(body[data-theme="default"])      { background: #fefcef; }