/* ============================================================
   MUSEF — DESIGN TOKENS
   Single source of truth. Load this BEFORE header/footer CSS.
   Change a colour here and it changes everywhere.
   ============================================================ */

:root{
  /* brand */
  --msf-accent:      #EA6A33;
  --msf-accent-dark: #D4551F;
  --msf-accent-soft: rgba(234,106,51,.12);
  --msf-wa:          #25D366;

  /* light surfaces (header) */
  --msf-ink:     #1A1A1A;
  --msf-muted:   #8A8A8A;
  --msf-line:    #ECECEC;
  --msf-bg:      #FFFFFF;
  --msf-hover:   #F5F5F5;
  --msf-field:   #F4F4F4;
  --msf-row2-bg: #FAFAFA;

  /* dark surfaces (footer) */
  --msff-bg:    #241A15;
  --msff-bg2:   #1A120E;
  --msff-usp:   #FFF6F1;
  --msff-head:  #FFFFFF;
  --msff-text:  #C4B8B1;
  --msff-line:  rgba(255,255,255,.10);
  --msff-field: rgba(255,255,255,.07);

  /* metrics */
  --msf-r1:     72px;    /* header row 1, desktop */
  --msf-r1-sm:  62px;    /* header row 1, mobile  */
  --msf-r2:     50px;    /* header row 2          */
  --msf-max:    1360px;  /* content width         */
  --msf-gut:    24px;    /* side gutter, desktop  */
  --msf-gut-sm: 16px;    /* side gutter, mobile   */
  --msf-tap:    44px;    /* minimum tap target    */

  /* typography */
  --msf-font:  'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --msf-serif: Georgia, 'Times New Roman', serif;
}

/* Shared helpers — both header and footer rely on these */
.msf-wrap{
  max-width:var(--msf-max);
  margin-inline:auto;
  padding-inline:var(--msf-gut);
}
@media (max-width:640px){
  .msf-wrap{ padding-inline:var(--msf-gut-sm); }
}

/* Visually hidden but readable by screen readers */
.msf-sr{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}